3-2 Vant 组件库

配套 Demo

在线运行：3-2-vant-cdn

移动端常见的 UI(按钮、弹窗、标签栏、表单、轮播、下拉刷新……)不用自己从零写,用现成的组件库。移动端 Vue 最流行的是 Vant(有赞出品)。

后端类比:Vant ≈ 一套现成的「UI 工具类库」,你直接调它的组件,不用造轮子。 配套 demo:demo/3-2-vant-cdn.html(CDN 版,双击即可看 Vant 组件效果,需联网)。第 5 部分会用 npm 方式正式集成。

---

1. 工程里安装 Vant(项目标准方式)

npm install vant

Vant 4 支持自动按需引入(只打包你用到的组件,体积小)。推荐配 @vant/auto-import-resolver:

npm install @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

vite.config.js:

import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [VantResolver()] }), // 自动引入用到的 Vant 组件
  ],
})

配好后,模板里直接用 <van-xxx> 组件,不用手动 import。第 5 部分实战就是这套配置。

简单起见,也可以全量引入(开发学习够用):

// main.js
import Vant from 'vant'
import 'vant/lib/index.css'
app.use(Vant)

---

2. 常用组件一览(挑高频的)

Vant 组件都以 van- 开头。下面是 H5 里几乎天天用的:

按钮 Button

<van-button type="primary">主要按钮</van-button>
<van-button type="success" size="small">小按钮</van-button>
<van-button type="primary" block>块级按钮(占满整行)</van-button>
<van-button type="primary" loading>加载中</van-button>

单元格 Cell(列表行,移动端最常见)

<van-cell-group inset>
  <van-cell title="标题" value="内容" />
  <van-cell title="带箭头" is-link to="/about" />
  <van-cell title="带图标" icon="location-o" value="深圳" />
</van-cell-group>

导航栏 NavBar(顶部标题栏)

<van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onBack" />

标签栏 Tabbar(底部导航,H5 App 必备)

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="search">分类</van-tabbar-item>
  <van-tabbar-item icon="cart-o" :badge="cartCount">购物车</van-tabbar-item>
  <van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>

表单 Form + Field

<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field v-model="username" label="用户名" placeholder="请输入"
               :rules="[{ required: true, message: '请填用户名' }]" />
    <van-field v-model="password" type="password" label="密码" />
  </van-cell-group>
  <van-button type="primary" block native-type="submit">提交</van-button>
</van-form>

注意:Vant 的表单组件也用 v-model 双向绑定(回顾 1-2),:rules 做校验。

---

3. 函数式组件(Toast / Dialog / Notify)

提示、弹窗这类,Vant 提供函数调用方式,不用写标签:

import { showToast, showDialog, showConfirmDialog } from 'vant'

showToast('提交成功')                       // 轻提示
showToast({ type: 'loading', message: '加载中...' })

showConfirmDialog({ title: '确认删除?', message: '删了找不回' })
  .then(() => { /* 点了确认 */ })
  .catch(() => { /* 点了取消 */ })

后端类比:像调用一个工具方法弹个提示,而不是在页面里摆一个隐藏的弹窗组件再控制显隐。很方便。

---

4. 怎么查组件用法

Vant 组件非常多,不用全记。用到时去官方文档查:每个组件都有完整示例和属性表。

• 官网:vant 官方文档(搜「Vant 4」)
• 用法套路一致:看示例 → 复制 → 改 props → 看效果

学习方法:先在 demo / 实战项目里把「按钮、Cell、NavBar、Tabbar、Field、Toast、Dialog」这几个用熟,其余按需查文档即可。

---

动手练习

1. 双击打开 demo/3-2-vant-cdn.html(需联网),看各种 Vant 组件长什么样、能交互。
2. 点「显示 Toast」「确认弹窗」按钮,体会函数式调用。
3. 底部 Tabbar 切换,观察选中态;给购物车项的 :badge 改个数字看角标。
4. 在表单里不填用户名直接提交,看 Vant 的校验提示。
5. 按 F12 开设备工具栏,用手机视图看,更接近真机效果。

---

小结

• 移动端 UI 用 Vant 组件库,组件以 van- 开头。
• 工程里 npm install vant + 自动按需引入(@vant/auto-import-resolver)。
• 高频组件:Button、Cell、NavBar、Tabbar、Form/Field;提示用函数式 showToast/showDialog。
• 用法靠查官方文档,先把几个核心组件用熟。

➡️ 下一章:3-3 触摸事件与下拉刷新/上拉加载