mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-25 07:49:15 +08:00
docs: update install guide
This commit is contained in:
parent
d57705c67e
commit
80568816e3
@ -17,7 +17,7 @@ Vant Cli 是一个 Vue 组件库构建工具,通过 Vant Cli 可以快速搭
|
||||
npx create-vant-cli-app
|
||||
```
|
||||
|
||||
### 安装
|
||||
### 手动安装
|
||||
|
||||
```shell
|
||||
# 通过 npm 安装
|
||||
|
@ -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
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { Cell, CellGroup } from 'vant';
|
||||
|
||||
Vue.use(Cell).use(CellGroup);
|
||||
Vue.use(Cell);
|
||||
Vue.use(CellGroup);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
|
||||
Vue.use(Checkbox).use(CheckboxGroup);
|
||||
Vue.use(Checkbox);
|
||||
Vue.use(CheckboxGroup);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { Collapse, CollapseItem } from 'vant';
|
||||
|
||||
Vue.use(Collapse).use(CollapseItem);
|
||||
Vue.use(Collapse);
|
||||
Vue.use(CollapseItem);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { CouponCell, CouponList } from 'vant';
|
||||
|
||||
Vue.use(CouponCell).use(CouponList);
|
||||
Vue.use(CouponCell);
|
||||
Vue.use(CouponList);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { DropdownMenu, DropdownItem } from 'vant';
|
||||
|
||||
Vue.use(DropdownMenu).use(DropdownItem);
|
||||
Vue.use(DropdownMenu);
|
||||
Vue.use(DropdownItem);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -10,7 +10,8 @@
|
||||
import Vue from 'vue';
|
||||
import { Grid, GridItem } from 'vant';
|
||||
|
||||
Vue.use(Grid).use(GridItem);
|
||||
Vue.use(Grid);
|
||||
Vue.use(GridItem);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -7,6 +7,7 @@ import Vue from 'vue';
|
||||
import { IndexBar } from 'vant';
|
||||
|
||||
Vue.use(IndexBar);
|
||||
Vue.use(IndexAnchor);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { IndexBar, IndexAnchor } from 'vant';
|
||||
|
||||
Vue.use(IndexBar).use(IndexAnchor);
|
||||
Vue.use(IndexBar);
|
||||
Vue.use(IndexAnchor);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
});
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -10,7 +10,8 @@
|
||||
import Vue from 'vue';
|
||||
import { PasswordInput, NumberKeyboard } from 'vant';
|
||||
|
||||
Vue.use(PasswordInput).use(NumberKeyboard);
|
||||
Vue.use(PasswordInput);
|
||||
Vue.use(NumberKeyboard);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -6,8 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { RadioGroup, Radio } from 'vant';
|
||||
|
||||
Vue.use(RadioGroup);
|
||||
Vue.use(Radio);
|
||||
Vue.use(RadioGroup);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
@ -6,8 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { RadioGroup, Radio } from 'vant';
|
||||
|
||||
Vue.use(RadioGroup);
|
||||
Vue.use(Radio);
|
||||
Vue.use(RadioGroup);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { Step, Steps } from 'vant';
|
||||
|
||||
Vue.use(Step).use(Steps);
|
||||
Vue.use(Step);
|
||||
Vue.use(Steps);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { Swipe, SwipeItem } from 'vant';
|
||||
|
||||
Vue.use(Swipe).use(SwipeItem);
|
||||
Vue.use(Swipe);
|
||||
Vue.use(SwipeItem);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { Tab, Tabs } from 'vant';
|
||||
|
||||
Vue.use(Tab).use(Tabs);
|
||||
Vue.use(Tab);
|
||||
Vue.use(Tabs);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -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
|
||||
|
@ -6,7 +6,8 @@
|
||||
import Vue from 'vue';
|
||||
import { Tabbar, TabbarItem } from 'vant';
|
||||
|
||||
Vue.use(Tabbar).use(TabbarItem);
|
||||
Vue.use(Tabbar);
|
||||
Vue.use(TabbarItem);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
Loading…
x
Reference in New Issue
Block a user