Vue移动端flexible.js+MuseUi
因为公司有个项目需求，手机端的。之前就写了一个一样的项目，只不过是用原生的写的，心想刚写了个vue后台管理系统，何不也用vue写，所有就没有把之前的利用过来。那么问题来了，要让手机端自适应我们该怎么做呢。
可以用阿里的移动端适配代码flexible.js。首先在命令行输入
npm i lib-flexible --save
然后在全局配置文件main.js引入
import Vue from 'vue'
import App from './App'
import router from './router' // 引入
import 'lib-flexible'
......
引入之后你会发现<html></html>标签中多了data-dpr和font-size
当然别忘了px2rem-loader，他的作用就是帮我们写的自动转成rem去适配移动设备。首先在命令行输入
npm i px2rem-loade --save-dev
然后在build文件夹下的utils.js做如下配置
//px转化rem
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //假设设计稿是750px,这里设置为75
}
}
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
配置好之后重新运行项目，你会发现Muse-UI插件的大小也跟着变化了，博主使用了时间和日期插件，真的变得贼丑，在写的过程中，日期插件不知道为啥选择年份的时候不能直接点击，点击就自动隐藏了，只能一页一页的往前翻，从而就选择不了。最后我选择了用ElementUI的日期插件，哈哈哈，有点尴尬PC插件强制用到手机端，不过没有问题。之所以插件变化，就是因为上面红色区域的px2remLoader,所以就先不使用px2emLoader，修改之后就变成如下这样的，改完之后记得重新运行项目。
//px转化rem
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //假设设计稿是750px,这里设置为75
}
}
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
最后就是Muse-UI的引入使用了，命令行中输入
npm i muse-ui -S
在全局配置文件main.js引入，当然你也可以按需引入，那就请移步到Muse-UI官网
import Vue from 'vue';
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css' Vue.use(MuseUI)
......
学无止境，不要满足于现状
Vue移动端flexible.js+MuseUi的更多相关文章
- vue移动端flexible.js结合Muse-ui使用和vux的小坑
因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...
- 关于Vue移动端框架（Muse-UI）的使用（说明书，针对不愿看文档的童鞋）
一.安装 1.npm安装 npm i muse-ui -S 或者 CDN安装 <link rel="stylesheet" href="https://unpkg. ...
- vue 的rem 配置和flexible.js的应用
1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动 ...
- vue脚手架搭建移动端项目--flexible.js
通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...
- vue.js移动端配置flexible.js
前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...
- vue-cli配置移动端自适应flexible.js
第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入li ...
- 移动端自适应：flexible.js可伸缩布局使用
http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现 ...
随机推荐
- UVa 216 Getting in Line【枚举排列】
题意:给出n个点的坐标,(2<=n<=8),现在要使得这n个点连通,问最小的距离的和 因为n很小,所以可以直接枚举这n个数的排列,算每一个排列的距离的和, 保留下距离和最小的那个排列就可以 ...
- codeforces 501 B Misha and Changing Handles 【map】
题意:给出n个名字变化,问一个名字最后变成了什么名字 先用map顺着做的,后来不对, 发现别人是将变化后的那个名字当成键值来做的,最后输出的时候先输出second,再输出first 写一下样例就好理解 ...
- zabbix 使用自带模板监控mysql
1.这里可以采用zabbix自带的mysql模版,但是也需要在mysql服务器上准备获取mysql status的脚本chk_mysql.sh,zabbix通过调用这个脚本来获取mysql的运行信息. ...
- 紫书 习题 10-8 UVa 10622（gcd）
把这个数质因数分解然后求因子个数的gcd就ok了. 一些细节 (1)这道题的质因数不需要存下来,每一次做完取一次gcd就ok了 (2)判断奇偶用ans & 1的时候要加括号, 位运算要注意括号 ...
- OpenJDK源码研究笔记(九)-可恨却又可亲的的异常(NullPointerException)
可恨的异常 程序开发过程中,最讨厌异常了. 异常代表着程序出了问题,一旦出现,控制台会出现一屏又一屏的堆栈错误信息. 看着就让人心烦. 对于一个新人来讲,遇到异常经常会压力大,手忙脚乱,心生畏惧. 可 ...
- HDU 4917 Permutation 拓扑排序的计数
题意: 一个有n个数的排列,给你一些位置上数字的大小关系.求合法的排列有多少种. 思路: 数字的大小关系可以看做是一条有向边,这样以每个位置当点,就可以把整个排列当做一张有向图.而且题目保证有解,所以 ...
- C++11之decltype
使用场景 在C++中常常要用到非常长的变量名.假设已经有变量和你将使用的变量是一个类型.就可以使用decltypekeyword 来申明一样的类型变量. decltype原理 返回现有变量类 ...
- Java 中的事件监听机制
看项目代码时遇到了好多事件监听机制相关的代码.现学习一下: java事件机制包含三个部分:事件.事件监听器.事件源. 1.事件:继承自java.util.EventObject类,开发人员自己定义. ...
- 解决Struts中文乱码问题总结
在进行struts开发的过程中.总也是出现非常多的乱码问题.但归根究竟,也仅仅是下面三种情况: ㈠页面显示中文乱码 ㈡传递參数中文乱码 ㈢国际化资源文件乱码 以下就这三中情况介绍怎么在详细项目 ...
- mysql通过DATE_FORMAT将错误数据恢复
因为如今新开发项目,同事造数据的时候,将时间类型格式造成"20150708".可是实际希望的数据格式是:"2015-07-08" . 数据库使用的是mysql. ...