vant: A JavaScript repository from htmlk

Mobile UI Components built on Vue

Features

50+ Reusable components
90% Unit test coverage
Extensive documentation and demos
Support babel-plugin-import
Support Custom Theme
Support i18n
Support TS
Support SSR

Install

NPM

npm i vant -S

YARN

yarn add vant

CDN

<!-- import style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css" />

<!-- import script -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@1.6/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/button/style';

3. Import all components

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/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+.

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.

LICENSE

MIT

htmlk/vant