Lightweight Mobile UI Components built on Vue
Features
- 50+ Reusable components
- 90%+ Unit test coverage
- Extensive documentation and demos
- Support babel-plugin-import
- Support TypeScript
- Support SSR
Install
NPM
npm i vant -S
YARN
yarn add vant
CDN
<!-- import style -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
<!-- import script -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
Quickstart
1. Use babel-plugin-import (Recommended)
# Install babel-plugin-import
npm i babel-plugin-import -D
// set babel config in .babelrc or babel-loader
// Note: Don't set libraryDirectory if you are using webpack 1.
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
Then you can import components from vant, equivalent to import manually below.
import { Button } from 'vant';
If you are using TypeScript，please use ts-import-plugin instead
2. Manually import
import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
3. Import all components
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
If you configured babel-plugin-import, you won't be allowed to import all components.
See more in Quickstart.
Contribution
Please make sure to read the Contributing Guide before making a pull request.
Browser Support
Modern browsers and Android 4.0+, iOS 6+.
Links
Preview
You can scan the following QR code to access the demo：
Wechat Group
Scan the qrcode to join our wechat discussion group, please note that you want to join Vant discussion group.
