Vue使用rem做自适应布局

1. 安装插件

• npm install lib-flexible --save
• npm install px2rem-loader --save-dev

     2.  配置插件

• 在入口文件 main.js 中引入 lib-flexible：

•  import 'lib-flexible'

     3.  在 build/utils.js 文件中配置 px2rem-loader

• 在 cssLoaders函数最后面添加如下代码

                 // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）

                    const px2remLoader={

                               loader: 'px2rem-loader',

                               options: {

                                        remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem

                                       remPrecision: 8//换算的rem保留几位小数点

                                     }

最后说明一下，px 写法上会有些不同，可以参考 px2rem 官方介绍，下面简单介绍一下。
1. 直接写 px，编译后会直接转化成 rem；
2. 在 px 后面添加 /*no*/，不会转化 px，会原样输出；
3. 在 px 后面添加 /*px*/，会根据 dpr 的不同，生成三套代码。
———————————————