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" />