简介
轻量、可靠的移动端 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 引入
var Vue = window.Vue;
var vant = window.vant;
// 注册元件
Vue.use(vant);
// 呼叫函式式元件
vant.Toast(\'提示\');
自动按需引入元件 (推荐)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.截图如下：
