docs: update component registration guide

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);
+const app = createApp();
-Vue.use(ActionBarButton);
+app.use(ActionBar);
-Vue.use(ActionBarIcon);
+app.use(ActionBarIcon);
+app.use(ActionBarButton);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(ActionBarButton);
+app.use(ActionBar);
-Vue.use(ActionBarIcon);
+app.use(ActionBarIcon);
+app.use(ActionBarButton);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(CellGroup);
+app.use(Cell);
+app.use(CellGroup);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(CellGroup);
+app.use(Cell);
+app.use(CellGroup);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(CheckboxGroup);
+app.use(Checkbox);
+app.use(CheckboxGroup);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(CheckboxGroup);
+app.use(Checkbox);
+app.use(CheckboxGroup);
 ```
 
 ## 代码演示

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
-<van-circle v-model:currentRate="currentRate" :rate="30" :speed="100" :text="text" />
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="30"
+  :speed="100"
+  :text="text"
+/>
 ```
 
 ```js

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);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(Row);
+app.use(Col);
+app.use(Row);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(Row);
+app.use(Col);
+app.use(Row);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(CollapseItem);
+app.use(Collapse);
+app.use(CollapseItem);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(CollapseItem);
+app.use(Collapse);
+app.use(CollapseItem);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(ContactList);
+app.use(ContactCard);
-Vue.use(ContactEdit);
+app.use(ContactList);
+app.use(ContactEdit);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(ContactList);
+app.use(ContactCard);
-Vue.use(ContactEdit);
+app.use(ContactList);
+app.use(ContactEdit);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(CouponList);
+app.use(CouponCell);
+app.use(CouponList);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(CouponList);
+app.use(CouponCell);
+app.use(CouponList);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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 {

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

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);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(DropdownItem);
+app.use(DropdownMenu);
+app.use(DropdownItem);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(DropdownItem);
+app.use(DropdownMenu);
+app.use(DropdownItem);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(GridItem);
+app.use(Grid);
+app.use(GridItem);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(GridItem);
+app.use(Grid);
+app.use(GridItem);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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
 <van-image-preview v-model="show" :images="images" @change="onChange">

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

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);
 ```
 
 ### 加载中提示

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);
+const app = createApp();
-Vue.use(IndexAnchor);
+app.use(IndexBar);
+app.use(IndexAnchor);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(IndexAnchor);
+app.use(IndexBar);
+app.use(IndexAnchor);
 ```
 
 ## 代码演示

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,
 });
 ```

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,
 });
 ```

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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 {

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(NumberKeyboard);
+app.use(PasswordInput);
+app.use(NumberKeyboard);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(NumberKeyboard);
+app.use(PasswordInput);
+app.use(NumberKeyboard);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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
-<van-popup v-model:show="show" round position="bottom" :style="{ height: '30%' }" />
+<van-popup
+  v-model:show="show"
+  round
+  position="bottom"
+  :style="{ height: '30%' }"
+/>
 ```
 
 ### Get Container

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
-<van-popup v-model:show="show" round position="bottom" :style="{ height: '30%' }" />
+<van-popup
+  v-model:show="show"
+  round
+  position="bottom"
+  :style="{ height: '30%' }"
+/>
 ```
 
 ### 指定挂载位置

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(RadioGroup);
+app.use(Radio);
+app.use(RadioGroup);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(RadioGroup);
+app.use(Radio);
+app.use(RadioGroup);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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);
+const app = createApp();
-Vue.use(SidebarItem);
+app.use(Sidebar);
+app.use(SidebarItem);
 ```
 
 ## Usage

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);
+const app = createApp();
-Vue.use(SidebarItem);
+app.use(Sidebar);
+app.use(SidebarItem);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示

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

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);
 ```
 
 ## 代码演示