vue移动端项目屏幕适配--flexible rem

开始
首先，我们使用 vue 的脚手架 vue-cli 来初始化一个 webpack 项目

没有安装过 vue-cli 的请先安装 vue-cli

安装所需依赖后安装 lib-flexible 和 px2rem-loader

1.下载lib-flexible
npm i lib-flexible --save

2.引入lib-flexible
在main.js中引入lib-flexible
import 'lib-flexible/flexible’

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

4.配置px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

    const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 36 //我的屏幕是360宽，所以是36，根据最近的设计屏幕填此项
        }
      }

同时，在generateLoaders方法中添加px2remLoader

 const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

6.重启
当配置完之后，一定要重启下服务，这样去调试台看的时候就会发现px自动转化为rem了
npm run dev 运行项目

7.px2rem 用法
安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。
直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个
在px后面添加/no/，不会转化px，会原样输出。 — 一般border需用这个
在px后面添加/px/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个