[Doc] update README.md and quickstart

This commit is contained in:
陈嘉涵
2019-05-28 10:00:02 +08:00
parent 46a051cb05
commit a4da1c7673
4 changed files with 49 additions and 146 deletions
+2 -54
View File
@@ -43,67 +43,16 @@ npm i vant -S
npm i vant@beta -S
```
## CDN
```html
<!-- import style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/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@beta/lib/vant.min.js"></script>
```
## Quickstart
#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
```bash
# Install babel-plugin-import
npm i babel-plugin-import -D
```
```js
// 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.
```js
import { Button } from 'vant';
```
> If you are using TypeScriptplease use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead
#### 2. Manually import
```js
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
```
#### 3. Import all components
```js
import Vue from 'vue';
import Vant from 'vant';
import { Button } from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.use(Button);
```
> If you configured babel-plugin-import, you won't be allowed to import all components.
See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).
## Contribution
@@ -122,7 +71,6 @@ Modern browsers and Android 4.0+, iOS 6+.
* [Vant Weapp: Weapp UI](https://github.com/youzan/vant-weapp)
* [Zent: PC UI base on React](https://youzan.github.io/zent)
## Preview
You can scan the following QR code to access the demo