vue 移动端适配

1、npm i lib-flexible --save安装lib-flexible，flexible会自动把px转换成rem，并在main.js中引入

import "lib-flexible/flexible.js";

2、在根目录index.html头部加移动端适配的meta代码

<meta content="width=device-width, initial-scale=1.0" name="viewport" />

3、npm install px2rem-loader  安装px2rem-loader

4、在vue-cli生成的webpack 配置中，vue-loader 的options和其他样式文件loader 最终都是由build/untils.js里的一个方法生成的。我们只需要在cssLoader后面加上一个px2remLoader即可，px2rem-loader的remUnit 选项意思是1rem=多少像素，结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中。

备注： 使用px2rem-loader的时候，字体在手机上显示的很小，百度之后说应该在后面加上/*px*/（font-size:14px;/*px*/），这里这么设置时，字体的大小要为两倍，如你想让字体显示为14px,css代码则为【font-size:28px;/*px*/】，对于border这些不想转换为rem的，在后面加上/*no*/，使用引入的组件时，组件的样式会受到这两个框架的影响，需要自己调整