Vant

轻量、可定制的移动端 Vue 组件库，由有赞（Youzan）前端团队开源，国内移动端 Vue 生态首选组件库

基本信息

• 官网：https://youzan.github.io/vant/
• GitHub：https://github.com/youzan/vant
• License：MIT
• 最新版本：4.10.0（2026-06-28 发布）；npm latest 标签为 4.9.24（2026-03-26 发布）
• 主要维护者/公司：有赞前端团队（Youzan FE Team）
• 首次开源：2017 年
• npm 周下载量：约 10.7 万（2026 年 3 月）
• GitHub Stars：24.3k+
• npm 包名：vant（Vue 3）/ vant@latest-v2（Vue 2）/ @vant/weapp（微信小程序）
• 小程序版仓库：youzan/vant-weapp（⭐ 18.4k）
• Node.js 要求：>= 16
• 源码语言：TypeScript
• 组件数量：80+ 高质量组件
• 单组件体积：约 1KB（min+gzip）
• 单元测试覆盖率：90%+
• 第三方依赖：零

核心特性

1. 轻量高效：单组件体积约 1KB（min+gzip），80+ 组件零第三方依赖，对包体积极友好
2. 完整的 Vue 3 支持：Vant 4 基于 Vue 3 Composition API 全面重写，完美支持 <script setup> 语法与响应式系统
3. TypeScript 原生：全部使用 TypeScript 编写，提供完整类型定义和智能提示
4. Tree Shaking & 按需引入：基于 ES Modules 原生 Tree Shaking，支持 unplugin-vue-components 自动按需引入
5. 小程序支持：官方提供微信小程序版本 @vant/weapp，基于原生小程序开发，不依赖 Vue
6. 主题定制：内置 700+ CSS 变量，支持运行时动态换肤，提供 Sketch / Axure 设计资源
7. 深色模式：通过 ConfigProvider 组件一键切换深色主题，基于 CSS 变量实现
8. 国际化：内置 30+ 语言包，开箱即用支持多语言切换
9. 无障碍访问（A11y）：组件持续改进 WAI-ARIA 规范支持
10. 服务器端渲染（SSR）：全面支持 SSR，兼容 Nuxt 2 和 Nuxt 3
11. 浏览器兼容性：Chrome >= 51，iOS >= 10.0（Vant 4）；Android >= 4.0，iOS >= 8.0（Vant 2）

适用场景

1. 移动端 H5 应用：核心定位，适合电商、资讯、社交、工具类移动端 Web 应用
2. 微信小程序：通过 @vant/weapp 原生小程序组件库，覆盖微信生态
3. 跨端应用（uni-app / Taro）：配合 uni-app 或 Taro 框架实现多端统一开发
4. 企业级移动办公应用：有赞自身业务驱动，经过大量电商、零售场景验证
5. PWA（渐进式 Web 应用）：配合 Vite + Vue 3 构建高性能移动 Web 应用
6. 快速原型开发：组件丰富、文档完善，适合快速搭建移动端 MVP

技术亮点

有赞技术积累

Vant 是有赞前端团队于 2017 年开源的移动端组件库，历经有赞所有核心业务（商城、零售、美业等）的实战打磨。对内承载有赞全部核心业务，对外服务十多万开发者，是国内移动端 Vue 生态中最成熟、使用最广泛的组件库之一。

极致轻量与按需引入

// Vant 4 按需引入（推荐）
import { Button, Cell, Toast } from 'vant'
 
// 配合 unplugin-vue-components 实现自动按需引入
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
 
export default {
  plugins: [
    Components({ resolvers: [VantResolver()] })
  ]
}

每个组件独立打包，未使用的组件不会被引入，配合 Tree Shaking 可将打包体积降至最低。

主题定制体系

Vant 4 基于 CSS 变量构建主题系统，支持运行时动态切换，无需重新编译：

<template>
  <!-- 深色模式一键切换 -->
  <van-config-provider theme="dark">
    <van-button type="primary">深色模式按钮</van-button>
  </van-config-provider>
 
  <!-- 自定义主题变量 -->
  <van-config-provider :theme-vars="themeVars">
    <van-button type="primary">自定义主题按钮</van-button>
  </van-config-provider>
</template>
 
<script setup>
const themeVars = {
  buttonPrimaryBackgroundColor: '#ff976a',
  buttonPrimaryBorderColor: '#ff976a'
}
</script>

内置 700+ 主题变量，覆盖颜色、字号、间距、圆角等维度，支持全局或组件级别覆盖。

国际化支持

import { Locale } from 'vant'
import zhCN from 'vant/es/locale/lang/zh-CN'
import enUS from 'vant/es/locale/lang/en-US'
 
// 切换语言
Locale.use('en-US', enUS)

内置 30+ 语言包，支持自定义扩展，适合面向全球用户的移动应用。

小程序生态

Vant Weapp（@vant/weapp）是独立的微信小程序版本，基于原生小程序开发，与 Vue 版视觉规范一致：

• 18.4k GitHub Stars，55 个版本发布
• 最新版本 v1.11.7（2024-10-13）
• 支持微信、抖音、支付宝等多平台小程序
• 配合 Taro 框架可实现跨端统一开发

# 安装小程序版
npm i @vant/weapp -D --production

性能优化

• 零依赖：不引入任何第三方运行时依赖，减小包体
• Tree Shaking 原生支持：基于 ES Modules，构建工具自动剔除未使用代码
• 响应式精细化：组件内部使用 Vue 3 shallowRef、computed 等精细控制响应式粒度
• 虚拟滚动：部分列表组件支持虚拟化渲染，优化大数据量场景
• 懒加载：支持图片、Picker 等组件的懒加载策略

生态集成

Nuxt 3

官方提供 vant-nuxt 模块，一键集成：

pnpm add vant vant-nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vant-nuxt']
})

支持自动按需引入组件、样式，无需手动配置。

Vite

通过 @vant/auto-import-resolver 实现自动按需引入：

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
 
export default {
  plugins: [
    Components({ resolvers: [VantResolver()] })
  ]
}

uni-app

uni-app 中引入 Vant Weapp 作为小程序组件：

// pages.json
{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

配合 wxcomponents 目录在 uni-app Vue 3 中引入 Vant Weapp 原生组件。

Taro 框架

Taro 支持使用 Vant Weapp 进行多端开发，社区提供 Taroify（Vant 的 Taro 版本）：

npm i @taroify/core

Taroify 与 Vant 基于相同的视觉规范，提供一致的 API 接口。

官方生态工具

社区与第三方扩展

学习资源

官方文档

• 快速开始 — 安装、按需引入、国际化配置
• 组件总览 — 全部组件分类预览与演示
• 更新日志 — 版本变更记录
• 主题定制 — CSS 变量主题方案
• Vant Weapp 文档 — 小程序版官方文档
• Vant Demo（Gitee） — Vue 3 + Vant 4 + Vite 示例项目

有赞技术博客

• 有赞技术团队 Vant 专栏 — 官方技术文章、版本发布说明
• 有赞技术团队知乎 — 技术分享与讨论
• Vant 3.0 正式发布：全面拥抱 Vue 3 — Vant 3 发布背后的技术决策
• Vant 1.0 正式发布 — Vant 里程碑历史

社区资源

• GitHub Discussions — 官方讨论区
• GitHub Issues — Bug 反馈与功能讨论
• Gitee 镜像 — 国内快速下载与镜像
• 掘金社区 — 大量中文实践文章，搜索 "Vant"
• CSDN - Vant 移动端组件库分享 — 2024 年入门分享

跨端教程

• Taro 使用 Vant Weapp — Taro 框架集成指南
• 腾讯云 - uniapp 中使用 Vant 保姆级教程 — uni-app 集成指南
• 抖音小程序中使用 vant-weapp — 抖音生态集成

2026 年现状

版本与发布节奏

• 最新版本：4.10.0（2026-06-28），累计发布 285 个版本，10,439 次提交
• 维护状态：活跃维护，持续修复问题和优化组件
• Vue 3 全面支持：Vant 4 是当前稳定主线，全面拥抱 Vue 3 Composition API
• Vue 2 维护模式：Vant 2（vant@latest-v2）进入维护阶段，仅修复严重 Bug

近期版本特性（2025-2026）

• 4.10.0：依赖升级（transliteration ^2.6、less ^4.5、pnpm v10、markdown-it v14）
• 4.9.x：持续修复安全漏洞、优化组件交互细节
• 安全事件：2024 年 12 月曾发生团队成员 token 泄露事件（v4.9.11 等版本受影响），已及时处理并公开说明（Discussion #13273）

小程序生态

• vant-weapp：18.4k Stars，最新版 v1.11.7（2024-10-13），仍在维护中
• 多平台支持：微信、抖音、支付宝小程序均有对应版本或社区方案
• 跨端整合：Taro（Taroify）和 uni-app 生态持续完善，Vant 在多端开发中扮演重要角色

社区活跃度

• GitHub Stars 24.3k+，Forks 9.4k，在国内移动端 Vue 组件库中处于绝对领先地位
• npm 周下载量约 10.7 万，移动端 H5 场景下使用率极高
• 有赞商业场景背书，十多万开发者在用，社区生态成熟

与同类库对比

发展趋势

• 移动端 H5 仍是主力：在国内移动端 Vue 生态中保持主导地位，短期内无被替代的风险
• 小程序生态持续扩展：vant-weapp 维护稳定，Taro / uni-app 生态整合日趋成熟
• 组件 API 趋于稳定：Vant 4 发布后 API 进入稳定期，Breaking Changes 较少
• 深色模式和无障碍持续改进：跟随 Web 标准和用户需求持续优化
• Vue 3 全面拥抱：Vant 4 是当前主线，Vue 2 版本逐步退出维护
• AI 辅助开发：配合 Vant 的 AI 代码生成工具和企业级解决方案逐步涌现