1. vant 官网

https://youzan.github.io/vant/#/zh-CN/quickstart

2. 通 npm 安装

npm i vant -S

3.安装 babel-plugin-import 插件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D

4.在 babel.config.js 中配置

plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]

5.接着你可以在代码中直接引入 Vant 组件

或者不在单个页面引用，在main.js全局引入

import Vue from 'vue'
import 'lib-flexible'
import App from './App.vue'

import {
Cell,
CellGroup,
Icon,
NavBar,
Search,
List,
Toast,
Button,
Tab, Tabs,
Col,
Row,
Calendar,
Dialog,
DropdownMenu, DropdownItem
} from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Search);
Vue.use(List);
Vue.use(Toast);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Col);
Vue.use(Row);
Vue.use(Calendar);
Vue.use(Dialog);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

6.rem 适配

Vant 中的样式默认使用px作为单位，
   postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。
   lib-flexible  用于设置rem基准值

（1） 安装postcss-pxtorem

npm install postcss-pxtorem --save-dev

（2）安装lib-flexible

npm install --save lib-flexible

（3）在main.js中引入lib-flexible

import 'lib-flexible';

（4）在postcss.config.js文件中进行配置

实际上，我完全找不到这个文件，新建一个（很香）

module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}

7.底部安全区适配

iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了safe-area-inset-bottom属性，设置该属性后，即可在对应的机型上开启适配，如下示例：

…………………………………………