diff --git a/src/action-bar/README.md b/src/action-bar/README.md
index 38fd7db4b..b5c78257f 100644
--- a/src/action-bar/README.md
+++ b/src/action-bar/README.md
@@ -3,12 +3,13 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
-Vue.use(ActionBar);
-Vue.use(ActionBarButton);
-Vue.use(ActionBarIcon);
+const app = createApp();
+app.use(ActionBar);
+app.use(ActionBarIcon);
+app.use(ActionBarButton);
```
## Usage
diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md
index f7cb4b26b..2296cce0d 100644
--- a/src/action-bar/README.zh-CN.md
+++ b/src/action-bar/README.zh-CN.md
@@ -3,12 +3,13 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
-Vue.use(ActionBar);
-Vue.use(ActionBarButton);
-Vue.use(ActionBarIcon);
+const app = createApp();
+app.use(ActionBar);
+app.use(ActionBarIcon);
+app.use(ActionBarButton);
```
## 代码演示
diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index 7538e9db0..ee5ffe589 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ActionSheet } from 'vant';
-Vue.use(ActionSheet);
+const app = createApp();
+app.use(ActionSheet);
```
## Usage
diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md
index 313ce0257..3cd9c5ffc 100644
--- a/src/action-sheet/README.zh-CN.md
+++ b/src/action-sheet/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ActionSheet } from 'vant';
-Vue.use(ActionSheet);
+const app = createApp();
+app.use(ActionSheet);
```
## 代码演示
diff --git a/src/address-edit/README.md b/src/address-edit/README.md
index f92f8122a..c05a31cb9 100644
--- a/src/address-edit/README.md
+++ b/src/address-edit/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { AddressEdit } from 'vant';
-Vue.use(AddressEdit);
+const app = createApp();
+app.use(AddressEdit);
```
## Usage
diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md
index a0d7fe29b..3b9a78ab3 100644
--- a/src/address-edit/README.zh-CN.md
+++ b/src/address-edit/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { AddressEdit } from 'vant';
-Vue.use(AddressEdit);
+const app = createApp();
+app.use(AddressEdit);
```
## 代码演示
diff --git a/src/address-list/README.md b/src/address-list/README.md
index 298a50f94..a60b71177 100644
--- a/src/address-list/README.md
+++ b/src/address-list/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { AddressList } from 'vant';
-Vue.use(AddressList);
+const app = createApp();
+app.use(AddressList);
```
## Usage
diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md
index c4e148461..0a60f2a81 100644
--- a/src/address-list/README.zh-CN.md
+++ b/src/address-list/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { AddressList } from 'vant';
-Vue.use(AddressList);
+const app = createApp();
+app.use(AddressList);
```
## 代码演示
diff --git a/src/area/README.md b/src/area/README.md
index f8494fa0b..7a5749251 100644
--- a/src/area/README.md
+++ b/src/area/README.md
@@ -7,10 +7,11 @@ The Picker component is usually used with [Popup](#/en-US/popup) Component.
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Area } from 'vant';
-Vue.use(Area);
+const app = createApp();
+app.use(Area);
```
## Usage
diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md
index 5e2691ffe..0af6d36c9 100644
--- a/src/area/README.zh-CN.md
+++ b/src/area/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Area } from 'vant';
-Vue.use(Area);
+const app = createApp();
+app.use(Area);
```
## 代码演示
diff --git a/src/button/README.md b/src/button/README.md
index b79d44c9b..a3333db12 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Button } from 'vant';
-Vue.use(Button);
+const app = createApp();
+app.use(Button);
```
## Usage
diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md
index 6d741ac99..d8958cd07 100644
--- a/src/button/README.zh-CN.md
+++ b/src/button/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Button } from 'vant';
-Vue.use(Button);
+const app = createApp();
+app.use(Button);
```
## 代码演示
diff --git a/src/calendar/README.md b/src/calendar/README.md
index 8184de2f4..d83201e57 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -7,10 +7,11 @@ Calendar component for selecting dates or date ranges.
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Calendar } from 'vant';
-Vue.use(Calendar);
+const app = createApp();
+app.use(Calendar);
```
## Usage
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index adfbca1fe..ee99ff138 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Calendar } from 'vant';
-Vue.use(Calendar);
+const app = createApp();
+app.use(Calendar);
```
## 代码演示
diff --git a/src/card/README.md b/src/card/README.md
index 952af913a..6e0868c94 100644
--- a/src/card/README.md
+++ b/src/card/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Card } from 'vant';
-Vue.use(Card);
+const app = createApp();
+app.use(Card);
```
## Usage
diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md
index 91d51d029..f142f61a2 100644
--- a/src/card/README.zh-CN.md
+++ b/src/card/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Card } from 'vant';
-Vue.use(Card);
+const app = createApp();
+app.use(Card);
```
## 代码演示
diff --git a/src/cell/README.md b/src/cell/README.md
index feca7df32..ff55eb26c 100644
--- a/src/cell/README.md
+++ b/src/cell/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Cell, CellGroup } from 'vant';
-Vue.use(Cell);
-Vue.use(CellGroup);
+const app = createApp();
+app.use(Cell);
+app.use(CellGroup);
```
## Usage
diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md
index 86394eec0..0b7a2a8f2 100644
--- a/src/cell/README.zh-CN.md
+++ b/src/cell/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Cell, CellGroup } from 'vant';
-Vue.use(Cell);
-Vue.use(CellGroup);
+const app = createApp();
+app.use(Cell);
+app.use(CellGroup);
```
## 代码演示
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index a5219aec7..01196a838 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
-Vue.use(Checkbox);
-Vue.use(CheckboxGroup);
+const app = createApp();
+app.use(Checkbox);
+app.use(CheckboxGroup);
```
## Usage
diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md
index b1ee0c89d..4a0501c50 100644
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
-Vue.use(Checkbox);
-Vue.use(CheckboxGroup);
+const app = createApp();
+app.use(Checkbox);
+app.use(CheckboxGroup);
```
## 代码演示
diff --git a/src/circle/README.md b/src/circle/README.md
index 6b2ae7a1d..e849d88f6 100644
--- a/src/circle/README.md
+++ b/src/circle/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Circle } from 'vant';
-Vue.use(Circle);
+const app = createApp();
+app.use(Circle);
```
## Usage
@@ -14,7 +15,12 @@ Vue.use(Circle);
### Basic Usage
```html
-
+
```
```js
diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md
index dc12f5aa5..552f84133 100644
--- a/src/circle/README.zh-CN.md
+++ b/src/circle/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Circle } from 'vant';
-Vue.use(Circle);
+const app = createApp();
+app.use(Circle);
```
## 代码演示
diff --git a/src/col/README.md b/src/col/README.md
index d6be11217..e1256450c 100644
--- a/src/col/README.md
+++ b/src/col/README.md
@@ -7,11 +7,12 @@ Quickly and easily create layouts with `van-row` and `van-col`
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Col, Row } from 'vant';
-Vue.use(Col);
-Vue.use(Row);
+const app = createApp();
+app.use(Col);
+app.use(Row);
```
## Usage
diff --git a/src/col/README.zh-CN.md b/src/col/README.zh-CN.md
index 7eb405993..17972322a 100644
--- a/src/col/README.zh-CN.md
+++ b/src/col/README.zh-CN.md
@@ -7,11 +7,12 @@ Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Col, Row } from 'vant';
-Vue.use(Col);
-Vue.use(Row);
+const app = createApp();
+app.use(Col);
+app.use(Row);
```
## 代码演示
diff --git a/src/collapse/README.md b/src/collapse/README.md
index 88d681e39..c8c4373b1 100644
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Collapse, CollapseItem } from 'vant';
-Vue.use(Collapse);
-Vue.use(CollapseItem);
+const app = createApp();
+app.use(Collapse);
+app.use(CollapseItem);
```
## Usage
diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md
index 7931c22c8..51e524a8a 100644
--- a/src/collapse/README.zh-CN.md
+++ b/src/collapse/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Collapse, CollapseItem } from 'vant';
-Vue.use(Collapse);
-Vue.use(CollapseItem);
+const app = createApp();
+app.use(Collapse);
+app.use(CollapseItem);
```
## 代码演示
diff --git a/src/contact-card/README.md b/src/contact-card/README.md
index 1b2b91dff..88f4a095b 100644
--- a/src/contact-card/README.md
+++ b/src/contact-card/README.md
@@ -3,12 +3,13 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ContactCard, ContactList, ContactEdit } from 'vant';
-Vue.use(ContactCard);
-Vue.use(ContactList);
-Vue.use(ContactEdit);
+const app = createApp();
+app.use(ContactCard);
+app.use(ContactList);
+app.use(ContactEdit);
```
## Usage
diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md
index ed9e441af..e3ff498ab 100644
--- a/src/contact-card/README.zh-CN.md
+++ b/src/contact-card/README.zh-CN.md
@@ -7,12 +7,13 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ContactCard, ContactList, ContactEdit } from 'vant';
-Vue.use(ContactCard);
-Vue.use(ContactList);
-Vue.use(ContactEdit);
+const app = createApp();
+app.use(ContactCard);
+app.use(ContactList);
+app.use(ContactEdit);
```
## 代码演示
diff --git a/src/count-down/README.md b/src/count-down/README.md
index d6240004e..badd24865 100644
--- a/src/count-down/README.md
+++ b/src/count-down/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { CountDown } from 'vant';
-Vue.use(CountDown);
+const app = createApp();
+app.use(CountDown);
```
## Usage
diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md
index b37b30448..b285903d9 100644
--- a/src/count-down/README.zh-CN.md
+++ b/src/count-down/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { CountDown } from 'vant';
-Vue.use(CountDown);
+const app = createApp();
+app.use(CountDown);
```
## 代码演示
diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md
index b26f2efac..2fa585aec 100644
--- a/src/coupon-list/README.md
+++ b/src/coupon-list/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { CouponCell, CouponList } from 'vant';
-Vue.use(CouponCell);
-Vue.use(CouponList);
+const app = createApp();
+app.use(CouponCell);
+app.use(CouponList);
```
## Usage
diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md
index fa00f6d24..071cc1d13 100644
--- a/src/coupon-list/README.zh-CN.md
+++ b/src/coupon-list/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { CouponCell, CouponList } from 'vant';
-Vue.use(CouponCell);
-Vue.use(CouponList);
+const app = createApp();
+app.use(CouponCell);
+app.use(CouponList);
```
## 代码演示
diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md
index 44b5d09f2..adf989787 100644
--- a/src/datetime-picker/README.md
+++ b/src/datetime-picker/README.md
@@ -7,10 +7,11 @@ Used to select time, support date and time dimensions, usually used with the [Po
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { DatetimePicker } from 'vant';
-Vue.use(DatetimePicker);
+const app = createApp();
+app.use(DatetimePicker);
```
## Usage
diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md
index 17fb28660..9ca70ff0b 100644
--- a/src/datetime-picker/README.zh-CN.md
+++ b/src/datetime-picker/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { DatetimePicker } from 'vant';
-Vue.use(DatetimePicker);
+const app = createApp();
+app.use(DatetimePicker);
```
## 代码演示
diff --git a/src/dialog/README.md b/src/dialog/README.md
index b503b04bf..2e5fcba0b 100644
--- a/src/dialog/README.md
+++ b/src/dialog/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Dialog } from 'vant';
-Vue.use(Dialog);
+const app = createApp();
+app.use(Dialog);
```
## Usage
diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md
index c5beed50f..cea9787cb 100644
--- a/src/dialog/README.zh-CN.md
+++ b/src/dialog/README.zh-CN.md
@@ -21,11 +21,12 @@ Dialog({ message: '提示' });
通过组件调用 Dialog 时,可以通过下面的方式进行注册:
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Dialog } from 'vant';
// 全局注册
-Vue.use(Dialog);
+const app = createApp();
+app.use(Dialog);
// 局部注册
export default {
diff --git a/src/divider/README.md b/src/divider/README.md
index 78274ffcb..7e66aefe2 100644
--- a/src/divider/README.md
+++ b/src/divider/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Divider } from 'vant';
-Vue.use(Divider);
+const app = createApp();
+app.use(Divider);
```
## Usage
diff --git a/src/divider/README.zh-CN.md b/src/divider/README.zh-CN.md
index 0a6b265b1..ff38113c6 100644
--- a/src/divider/README.zh-CN.md
+++ b/src/divider/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Divider } from 'vant';
-Vue.use(Divider);
+const app = createApp();
+app.use(Divider);
```
## 代码演示
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index 867fa403e..4d71ce998 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
-Vue.use(DropdownMenu);
-Vue.use(DropdownItem);
+const app = createApp();
+app.use(DropdownMenu);
+app.use(DropdownItem);
```
## Usage
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index 5cc9870b0..ce9669d55 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
-Vue.use(DropdownMenu);
-Vue.use(DropdownItem);
+const app = createApp();
+app.use(DropdownMenu);
+app.use(DropdownItem);
```
## 代码演示
diff --git a/src/empty/README.md b/src/empty/README.md
index 8b13ced49..60a87c205 100644
--- a/src/empty/README.md
+++ b/src/empty/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Empty } from 'vant';
-Vue.use(Empty);
+const app = createApp();
+app.use(Empty);
```
## Usage
diff --git a/src/empty/README.zh-CN.md b/src/empty/README.zh-CN.md
index 1b8af0093..18e4ff7b1 100644
--- a/src/empty/README.zh-CN.md
+++ b/src/empty/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Empty } from 'vant';
-Vue.use(Empty);
+const app = createApp();
+app.use(Empty);
```
## 代码演示
diff --git a/src/field/README.md b/src/field/README.md
index 5986afd9f..e0c9c64ef 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Field } from 'vant';
-Vue.use(Field);
+const app = createApp();
+app.use(Field);
```
## Usage
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index c66f68910..eb3af9edf 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Field } from 'vant';
-Vue.use(Field);
+const app = createApp();
+app.use(Field);
```
## 代码演示
diff --git a/src/form/README.md b/src/form/README.md
index 84727dae7..c81452cd1 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Form } from 'vant';
-Vue.use(Form);
+const app = createApp();
+app.use(Form);
```
## Usage
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index f9fd463b9..ffe746f57 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Form } from 'vant';
-Vue.use(Form);
+const app = createApp();
+app.use(Form);
```
## 代码演示
diff --git a/src/grid/README.md b/src/grid/README.md
index 0ab19d44b..7dca346d3 100644
--- a/src/grid/README.md
+++ b/src/grid/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Grid, GridItem } from 'vant';
-Vue.use(Grid);
-Vue.use(GridItem);
+const app = createApp();
+app.use(Grid);
+app.use(GridItem);
```
## Usage
diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md
index 82225a88d..8d1afd9f0 100644
--- a/src/grid/README.zh-CN.md
+++ b/src/grid/README.zh-CN.md
@@ -7,11 +7,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Grid, GridItem } from 'vant';
-Vue.use(Grid);
-Vue.use(GridItem);
+const app = createApp();
+app.use(Grid);
+app.use(GridItem);
```
## 代码演示
diff --git a/src/icon/README.md b/src/icon/README.md
index fac716683..68032b51d 100644
--- a/src/icon/README.md
+++ b/src/icon/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Icon } from 'vant';
-Vue.use(Icon);
+const app = createApp();
+app.use(Icon);
```
## Usage
diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md
index bcfd27e35..d9d6b1704 100644
--- a/src/icon/README.zh-CN.md
+++ b/src/icon/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Icon } from 'vant';
-Vue.use(Icon);
+const app = createApp();
+app.use(Icon);
```
## 代码演示
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index 111ff5679..62bf380a4 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ImagePreview } from 'vant';
-Vue.use(ImagePreview);
+const app = createApp();
+app.use(ImagePreview);
```
## Usage
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index 59f177887..972e9128d 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -19,11 +19,12 @@ ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
通过组件调用 ImagePreview 时,可以通过下面的方式进行注册。
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ImagePreview } from 'vant';
// 全局注册
-Vue.use(ImagePreview);
+const app = createApp();
+app.use(ImagePreview);
// 局部注册
export default {
@@ -112,7 +113,7 @@ setTimeout(() => {
### 组件调用
-如果需要在图片预览内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 `Vue.use` 注册组件。
+如果需要在图片预览内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 `app.use` 注册组件。
```html
diff --git a/src/image/README.md b/src/image/README.md
index ea56dd794..170cd8eb8 100644
--- a/src/image/README.md
+++ b/src/image/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Image as VanImage } from 'vant';
-Vue.use(VanImage);
+const app = createApp();
+app.use(VanImage);
```
## Usage
@@ -53,10 +54,11 @@ Show round image, it may not works at `fit=contain` and `fit=scale-down`
```
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Lazyload } from 'vant';
-Vue.use(Lazyload);
+const app = createApp();
+app.use(Lazyload);
```
## API
diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md
index da02c90ca..26bb247dc 100644
--- a/src/image/README.zh-CN.md
+++ b/src/image/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Image as VanImage } from 'vant';
-Vue.use(VanImage);
+const app = createApp();
+app.use(VanImage);
```
## 代码演示
@@ -63,10 +64,11 @@ Vue.use(VanImage);
```
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Lazyload } from 'vant';
-Vue.use(Lazyload);
+const app = createApp();
+app.use(Lazyload);
```
### 加载中提示
diff --git a/src/index-bar/README.md b/src/index-bar/README.md
index 371e89bf8..913cc63dd 100644
--- a/src/index-bar/README.md
+++ b/src/index-bar/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { IndexBar } from 'vant';
-Vue.use(IndexBar);
-Vue.use(IndexAnchor);
+const app = createApp();
+app.use(IndexBar);
+app.use(IndexAnchor);
```
## Usage
diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md
index 5b0b4ba10..62568dd0c 100644
--- a/src/index-bar/README.zh-CN.md
+++ b/src/index-bar/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { IndexBar, IndexAnchor } from 'vant';
-Vue.use(IndexBar);
-Vue.use(IndexAnchor);
+const app = createApp();
+app.use(IndexBar);
+app.use(IndexAnchor);
```
## 代码演示
diff --git a/src/lazyload/README.md b/src/lazyload/README.md
index 3c912c2d5..b875e0125 100644
--- a/src/lazyload/README.md
+++ b/src/lazyload/README.md
@@ -3,13 +3,14 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Lazyload } from 'vant';
-Vue.use(Lazyload);
+const app = createApp();
+app.use(Lazyload);
// with options
-Vue.use(Lazyload, {
+app.use(Lazyload, {
lazyComponent: true,
});
```
@@ -47,7 +48,7 @@ Use `v-lazy:background-image` to set background url, and declare the height of t
```js
// set `lazyComponent` option
-Vue.use(Lazyload, {
+app.use(Lazyload, {
lazyComponent: true,
});
```
diff --git a/src/lazyload/README.zh-CN.md b/src/lazyload/README.zh-CN.md
index 4699684fb..a07f0c977 100644
--- a/src/lazyload/README.zh-CN.md
+++ b/src/lazyload/README.zh-CN.md
@@ -5,13 +5,14 @@
`Lazyload` 是 `Vue` 指令,使用前需要对指令进行注册
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Lazyload } from 'vant';
-Vue.use(Lazyload);
+const app = createApp();
+app.use(Lazyload);
// 注册时可以配置额外的选项
-Vue.use(Lazyload, {
+app.use(Lazyload, {
lazyComponent: true,
});
```
@@ -53,7 +54,7 @@ export default {
```js
// 注册时设置`lazyComponent`选项
-Vue.use(Lazyload, {
+app.use(Lazyload, {
lazyComponent: true,
});
```
diff --git a/src/list/README.md b/src/list/README.md
index 49c307ca5..96a1301b2 100644
--- a/src/list/README.md
+++ b/src/list/README.md
@@ -7,10 +7,11 @@ A list component to show items and control loading status.
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { List } from 'vant';
-Vue.use(List);
+const app = createApp();
+app.use(List);
```
## Usage
diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md
index aed00c715..4a2f6af37 100644
--- a/src/list/README.zh-CN.md
+++ b/src/list/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { List } from 'vant';
-Vue.use(List);
+const app = createApp();
+app.use(List);
```
## 代码演示
diff --git a/src/loading/README.md b/src/loading/README.md
index 0f040966f..ad7b0636b 100644
--- a/src/loading/README.md
+++ b/src/loading/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Loading } from 'vant';
-Vue.use(Loading);
+const app = createApp();
+app.use(Loading);
```
## Usage
diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md
index 9531f5ddf..98ad87167 100644
--- a/src/loading/README.zh-CN.md
+++ b/src/loading/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Loading } from 'vant';
-Vue.use(Loading);
+const app = createApp();
+app.use(Loading);
```
## 代码演示
diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md
index 0a6e7fe44..f4fb5d3e8 100644
--- a/src/nav-bar/README.md
+++ b/src/nav-bar/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { NavBar } from 'vant';
-Vue.use(NavBar);
+const app = createApp();
+app.use(NavBar);
```
## Usage
diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md
index 100999759..70e0f8f81 100644
--- a/src/nav-bar/README.zh-CN.md
+++ b/src/nav-bar/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { NavBar } from 'vant';
-Vue.use(NavBar);
+const app = createApp();
+app.use(NavBar);
```
## 代码演示
diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md
index d7dc29137..071a60226 100644
--- a/src/notice-bar/README.md
+++ b/src/notice-bar/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { NoticeBar } from 'vant';
-Vue.use(NoticeBar);
+const app = createApp();
+app.use(NoticeBar);
```
## Usage
diff --git a/src/notice-bar/README.zh-CN.md b/src/notice-bar/README.zh-CN.md
index eb5fc8cb7..2241926df 100644
--- a/src/notice-bar/README.zh-CN.md
+++ b/src/notice-bar/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { NoticeBar } from 'vant';
-Vue.use(NoticeBar);
+const app = createApp();
+app.use(NoticeBar);
```
## 代码演示
diff --git a/src/notify/README.md b/src/notify/README.md
index a8c5e6ece..054324c86 100644
--- a/src/notify/README.md
+++ b/src/notify/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Notify } from 'vant';
-Vue.use(Notify);
+const app = createApp();
+app.use(Notify);
```
## Usage
diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md
index 01475ca7b..56c1c8be0 100644
--- a/src/notify/README.zh-CN.md
+++ b/src/notify/README.zh-CN.md
@@ -19,11 +19,12 @@ Notify('通知内容');
通过组件调用 Notify 时,可以通过下面的方式进行注册(从 2.8.5 版本开始支持):
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Notify } from 'vant';
// 全局注册
-Vue.use(Notify);
+const app = createApp();
+app.use(Notify);
// 局部注册
export default {
diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md
index 57c7bef90..d42198be5 100644
--- a/src/number-keyboard/README.md
+++ b/src/number-keyboard/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { NumberKeyboard } from 'vant';
-Vue.use(NumberKeyboard);
+const app = createApp();
+app.use(NumberKeyboard);
```
## Usage
diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md
index 0659efc50..b8d97b891 100644
--- a/src/number-keyboard/README.zh-CN.md
+++ b/src/number-keyboard/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { NumberKeyboard } from 'vant';
-Vue.use(NumberKeyboard);
+const app = createApp();
+app.use(NumberKeyboard);
```
## 代码演示
diff --git a/src/overlay/README.md b/src/overlay/README.md
index 31fba67b1..3092a6c42 100644
--- a/src/overlay/README.md
+++ b/src/overlay/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Overlay } from 'vant';
-Vue.use(Overlay);
+const app = createApp();
+app.use(Overlay);
```
## Usage
diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md
index 9d70faa1b..b0f498df7 100644
--- a/src/overlay/README.zh-CN.md
+++ b/src/overlay/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Overlay } from 'vant';
-Vue.use(Overlay);
+const app = createApp();
+app.use(Overlay);
```
## 代码演示
diff --git a/src/pagination/README.md b/src/pagination/README.md
index 42ca945df..60ed3c1a5 100644
--- a/src/pagination/README.md
+++ b/src/pagination/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Pagination } from 'vant';
-Vue.use(Pagination);
+const app = createApp();
+app.use(Pagination);
```
## Usage
diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md
index 89a5dcb44..509856f13 100644
--- a/src/pagination/README.zh-CN.md
+++ b/src/pagination/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Pagination } from 'vant';
-Vue.use(Pagination);
+const app = createApp();
+app.use(Pagination);
```
## 代码演示
diff --git a/src/password-input/README.md b/src/password-input/README.md
index fddeeb3c1..f27cbd874 100644
--- a/src/password-input/README.md
+++ b/src/password-input/README.md
@@ -7,11 +7,12 @@ The PasswordInput component is usually used with [NumberKeyboard](#/en-US/number
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';
-Vue.use(PasswordInput);
-Vue.use(NumberKeyboard);
+const app = createApp();
+app.use(PasswordInput);
+app.use(NumberKeyboard);
```
## Usage
diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md
index e81b3aea2..be479f60f 100644
--- a/src/password-input/README.zh-CN.md
+++ b/src/password-input/README.zh-CN.md
@@ -7,11 +7,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';
-Vue.use(PasswordInput);
-Vue.use(NumberKeyboard);
+const app = createApp();
+app.use(PasswordInput);
+app.use(NumberKeyboard);
```
## 代码演示
diff --git a/src/picker/README.md b/src/picker/README.md
index 619598f14..473aecfc4 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -7,10 +7,11 @@ The Picker component is usually used with [Popup](#/en-US/popup) Component.
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Picker } from 'vant';
-Vue.use(Picker);
+const app = createApp();
+app.use(Picker);
```
## Usage
diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md
index b04dc9180..f0fdb309a 100644
--- a/src/picker/README.zh-CN.md
+++ b/src/picker/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Picker } from 'vant';
-Vue.use(Picker);
+const app = createApp();
+app.use(Picker);
```
## 代码演示
diff --git a/src/popup/README.md b/src/popup/README.md
index 0b6e81530..f882c2d07 100644
--- a/src/popup/README.md
+++ b/src/popup/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Popup } from 'vant';
-Vue.use(Popup);
+const app = createApp();
+app.use(Popup);
```
## Usage
@@ -72,7 +73,12 @@ Use `position` prop to set popup display position
### Round Corner
```html
-
+
```
### Get Container
diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md
index 017d8628f..2eea09eb1 100644
--- a/src/popup/README.zh-CN.md
+++ b/src/popup/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Popup } from 'vant';
-Vue.use(Popup);
+const app = createApp();
+app.use(Popup);
```
## 代码演示
@@ -82,7 +83,12 @@ export default {
设置`round`属性后,弹窗会根据弹出位置添加不同的圆角样式
```html
-
+
```
### 指定挂载位置
diff --git a/src/progress/README.md b/src/progress/README.md
index a03e5b158..c5bbeab27 100644
--- a/src/progress/README.md
+++ b/src/progress/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Progress } from 'vant';
-Vue.use(Progress);
+const app = createApp();
+app.use(Progress);
```
## Usage
diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md
index 856b9e8a1..9b9493db3 100644
--- a/src/progress/README.zh-CN.md
+++ b/src/progress/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Progress } from 'vant';
-Vue.use(Progress);
+const app = createApp();
+app.use(Progress);
```
## 代码演示
diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md
index 2226c1591..5cc03f5d0 100644
--- a/src/pull-refresh/README.md
+++ b/src/pull-refresh/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { PullRefresh } from 'vant';
-Vue.use(PullRefresh);
+const app = createApp();
+app.use(PullRefresh);
```
## Usage
diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md
index 9fd7875e9..b4dbc3e6d 100644
--- a/src/pull-refresh/README.zh-CN.md
+++ b/src/pull-refresh/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { PullRefresh } from 'vant';
-Vue.use(PullRefresh);
+const app = createApp();
+app.use(PullRefresh);
```
## 代码演示
diff --git a/src/radio/README.md b/src/radio/README.md
index 1031c5c29..9b8f9de0e 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { RadioGroup, Radio } from 'vant';
-Vue.use(Radio);
-Vue.use(RadioGroup);
+const app = createApp();
+app.use(Radio);
+app.use(RadioGroup);
```
## Usage
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index 0396c282d..ef9326ff0 100644
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { RadioGroup, Radio } from 'vant';
-Vue.use(Radio);
-Vue.use(RadioGroup);
+const app = createApp();
+app.use(Radio);
+app.use(RadioGroup);
```
## 代码演示
diff --git a/src/rate/README.md b/src/rate/README.md
index 46396f819..7cb960543 100644
--- a/src/rate/README.md
+++ b/src/rate/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Rate } from 'vant';
-Vue.use(Rate);
+const app = createApp();
+app.use(Rate);
```
## Usage
diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md
index 869edec83..21c3bbfe2 100644
--- a/src/rate/README.zh-CN.md
+++ b/src/rate/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Rate } from 'vant';
-Vue.use(Rate);
+const app = createApp();
+app.use(Rate);
```
## 代码演示
diff --git a/src/search/README.md b/src/search/README.md
index 94e93c653..592c488ef 100644
--- a/src/search/README.md
+++ b/src/search/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Search } from 'vant';
-Vue.use(Search);
+const app = createApp();
+app.use(Search);
```
## Usage
diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md
index 2e09018be..de1720278 100644
--- a/src/search/README.zh-CN.md
+++ b/src/search/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Search } from 'vant';
-Vue.use(Search);
+const app = createApp();
+app.use(Search);
```
## 代码演示
diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md
index 49ee13ee0..c54f46c16 100644
--- a/src/share-sheet/README.md
+++ b/src/share-sheet/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ShareSheet } from 'vant';
-Vue.use(ShareSheet);
+const app = createApp();
+app.use(ShareSheet);
```
## Usage
diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md
index 9e92a08fb..1c25ca9dd 100644
--- a/src/share-sheet/README.zh-CN.md
+++ b/src/share-sheet/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { ShareSheet } from 'vant';
-Vue.use(ShareSheet);
+const app = createApp();
+app.use(ShareSheet);
```
## 代码演示
diff --git a/src/sidebar/README.md b/src/sidebar/README.md
index 296140dc7..f1a1dbafa 100644
--- a/src/sidebar/README.md
+++ b/src/sidebar/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Sidebar, SidebarItem } from 'vant';
-Vue.use(Sidebar);
-Vue.use(SidebarItem);
+const app = createApp();
+app.use(Sidebar);
+app.use(SidebarItem);
```
## Usage
diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md
index b0afc0628..449c622ec 100644
--- a/src/sidebar/README.zh-CN.md
+++ b/src/sidebar/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Sidebar, SidebarItem } from 'vant';
-Vue.use(Sidebar);
-Vue.use(SidebarItem);
+const app = createApp();
+app.use(Sidebar);
+app.use(SidebarItem);
```
## 代码演示
diff --git a/src/skeleton/README.md b/src/skeleton/README.md
index 3cf31e308..171fbb119 100644
--- a/src/skeleton/README.md
+++ b/src/skeleton/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Skeleton } from 'vant';
-Vue.use(Skeleton);
+const app = createApp();
+app.use(Skeleton);
```
## Usage
diff --git a/src/skeleton/README.zh-CN.md b/src/skeleton/README.zh-CN.md
index fc69a07ee..c46a7f7df 100644
--- a/src/skeleton/README.zh-CN.md
+++ b/src/skeleton/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Skeleton } from 'vant';
-Vue.use(Skeleton);
+const app = createApp();
+app.use(Skeleton);
```
## 代码演示
diff --git a/src/slider/README.md b/src/slider/README.md
index 0a342c50d..5ad958b29 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Slider } from 'vant';
-Vue.use(Slider);
+const app = createApp();
+app.use(Slider);
```
## Usage
diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md
index 99c43e4eb..421c226eb 100644
--- a/src/slider/README.zh-CN.md
+++ b/src/slider/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Slider } from 'vant';
-Vue.use(Slider);
+const app = createApp();
+app.use(Slider);
```
## 代码演示
diff --git a/src/stepper/README.md b/src/stepper/README.md
index 93be8cfb4..ac020c615 100644
--- a/src/stepper/README.md
+++ b/src/stepper/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Stepper } from 'vant';
-Vue.use(Stepper);
+const app = createApp();
+app.use(Stepper);
```
## Usage
diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md
index e17b6a46b..bd8fc1719 100644
--- a/src/stepper/README.zh-CN.md
+++ b/src/stepper/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Stepper } from 'vant';
-Vue.use(Stepper);
+const app = createApp();
+app.use(Stepper);
```
## 代码演示
diff --git a/src/steps/README.md b/src/steps/README.md
index a82b38f2f..be7a20f18 100644
--- a/src/steps/README.md
+++ b/src/steps/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Step, Steps } from 'vant';
-Vue.use(Step);
-Vue.use(Steps);
+const app = createApp();
+app.use(Step);
+app.use(Steps);
```
## Usage
diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md
index d4610bc29..934cc70e6 100644
--- a/src/steps/README.zh-CN.md
+++ b/src/steps/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Step, Steps } from 'vant';
-Vue.use(Step);
-Vue.use(Steps);
+const app = createApp();
+app.use(Step);
+app.use(Steps);
```
## 代码演示
diff --git a/src/sticky/README.md b/src/sticky/README.md
index 17ce81ccd..358c6fe75 100644
--- a/src/sticky/README.md
+++ b/src/sticky/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Sticky } from 'vant';
-Vue.use(Sticky);
+const app = createApp();
+app.use(Sticky);
```
## Usage
diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md
index 696d07055..153992369 100644
--- a/src/sticky/README.zh-CN.md
+++ b/src/sticky/README.zh-CN.md
@@ -7,10 +7,11 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致,当组
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Sticky } from 'vant';
-Vue.use(Sticky);
+const app = createApp();
+app.use(Sticky);
```
## 代码演示
diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md
index 4da09efd4..f97629e32 100644
--- a/src/submit-bar/README.md
+++ b/src/submit-bar/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { SubmitBar } from 'vant';
-Vue.use(SubmitBar);
+const app = createApp();
+app.use(SubmitBar);
```
## Usage
diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md
index dbc0c7adb..04f624f8b 100644
--- a/src/submit-bar/README.zh-CN.md
+++ b/src/submit-bar/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { SubmitBar } from 'vant';
-Vue.use(SubmitBar);
+const app = createApp();
+app.use(SubmitBar);
```
## 代码演示
diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md
index 25a979899..dedc26891 100644
--- a/src/swipe-cell/README.md
+++ b/src/swipe-cell/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { SwipeCell } from 'vant';
-Vue.use(SwipeCell);
+const app = createApp();
+app.use(SwipeCell);
```
## Usage
diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md
index ccaf901ec..d66f9fc98 100644
--- a/src/swipe-cell/README.zh-CN.md
+++ b/src/swipe-cell/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { SwipeCell } from 'vant';
-Vue.use(SwipeCell);
+const app = createApp();
+app.use(SwipeCell);
```
## 代码演示
diff --git a/src/swipe/README.md b/src/swipe/README.md
index 45a34ccaa..0418d72c7 100644
--- a/src/swipe/README.md
+++ b/src/swipe/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Swipe, SwipeItem } from 'vant';
-Vue.use(Swipe);
-Vue.use(SwipeItem);
+const app = createApp();
+app.use(Swipe);
+app.use(SwipeItem);
```
## Usage
@@ -48,10 +49,11 @@ Use [Lazyload](#/en-US/lazyload) component to lazyload image.
```
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Lazyload } from 'vant';
-Vue.use(Lazyload);
+const app = createApp();
+app.use(Lazyload);
export default {
data() {
diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md
index ccba5d96f..96b10b47c 100644
--- a/src/swipe/README.zh-CN.md
+++ b/src/swipe/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Swipe, SwipeItem } from 'vant';
-Vue.use(Swipe);
-Vue.use(SwipeItem);
+const app = createApp();
+app.use(Swipe);
+app.use(SwipeItem);
```
## 代码演示
@@ -48,10 +49,11 @@ Vue.use(SwipeItem);
```
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Lazyload } from 'vant';
-Vue.use(Lazyload);
+const app = createApp();
+app.use(Lazyload);
export default {
data() {
diff --git a/src/switch/README.md b/src/switch/README.md
index 8b75c4411..c1a759082 100644
--- a/src/switch/README.md
+++ b/src/switch/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Switch } from 'vant';
-Vue.use(Switch);
+const app = createApp();
+app.use(Switch);
```
## Usage
diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md
index 134658066..d5f627c9a 100644
--- a/src/switch/README.zh-CN.md
+++ b/src/switch/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Switch } from 'vant';
-Vue.use(Switch);
+const app = createApp();
+app.use(Switch);
```
## 代码演示
diff --git a/src/tab/README.md b/src/tab/README.md
index 6d25fd4f1..ef14a1ed4 100644
--- a/src/tab/README.md
+++ b/src/tab/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Tab, Tabs } from 'vant';
-Vue.use(Tab);
-Vue.use(Tabs);
+const app = createApp();
+app.use(Tab);
+app.use(Tabs);
```
## Usage
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index dd2e8e04b..dcccfdb90 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Tab, Tabs } from 'vant';
-Vue.use(Tab);
-Vue.use(Tabs);
+const app = createApp();
+app.use(Tab);
+app.use(Tabs);
```
## 代码演示
diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 7fca5e380..2130f9069 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -3,11 +3,12 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Tabbar, TabbarItem } from 'vant';
-Vue.use(Tabbar);
-Vue.use(TabbarItem);
+const app = createApp();
+app.use(Tabbar);
+app.use(TabbarItem);
```
## Usage
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index 4beb51019..b93ef2d25 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -3,11 +3,12 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Tabbar, TabbarItem } from 'vant';
-Vue.use(Tabbar);
-Vue.use(TabbarItem);
+const app = createApp();
+app.use(Tabbar);
+app.use(TabbarItem);
```
## 代码演示
diff --git a/src/tag/README.md b/src/tag/README.md
index 2fc980e45..2472a4e09 100644
--- a/src/tag/README.md
+++ b/src/tag/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Tag } from 'vant';
-Vue.use(Tag);
+const app = createApp();
+app.use(Tag);
```
## Usage
diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md
index 5319f12ed..1560a7d30 100644
--- a/src/tag/README.zh-CN.md
+++ b/src/tag/README.zh-CN.md
@@ -3,10 +3,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Tag } from 'vant';
-Vue.use(Tag);
+const app = createApp();
+app.use(Tag);
```
## 代码演示
diff --git a/src/toast/README.md b/src/toast/README.md
index 7f5eb4a56..d974164d2 100644
--- a/src/toast/README.md
+++ b/src/toast/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Toast } from 'vant';
-Vue.use(Toast);
+const app = createApp();
+app.use(Toast);
```
## Usage
diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md
index 5a814ea21..6eb067bad 100644
--- a/src/toast/README.zh-CN.md
+++ b/src/toast/README.zh-CN.md
@@ -7,10 +7,11 @@
### 引入
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { Toast } from 'vant';
-Vue.use(Toast);
+const app = createApp();
+app.use(Toast);
```
## 代码演示
diff --git a/src/tree-select/README.md b/src/tree-select/README.md
index e49f49298..2db89e28e 100644
--- a/src/tree-select/README.md
+++ b/src/tree-select/README.md
@@ -3,10 +3,11 @@
### Install
```js
-import Vue from 'vue';
+import { createApp } from 'vue';
import { TreeSelect } from 'vant';
-Vue.use(TreeSelect);
+const app = createApp();
+app.use(TreeSelect);
```
## Usage
@@ -58,7 +59,11 @@ export default {
### Custom Content
```html
-
+