Vant

一个轻量级、可定制的移动端 Vue UI 组件库。

文档   ·   文档（备用）   ·   中文介绍

特性

• 🚀 组件平均体积仅 1KB（min+gzip）
• 🚀 80+ 高质量组件
• 🚀 零第三方依赖
• 💪 90%+ 单元测试覆盖率
• 💪 使用 TypeScript 编写
• 📖 详尽的文档和示例
• 📖 提供 Sketch 和 Axure 设计资源
• 🍭 支持 Vue 2 和 Vue 3
• 🍭 支持 Nuxt 2 和 Nuxt 3，为 Nuxt 提供 Vant 模块
• 🍭 支持树摇
• 🍭 支持自定义主题
• 🍭 支持无障碍访问（持续改进中）
• 🍭 支持暗黑模式
• 🍭 支持服务端渲染
• 🌍 支持国际化，内置 30+ 种语言

安装

使用 npm 安装：

# 为 Vue 3 项目安装最新版 Vant
npm i vant

# 为 Vue 2 项目安装 Vant 2
npm i vant@latest-v2

使用 yarn、pnpm 或 bun：

# 使用 yarn
yarn add vant

# 使用 pnpm
pnpm add vant

# 使用 Bun
bun add vant

脚手架

推荐使用 Rsbuild 创建脚手架项目。

Rsbuild 是一个基于 Rspack 的构建工具，由 Vant 作者开发，具有一流的构建速度和开发体验，为 Vant 提供优先支持。

你可以使用以下命令创建 Rsbuild 项目：

npm create rsbuild@latest

请访问 Rsbuild 仓库 了解更多信息。

快速上手

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

更多信息请参见快速上手。

浏览器支持

Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。

Vant 3/4 支持现代浏览器和 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

官方生态

社区生态

链接

• 文档
• 文档（备用）
• 更新日志
• 讨论

预览

你可以扫描以下二维码访问演示：

核心团队

Vant和Vant Weapp的核心贡献者：

chenjiahan	cookfront	wangnaiyi	pangxie	rex-zsd	nemo-shen

Lindysen	JakeLaoyu	landluck	wjw-gavin	inottn	zhousg

所有贡献者

感谢以下朋友对Vant的贡献：

贡献指南

在提交拉取请求之前，请务必阅读贡献指南。

在 Web IDE 上开始

https://github.dev/youzan/vant

许可证

Vant 使用 MIT 许可证。