[Doc] update quickstart.md

This commit is contained in:
陈嘉涵
2019-05-16 11:09:09 +08:00
parent 77b0f8e6a6
commit d6f5cd3a81
5 changed files with 58 additions and 66 deletions

View File

@@ -10,34 +10,26 @@ npm install -g @vue/cli
# Create a project
vue create hello-world
```
After the creation is complete, you can open the GUI by command.
```bash
# Open GUI
vue ui
```
In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies.
<img width="100%" style="border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1);" src="https://img.yzcdn.cn/vant/vue-cli-demo-201809030812.png" >
<img width="100%" style="box-shadow: 0 1px 1px rgba(0, 0, 0, .1); border-radius: 3px;" src="https://img.yzcdn.cn/vant/vue-cli-demo-201809030812.png" >
In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies.
### Install
#### NPM
```shell
```bash
# npm
npm i vant -S
```
#### YARN
```shell
# yarn
yarn add vant
```
#### CDN
### CDN
```html
<!-- import style -->
@@ -48,12 +40,14 @@ yarn add vant
<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
```
### Usage
## Usage
#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
### 1. Import on demand
Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand
```bash
# Install babel-plugin-import
# Install plugin
npm i babel-plugin-import -D
```
@@ -82,22 +76,21 @@ module.exports = {
};
```
Then you can import components from vant, equivalent to import manually below.
```js
// Then you can import components from vant
import { Button } from 'vant';
```
> If you are using TypeScriptplease use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead
#### 2. Manually import
### 2. Manually import
```js
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
```
#### 3. Import all components
### 3. Import all components
```js
import Vue from 'vue';
@@ -109,6 +102,7 @@ Vue.use(Vant);
> If you configured babel-plugin-import, you won't be allowed to import all components.
## Other
### Rem units