vant

<p align="center"> <img alt="logo" src="https://yellow-cdn.veclightyear.com/835a84d5/e926bde7-b669-41c2-832f-7313e3fb5073.png" width="120" height="120" style="margin-bottom: 10px;"> </p> <h1 align="center">Vant</h1> <p align="center">一个轻量级、可定制的移动端 Vue UI 组件库。</p> <p align="center"> <img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm 版本" /> <img src="https://img.shields.io/codecov/c/github/youzan/vant/main.svg?style=flat-square&color=#4fc08d" alt="覆盖率" /> <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="下载量" /> </p> <p align="center"> <a href="https://vant-ui.github.io/vant">文档</a>   ·   <a href="https://vant.pro/vant/">文档（备用）</a>   ·   <a href="./README.zh-CN.md">中文介绍</a> </p>

特性

🚀 组件平均体积仅 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-weapp	微信小程序 UI
vant-demo	Vant 示例合集
vant-cli	UI 库脚手架
vant-icons	Vant 图标
vant-touch-emulator	在桌面端浏览器使用 Vant
vant-nuxt	Nuxt 的 Vant 模块

社区生态

项目	描述
3lang3/react-vant	基于Vant的React移动端UI组件
vant-aliapp	支付宝小程序UI
vant-theme	基于Vant UI构建的在线主题预览
@antmjs/vantui	基于Vant的移动端UI组件，支持Taro和React
vant-playground	Vant演练场
sfc-playground-vant	Vant演练场
vue3-h5-template	基于Vant的移动端项目模板
vue3-vant-mobile	基于Vant的移动端项目模板
vscode-common-intellisense	为Vant开发者提供更好的智能提示的VS Code扩展