vue3.0创建项目并引入vant插件

适配手机端使用得post css-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 {
            // 修改开发环境的配置...
        }
    }
}