Vant是一个轻量、可靠的移动端Vue组件库，提供了丰富的组件和解决方案，帮助开发者快速构建出优雅的移动端应用。

安装vant

# Vue 3项目，安装最新版Vant：
npm install vant -S。
# Vue 2项目，安装Vant 2：
npm install vant@latest-v2 -S。

引入Vant

自动按需引入：推荐使用babel-plugin-import插件来自动按需引入Vant组件。首先安装babel-plugin-import插件，然后在babel.config.js中配置该插件，最后在需要使用的Vue页面中直接引入并使用组件。

手动按需引入：在需要使用的Vue页面中手动引入组件及其样式，并在页面中注册组件。

引入所有组件：虽然可以一次性导入所有Vant组件，但这样做会增加代码包体积。

Vant常用组件

Button（按钮）

支持不同形状和颜色的按钮，以及禁用状态。

<van-button type="primary">主要按钮</van-button>

Cell（单元格）

用于展示一条信息，通常包含一个标题和对应的内容。

<vant-cell title="用户名" value="John Doe"></vant-cell>

Tab（标签页）

用于在多个内容之间切换。

<vant-tab><vant-tab-item title="标签一">内容一</vant-tab-item>
<vant-tab-item title="标签二">内容二</vant-tab-item></vant-tab>

Tabbar（标签栏）

底部导航栏，常用于移动端应用的页面切换。

<van-tabbar v-model="active" @change="onChange">...</van-tabbar>

Carousel（轮播图）

用于展示图片或视频的轮播组件。

<van-carousel><van-carousel-item title="图片1">图片描述1</van-carousel-item>...</van-carousel>

Dialog（弹出框）

用于展示一段内容或进行一些操作的弹窗组件。

import { Dialog } from 'vant'; Dialog.alert({ message: '这是一段内容', title: '提示' });

了解更多内容前往介绍 - Vant 4