Vue中使用rem

1、添加依赖并进行配置

1. 安装lib-flexible

npm i amfe-flexible --save

在main.js中引入

import 'amfe-flexible'

2. 安装postcss-pxtorem，将 px 转为 rem

npm install postcss-pxtorem --save-dev

在根目录创建postcss.config.js文件，添加如下代码

module.exports = {
    plugins: {
      autoprefixer: {},
      "postcss-pxtorem": {
        rootValue:75,// 设计图页面尺寸如果是750就填75,是640就填入64,为了适配vantui我们保持和vant官方一致
        propList: ["*"]
      }
    }
  };

2、重启

重启后，布局按照设计图px布局 然后就会自动计算rem的值