vue项目pc端使用rem进行适配 （lib-flexible+postcss-pxtorem）

1、使用vue-cli创建项目

vue create my-app

2、安装lib-flexible与postcss-pxtorem依赖

npm install lib-flexible -S

npm install postcss-pxtorem -D

安装成功后，在package.json文件可找到依赖相关版本信息，如图所示

3、在main.js引入 lib-flexible

import "lib-flexible/flexible"; 

4、找到目录 ：node_modules/lib-flexible/flexible.js ，修改flexible.js； （不要直接搜索，搜不到的）（配置移动端适配跳过这一步骤）

 5、在根路径中 (与 main.js 平级) 创建 .postcssrc.js 文件

// postcss 配置文件
module.exports = {
    // 配置需要使用的postcss插件
    plugins: {
      'postcss-pxtorem': {
        rootValue: 144,   // 这里应该 UI 图的十分之一
        propList: ['*']
      }
    }
}

6、经过上面的步骤就全部配置好了，接下来就可以根据UI图写了