1、引入vant组件库---对应版本
1.通过yarn下载组件库：yarn add vant@latest-v2 -S（vue2项目） yarn add vant（vue3项目）
2.下载插件 yarn add babel-plugin-import -D
3.在babel.config.js添加如下设置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
4.按需引入---必须要重启服务器
Tips：如果需要全局引入，则不需要设置相关插件
下错版本后需要yarn remove 对应版本
2、移动端适配-rem单位进行适配
2.1使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）
lib-flexible 插件将1rem的值设置为1/10的视口的宽. 设置完毕后: width:0.2rem意思为: 不管什么分辨率下都是0.2个1/10视口宽的盒子
1.安装yarn add amfe-flexible 2.到main.js引入 import 'amfe-flexible'
2.2使用 postcss-pxtorem 将 px 转为 rem
1.安装 yarn add postcss postcss-pxtorem@5. 1.1
2.根目录下创建postcss.config.js文件，对postcss进行设置
代码：module.exports = { plugins: { 'postcss-pxtorem': { // 能够把所有元素的px单位转换成rem // rootValue:转换px的基准值 // 编码时，一个元素宽是75px,则换成rem之后就是2rem rootValue: 37.5, propList: ['*'] } } }
