zhangshunwei / vant Goto Github PK

🇨🇳 访问中文版   🚀 Vant Weapp - 小程序版

• 50+ Reusable components
• 80%+ Unit test coverage
• Extensive documentation and demos
• Support babel-plugin-import
• Support TypeScript
• Support SSR

npm i vant -S

yarn add vant

<!-- 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>

# 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

import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';

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.

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

Modern browsers and Android 4.0+, iOS 6+.

• Documentation
• Changelog
• Vant Demo
• Vant Weapp: Weapp UI
• Zent: PC UI base on React

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

Scan the qrcode to join our wechat discussion group, please note that you want to join Vant discussion group.

MIT