Vant UI 是一款基于 Vue.js 的移动端组件库，它提供了丰富的组件，可以帮助开发者快速构建移动端页面。Vant UI 是由腾讯出品的一款开源的 Vue 组件库，它具有轻量、易用、高效、可扩展性等特点，能够帮助开发者快速构建出优雅的移动端页面。
Vant UI 教程是专门为初学者准备的，旨在帮助初学者快速上手 Vant UI 并使用它来开发优雅的移动端页面。教程中将会介绍 Vant UI 的安装、使用方法、API 以及其他相关内容。
// 安装 Vant UI
npm install vant -S
// 在 main.js 中引入 Vant
import Vue from 'vue'
import { Button, Cell } from 'vant'
Vue.use(Button).use(Cell)
在 main.js 文件中引入 Vant 的方法如上所述，但是如果你想要使用更多的 Vant 组件，你可能不想一个一个去引入，这时你就可以使用 babel-plugin-import 插件来帮助你快速引入所有的 Vant 组件。
// 安装 babel-plugin-import 插件
npm install babel-plugin-import -D // 配置 .babelrc 文件 { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }
在 .babelrc 文件中配置 babel-plugin-import 插件后，我们就可以在 main.js 中直接引入所有的 Vant 组件了。
// 在 main.js 中直接引入所有的 Vant 组件 import Vue from 'vue' import { Button, Cell, Toast } from 'vant' // ...省略部分代码... // 在 vue 实例中使用 new Vue({ el: '#app', components: { App }, template: '
上述代码就是在 vue 实例中使用 Toast 的方法，当我们调用 handleClick() 方法时就会显示 “Hello world!” 这样一条信息。Vant UI 还有很多其它的 API ，我么也可根据自己的需要去使用它来快速构建出优雅的移动端页面。
Layout 提供了 van-row 和 van-col 两个组件来进行行列布局。
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from "vue";
import { Col, Row } from "vant";
const app = createApp();
app.use(Col);
app.use(Row);
Layout 组件提供了 24列栅格，通过在 Col 上添加 span 属性设置列所占的宽度百分比。此外，添加 offset 属性可以设置列的偏移宽度，计算方式与 span 相同。
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
通过 gutter 属性可以设置列元素之间的间距，默认间距为 0。
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
通过 justify 属性可以设置主轴上内容的对齐方式，等价于 flex 布局中的 justify-content 属性。
<!-- 居中 -->
<van-row justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 右对齐 -->
<van-row justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 两端对齐 -->
<van-row justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 每个元素的两侧间隔相等 -->
<van-row justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| gutter | 列元素之间的间距（单位为 px） | number | string | - |
| tag | 自定义元素标签 | string | div
|
| justify | 主轴对齐方式，可选值为 end center
space-around space-between
|
string | start
|
| align | 交叉轴对齐方式，可选值为 center bottom
|
string | top
|
wrap v3.0.11
|
是否自动换行 | boolean | true
|
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| span | 列元素宽度 | number | string | - |
| offset | 列元素偏移距离 | number | string | - |
| tag | 自定义元素标签 | string | div
|
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | event: MouseEvent |
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | event: MouseEvent |
组件导出以下类型定义：
import type { ColProps, RowProps, RowAlign, RowJustify } from "vant";
介绍日期选择器，用于选择年、月、日，通常与弹出层组件配合使用。引入通过以下方式来全局注册组件，更多注册方式请参考组件注册...
介绍在右上角展示徽标数字或小红点。引入通过以下方式来全局注册组件，更多注册方式请参考组件注册。import { createApp } from ...
介绍用于标记关键词和概括主要内容。引入通过以下方式来全局注册组件，更多注册方式请参考组件注册。import { createApp } from ...
介绍Vant 是基于有赞Zan Design System视觉规范实现的组件库，在这里可以下载 Vant 的设计资源。设计稿组件设计稿（Sketch）包含...
介绍日历组件用于选择日期或日期区间。实例演示引入通过以下方式来全局注册组件，更多注册方式请参考组件注册。import { createA...
介绍用户可以在文本框内输入或编辑文字。实例演示引入通过以下方式来全局注册组件，更多注册方式请参考组件注册。import { creat...
