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 组件
<template> <div class="con"> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="default">默认按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> </div> </template> <script> import { Button } from 'vant'; export default { name:"Myindex", components: { [Button.name]: Button }, data() { return { } } } </script> <style scoped> .con{ text-align: center; } button{ display: block; margin: 0 auto; } </style>
或者不在单个页面引用，在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属性，设置该属性后，即可在对应的机型上开启适配，如下示例：
<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />