1. 介绍

vant提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。官方推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目

官网地址：https://youzan.github.io/vant/#/zh-CN/intro

Github: https://github.com/youzan/vant

vant中文文档: https://www.bookstack.cn/read/vant-zh/guide.md

Vant v2.0 移动组件库文档: https://www.bookstack.cn/read/vant-v2.0/9fcd7e923e547d92.md

2. 安裝

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# Using npm
npm i vant -S

3. 在main.js中引入

3.1 一次性导入所有组件

Vant 支持一次性导入所有组件，不过引入所有组件会增加代码包体积，因此不推荐这种做法

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

3.2 按需导入

配置按需引入后，将不允许直接导入所有组件。需要使用哪个组件，就要引入哪个，所以要对组件名有基本的了解, 首字母要大写。引入完之后，一定要使用Vue.use去注册到Vue全局中，多个组件使用.use的方法进行链式调用注册到全局Vue实例中

//  使用 在入口文件main.js中  快速启动
import Vue from 'vue';
import { Button } from 'vant';
import 'vant/lib/index.css';

Vue.use(Button);

// 如果想使用更多组件， 只需要链式调用use即可。 下面是多个组件的按需导入
import Vue from 'vue';
import { Row, Col } from 'vant';
import 'vant/lib/index.css';

Vue.use(Row).use(Col);

// vant 常用组件 按需引入
import {
  Tab, Tabs, Toast, Popup, DatetimePicker, Area,
  Icon, Uploader, Picker, List, Rate, Field, Tag, Collapse, CollapseItem
  Button, Image, Grid, GridItem, RadioGroup, Radio,
  Loading, Cell, CellGroup, NoticeBar, Checkbox, CheckboxGroup,
  Progress, ActionSheet, Dialog
} from 'vant'

Vue.use(Tab).use(Tabs).use(Toast).use(Popup).use(DatetimePicker).use(Area)
  .use(Icon).use(Uploader).use(Picker).use(List).use(Rate).use(Field).use(Tag).use(Collapse).use(CollapseItem)
  .use(Button).use(Image).use(Grid).use(GridItem).use(RadioGroup).use(Radio)
  .use(Loading).use(Cell).use(CellGroup).use(NoticeBar).use(Checkbox).use(CheckboxGroup)
  .use(Progress).use(ActionSheet).use(Dialog)

3.3 CDN方式引入

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css"> 
 
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>

4. van-button在组件中使用

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

如果有报错，看看是不是没有在main.js引入组件，比如我要用Button组件就要先 import { Button } from 'vant', 然后注册到Vue中 Vue.use(Button)

5. 底部安全区适配

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

<!-- 开启 safe-area-inset-bottom 属性 -->
<van-number-keyboard safe-area-inset-bottom />