vant README

The project's README from github.com/youzan/vant. As one markdown file: README.md.

logo

Vant

A lightweight, customizable Vue UI library for mobile web apps.

npm version Coverage Status downloads

Documentation   ·   Documentation (backup)   ·   中文介绍   ·   日本語


Features

Install

Using npm to install:

# install latest Vant for Vue 3 project
npm i vant

# install Vant 2 for Vue 2 project
npm i vant@latest-v2

Using yarn, pnpm, or bun:

# with yarn
yarn add vant

# with pnpm
pnpm add vant

# with Bun
bun add vant

Scaffold

It is recommended to use Rsbuild to create a scaffold project.

Rsbuild is a build tool based on Rspack, developed by the author of Vant, with first-class build speed and development experience, providing first-priority support for Vant.

You can create a Rsbuild project with the following command:

npm create rsbuild@latest

Please visit the Rsbuild repository for more information.

Quickstart

import { createApp } from 'vue';
// 1. Import the components you need
import { Button } from 'vant';
// 2. Import the components style
import 'vant/lib/index.css';

const app = createApp();

// 3. Register the components you need
app.use(Button);

See more in Quickstart.

Browser Support

Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.

Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).

Official Ecosystem

Project Description
vant-weapp WeChat MiniProgram UI
vant-demo Collection of Vant demos
vant-cli Scaffold for UI library
vant-icons Vant icons
vant-touch-emulator Using vant in desktop browsers
vant-nuxt Vant module for Nuxt

Community Ecosystem

Project Description
3lang3/react-vant React mobile UI Components based on Vant
vant-theme Online theme preview built on Vant UI
@antmjs/vantui Mobile UI Components based on Vant, supporting Taro and React
Taroify Taroify is the Taro version of Vant
vant-playground Vant Playground
sfc-playground-vant Vant Playground
vue3-h5-template Mobile project template based on Vant
vue3-vant-mobile Mobile project template based on Vant, out of the box
vscode-common-intellisense A VS Code extension that provides better intellisense to Vant developers
nuxt-vant-mobile Nuxt ⁴ project template based on Vant, out of the box
mobvue A well-crafted mobile web app template

Preview

You can scan the following QR code to access the demo:

Core Team

Core contributors of Vant and Vant Weapp:

chenjiahan cookfront w91 pangxie1991 rex-zsd nemo-shen
chenjiahan cookfront wangnaiyi pangxie rex-zsd nemo-shen
Lindysen JakeLaoyu landluck wjw-gavin inottn zhousg
Lindysen JakeLaoyu landluck wjw-gavin inottn zhousg

Contribution Guide

Please make sure to read the Contributing Guide before making a pull request.

Start On Web IDE

https://github.dev/youzan/vant

LICENSE

Vant is MIT licensed.

vant (youzan/vant)

Searching Database…

24.4K ·GitHub
这是什么?Vant 是一个轻量、可定制的移动端网页 Vue UI 组件库:包含 80 多个高质量组件,每个组件(min+gzip 后)平均只有 1KB 左右,由有赞(Youzan)维护,采用 MIT 许可证。
它是用来开发整个应用的框架,还是一个组件库?它是一个组件库:把它添加到你自己的 Vue 项目里,按需引入需要的组件——Tree Shaking 能让没用到的那部分不进入你的打包产物。
怎么把它加到项目里?用你常用的包管理器安装就行——npm、yarn、pnpm 和 bun 都可以。如果是新项目,README 推荐用 Rsbuild 搭建,这是 Vant 作者基于 Rspack 开发的构建工具,对 Vant 提供第一优先级的支持。
它支持 Vue 3,还是只支持旧版 Vue?都支持:Vant 同时支持 Vue 2 和 Vue 3,还可以通过专门的 Vant 模块在 Nuxt 2/3 中使用。这个库本身没有任何第三方依赖。
老手机上能跑吗?桌面浏览器呢?Vant 3/4 面向现代浏览器——要求 Chrome >= 51 和 iOS >= 10,与 Vue 3 的基准相同(Vant 2 可以追溯到 Android 4.0 和 iOS 8)。组件以触屏操作为先,所以在桌面浏览器上需要额外引入 vant-touch-emulator 包。
用它开发的网页应用运行在哪里?在浏览器里运行——任何现代手机浏览器都可以,也可以通过触屏模拟器在桌面浏览器上使用;在网页项目中通过 npm 引入。
它采用什么许可证?MIT——宽松许可,可以免费用于商业产品。
除了组件本身,还附带哪些东西?支持自定义主题和深色模式、SSR 服务端渲染、无障碍访问(仍在完善中),以及内置 30 多种语言的国际化(i18n)。如果你在写代码前习惯先画原型,还有 Sketch 和 Axure 的设计资源可用。
它会给我的移动端页面增加多少体积?每个组件(min+gzip 后)平均约 1KB——轻量是这类库的招牌特点,代码库的单元测试覆盖率超过 90%。
我用的是 React——这里有适合我的吗?官方库只支持 Vue,但生态里列出了社区维护的 React 版本:react-vant、@antmjs/vantui(支持 Taro)和 Taroify。此外还有 vant-weapp,一个微信小程序版本。
在接入我的应用之前,可以先试用这些组件吗?可以——生态里有一个 Vant Playground,可以直接在浏览器里做实验;README 还附了一个扫码就能打开的演示;另外还有一个 VS Code 扩展,写代码时能提供 Vant 的智能提示。
Creator
youzan
Size
122.3 MB
Stars
24.4K
Age
9y
Commits · 90 Days