Please wait for the administrator to review and you will receive a system notification when the review is complete
轻量、可定制的移动端 Vue 组件库
🌈 文档网站(国内) · 文档网站(GitHub)
Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。
在现有项目中使用 Vant 时,可以通过 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 也支持按需引入、CDN 引入等方式,详细说明见 快速上手.
Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一致)。
由 Vant 官方团队维护的项目如下:
项目 | 描述 |
---|---|
vant-weapp | Vant 微信小程序版 |
vant-demo | Vant 官方示例合集 |
vant-cli | 开箱即用的组件库搭建工具 |
vant-icons | Vant 图标库 |
vant-touch-emulator | 在桌面端使用 Vant 的辅助库 |
vant-nuxt | 为 Nuxt 准备的模块 |
由社区维护的项目如下,欢迎补充:
项目 | 描述 |
---|---|
3lang3/react-vant | 参照 Vant 打造的 React 框架移动端组件库 |
vant-aliapp | Vant 支付宝小程序版 |
vant-theme | Vant 在线主题预览工具 |
@antmjs/vantui | 基于 Vant Weapp 开发的多端组件库,同时支持 Taro 和 React |
vant-playground | Vant Playground |
sfc-playground-vant | Vant Playground |
vue3-h5-template | 基于 Vant 的移动端项目模板 |
vue3-vant-mobile | 基于 Vant 的移动端项目模板 |
vscode-common-intellisense | VS Code 扩展,为 Vant 开发者提供更好的智能感知 |
可以手机扫码以下二维码访问手机端 demo:
以下是 Vant 和 Vant Weapp 的核心贡献者们:
chenjiahan | cookfront | wangnaiyi | pangxie | rex-zsd | nemo-shen |
Lindysen | JakeLaoyu | landluck | wjw-gavin | inottn | zhousg |
感谢以下小伙伴们为 Vant 发展做出的贡献:
修改代码请阅读我们的 贡献指南。
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR。
https://idegithub.com/youzan/vant
本项目基于 MIT 协议,请自由地享受和参与开源。