Skip to content
/ vant Public
forked from youzan/vant

Lightweight Mobile UI Components built on Vue

License

Notifications You must be signed in to change notification settings

amover87/vant

This branch is 7677 commits behind youzan/vant:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3b698e5 · Jan 21, 2019
Dec 3, 2018
Dec 18, 2018
Jan 21, 2019
Jan 21, 2019
Oct 24, 2018
Jan 20, 2019
Mar 3, 2017
Jun 7, 2018
Jan 5, 2019
Dec 16, 2018
Dec 28, 2018
Jun 13, 2018
May 27, 2018
Mar 16, 2018
Jan 10, 2019
Jan 10, 2019
Jan 7, 2019
Nov 3, 2018
Jan 21, 2019
Dec 14, 2018
Jan 12, 2019

Repository files navigation

logo

Lightweight Mobile UI Components built on Vue

npm version Build Status downloads JS Gzip Size CSS Gzip Size issue Coverage Status

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


Features

  • 50+ Reusable components
  • 80%+ 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://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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+.

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.

LICENSE

MIT

About

Lightweight Mobile UI Components built on Vue

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 54.5%
  • Vue 34.1%
  • CSS 11.3%
  • Shell 0.1%