vue3.0 创建项目并引入vant插件适配手机端使用得postcss-pxtorem

创建vue3.项目

vue create 项目名称

引入vant流程

第一步.通过npm安装

npm i vant@next -S

第二步.vant官网给我们提供了进阶用法：具体自行查看官网吧，兄弟姐妹们，在这里简单介绍下移动端适配配置方法：

1.安装postcss-pxtorem

npm install postcss-pxtorem --save-dev

如果因为版本太高导致报错了，使用以下代码；

npm i postcss-pxtorem@5.1.1

2.安装amf-flexible

npm i -S  amfe-flexible

3.在main中引入amfe-flexible

import 'amfe-flexible'

4.在vue.config.js中进行配置

/*
 * @Author: Aimee·Zhang
 * @Date: 2021-12-27 11:16:42
 */
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 37.5, // vant官方使用的是37.5
                        selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
                        propList: ['*']
                    })
                ]
            }
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    }
}