docs: update install guide

This commit is contained in:
陈嘉涵 2020-01-16 20:58:32 +08:00
parent d57705c67e
commit 80568816e3
35 changed files with 82 additions and 59 deletions

View File

@ -17,7 +17,7 @@ Vant Cli 是一个 Vue 组件库构建工具,通过 Vant Cli 可以快速搭
npx create-vant-cli-app
```
### 安装
### 手动安装
```shell
# 通过 npm 安装

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Cell, CellGroup } from 'vant';
Vue.use(Cell).use(CellGroup);
Vue.use(Cell);
Vue.use(CellGroup);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Cell, CellGroup } from 'vant';
Vue.use(Cell).use(CellGroup);
Vue.use(Cell);
Vue.use(CellGroup);
```
## 代码演示

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox).use(CheckboxGroup);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox).use(CheckboxGroup);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
```
## 代码演示

View File

@ -8,9 +8,10 @@ Quickly and easily create layouts with `van-row` and `van-col`
``` javascript
import Vue from 'vue';
import { Row, Col } from 'vant';
import { Col, Row } from 'vant';
Vue.use(Row).use(Col);
Vue.use(Col);
Vue.use(Row);
```
## Usage

View File

@ -8,9 +8,10 @@ Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
``` javascript
import Vue from 'vue';
import { Row, Col } from 'vant';
import { Col, Row } from 'vant';
Vue.use(Row).use(Col);
Vue.use(Col);
Vue.use(Row);
```
## 代码演示

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';
Vue.use(Collapse).use(CollapseItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';
Vue.use(Collapse).use(CollapseItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
```
## 代码演示

View File

@ -6,10 +6,9 @@
import Vue from 'vue';
import { ContactCard, ContactList, ContactEdit } from 'vant';
Vue
.use(ContactCard)
.use(ContactList)
.use(ContactEdit);
Vue.use(ContactCard);
Vue.use(ContactList);
Vue.use(ContactEdit);
```
## Usage

View File

@ -10,10 +10,9 @@
import Vue from 'vue';
import { ContactCard, ContactList, ContactEdit } from 'vant';
Vue
.use(ContactCard)
.use(ContactList)
.use(ContactEdit);
Vue.use(ContactCard);
Vue.use(ContactList);
Vue.use(ContactEdit);
```
## 代码演示

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { CouponCell, CouponList } from 'vant';
Vue.use(CouponCell).use(CouponList);
Vue.use(CouponCell);
Vue.use(CouponList);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { CouponCell, CouponList } from 'vant';
Vue.use(CouponCell).use(CouponList);
Vue.use(CouponCell);
Vue.use(CouponList);
```
## 代码演示

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu).use(DropdownItem);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu).use(DropdownItem);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
```
## 代码演示

View File

@ -4,16 +4,11 @@
``` javascript
import Vue from 'vue';
import {
GoodsAction,
GoodsActionButton,
GoodsActionIcon
} from 'vant';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
Vue
.use(GoodsAction)
.use(GoodsActionButton)
.use(GoodsActionIcon);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
```
## Usage

View File

@ -4,16 +4,11 @@
``` javascript
import Vue from 'vue';
import {
GoodsAction,
GoodsActionIcon,
GoodsActionButton
} from 'vant';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
Vue
.use(GoodsAction)
.use(GoodsActionIcon)
.use(GoodsActionButton);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
```
## 代码演示

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
Vue.use(Grid).use(GridItem);
Vue.use(Grid);
Vue.use(GridItem);
```
## Usage

View File

@ -10,7 +10,8 @@
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
Vue.use(Grid).use(GridItem);
Vue.use(Grid);
Vue.use(GridItem);
```
## 代码演示

View File

@ -7,6 +7,7 @@ import Vue from 'vue';
import { IndexBar } from 'vant';
Vue.use(IndexBar);
Vue.use(IndexAnchor);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { IndexBar, IndexAnchor } from 'vant';
Vue.use(IndexBar).use(IndexAnchor);
Vue.use(IndexBar);
Vue.use(IndexAnchor);
```
## 代码演示

View File

@ -6,7 +6,12 @@
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload, options);
Vue.use(Lazyload);
// with options
Vue.use(Lazyload, {
lazyComponent: true
});
```
## Usage

View File

@ -8,8 +8,12 @@
import Vue from 'vue';
import { Lazyload } from 'vant';
// options 为可选参数,无则不传
Vue.use(Lazyload, options);
Vue.use(Lazyload);
// 注册时可以配置额外的选项
Vue.use(Lazyload, {
lazyComponent: true
});
```
## 代码演示

View File

@ -10,7 +10,8 @@ The PasswordInput component is usually used with [NumberKeyboard](#/en-US/number
import Vue from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';
Vue.use(PasswordInput).use(NumberKeyboard);
Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
```
## Usage

View File

@ -10,7 +10,8 @@
import Vue from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';
Vue.use(PasswordInput).use(NumberKeyboard);
Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
```
## 代码演示

View File

@ -6,8 +6,8 @@
import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(RadioGroup);
```
## Usage

View File

@ -6,8 +6,8 @@
import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(RadioGroup);
```
## 代码演示

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Step, Steps } from 'vant';
Vue.use(Step).use(Steps);
Vue.use(Step);
Vue.use(Steps);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Step, Steps } from 'vant';
Vue.use(Step).use(Steps);
Vue.use(Step);
Vue.use(Steps);
```
## 代码演示

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe).use(SwipeItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe).use(SwipeItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
```
## 代码演示

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
Vue.use(Tab).use(Tabs);
Vue.use(Tab);
Vue.use(Tabs);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
Vue.use(Tab).use(Tabs);
Vue.use(Tab);
Vue.use(Tabs);
```
## 代码演示

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar).use(TabbarItem);
Vue.use(Tabbar);
Vue.use(TabbarItem);
```
## Usage

View File

@ -6,7 +6,8 @@
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar).use(TabbarItem);
Vue.use(Tabbar);
Vue.use(TabbarItem);
```
## 代码演示