vue移动端flexible.js结合Muse-ui使用的小坑

1.flexable.js

这是阿里淘宝的前端库，做到了极好的自适应，这样省去了大量的工作。

(1)安装插件　　

npm install lib-flexible --save

（2）安装px2rem这个插件，可以自动转为rem，在confing文件夹下面的util.js里面加入

var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75,//设计稿除以10得到的值
    }
}

//在下面的函数中修改着一句
function generateLoaders(loader, loaderOptions) {
 
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

（3）在main.js里面的头部中引入js import "lib-flexible"

（4）在index.html的头部中指定meta类型<meta name="viewport" content="width=device-width, initial-scale=1.0">

这样子基本就能够实现自适应了。

针对与flexable.js的效果我有话要讲一下，就是在转化的为rem过后，界面看起来的会比设计稿的小。同样是200px的div，转成rem后会比原来就是200px的看起来要小。第二就是注解，如果某个元素不想转化为rem，那么就可以在对应的CSS属性后面加上/*no */，就可以了，比如border:1px solid #000; /*no */  ；同样的我们可以使用/*px*/，这个常用于字体大小，可以生成三套不同的像素大小。

2.muse-ui

同时我们使用谷歌的muse-ui这个前端框架,贴个连接。去muse-ui。如果要使用这个框架的话上面也有教程。

（1）安装

npm install muse-ui -S

（2）使用

引入的方式有两种，一种是全局引入，第二种是按需引入

import MuseUI from 'muse-ui';
Vue.use(MuseUI);

按需引入的话首先需要下载插件

借助 babel-plugin-import, 我们可以只引入需要的组件，以达到减小项目体积的目的。

 在mian.js里面添加你想要使用组件

import Vue from 'vue';

import { Button, Select } from 'muse-ui';


Vue.use(Button);
Vue.use(Select);

3. 存在的问题

muse-ui本身作为一款适配移动端的UI框架，本身是做了自适应的，在引入flexible.js 后。如果使用了px2rem会把框架的像素转为rem，导致组件变形，样式发生改变，解决办法就是我们还是使用flexible.js然后不使用px2rem，在需要转rem的地方手动写rem,这样引入的ui组件样式就不会变小，而是很美观了。