2021-vue-vue移动端如何做到px转为rem——vant篇

331 阅读1分钟

vue移动端如何做到px转为rem——vant篇

1. 搭建项目

  • 这个不多说了,搭建都是知道vue create xxx

2. 开始安装vant

2.1. 命令安装

yarn add vant

2.2. vue ui安装

  • 看看是否安装成功

3. 安装转换的命令

yarn add amfe-flexible

yarn add postcss-pxtorem

4. 在vue根目录下新建postcss.config.js

module.exports = () => ({
    plugins: [
        require('autoprefixer')(),
        // require('postcss-px2rem')({ remUnit: 75 })
        require('postcss-pxtorem')({
            rootValue: 37.5, // 这个是根据设计稿的,如果是安装75那就直接75
            propList: ['*']
        })
    ]
});

5. 在main.js里面新增

import 'amfe-flexible/index.js'