1. 介绍
vant提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。官方推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目
官网地址:youzan.github.io/vant/#/zh-C…
Github: github.com/youzan/vant
vant中文文档: www.bookstack.cn/read/vant-z…
Vant v2.0 移动组件库 文档: www.bookstack.cn/read/vant-v…
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 />