简介

轻量、可靠的移动端 Vue 组件库，MIT协议, 目前github star 数9k+

推荐理由

• 55+ 个组件
• 90% 单元测试覆盖率
• 完善的中英文文档和示例
• 支持按需引入
• 支持主题定制
• 支持国际化
• 支持 TS
• 支持 SSR

浏览器支持

现代浏览器以及 Android 4.0+, iOS 6+

本地开发

• 安装

# 通过 npm 安装
npm i vant -S
# 通过 yarn 安装
yarn add vant

• 快速上手
• 导入所有组件

import Vue from 'vue';
import { Button } from 'vant';
import 'vant/lib/index.css';
Vue.use(Button);

• 通过 CDN 引入

<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
<script>
var Vue = window.Vue;
var vant = window.vant;
// 注册组件
Vue.use(vant);
// 调用函数式组件
vant.Toast('提示');
</script>

• 自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
 "plugins": [
 ["import", {
 "libraryName": "vant",
 "libraryDirectory": "es",
 "style": true
 }]
 ]
}
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
 plugins: [
 ['import', {
 libraryName: 'vant',
 libraryDirectory: 'es',
 style: true
 }, 'vant']
 ]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

官方示例工程

Vant-demo.截图如下：