From 6f2b4c99dade20e341b7f2fc2511de456e809ace Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 11 Dec 2017 20:41:19 +0800
Subject: [PATCH] [Improvement] Support Vue.use to register a component (#401)

---
 README.md                                |  2 +-
 build/bin/build-entry.js                 |  4 +-
 docs/demos/common.js                     |  3 +-
 docs/demos/views/layout.vue              |  7 +++-
 docs/markdown/en-US/actionsheet.md       |  2 +-
 docs/markdown/en-US/address-edit.md      |  2 +-
 docs/markdown/en-US/address-list.md      |  2 +-
 docs/markdown/en-US/area.md              |  2 +-
 docs/markdown/en-US/badge.md             |  2 +-
 docs/markdown/en-US/button.md            |  2 +-
 docs/markdown/en-US/card.md              |  2 +-
 docs/markdown/en-US/cell-swipe.md        |  2 +-
 docs/markdown/en-US/cell.md              |  4 +-
 docs/markdown/en-US/checkbox.md          |  4 +-
 docs/markdown/en-US/contact.md           |  6 +--
 docs/markdown/en-US/coupon.md            |  4 +-
 docs/markdown/en-US/datetime-picker.md   |  2 +-
 docs/markdown/en-US/field.md             |  2 +-
 docs/markdown/en-US/goods-action.md      |  6 +--
 docs/markdown/en-US/icon.md              |  2 +-
 docs/markdown/en-US/layout.md            |  4 +-
 docs/markdown/en-US/lazyload.md          | 29 ---------------
 docs/markdown/en-US/loading.md           |  2 +-
 docs/markdown/en-US/nav-bar.md           |  2 +-
 docs/markdown/en-US/notice-bar.md        |  2 +-
 docs/markdown/en-US/number-keyboard.md   |  2 +-
 docs/markdown/en-US/pagination.md        |  2 +-
 docs/markdown/en-US/panel.md             |  2 +-
 docs/markdown/en-US/password-input.md    | 24 +-----------
 docs/markdown/en-US/picker.md            |  2 +-
 docs/markdown/en-US/popup.md             |  2 +-
 docs/markdown/en-US/progress.md          |  2 +-
 docs/markdown/en-US/pull-refresh.md      |  2 +-
 docs/markdown/en-US/radio.md             |  2 +-
 docs/markdown/en-US/search.md            |  2 +-
 docs/markdown/en-US/sku.md               |  2 +-
 docs/markdown/en-US/stepper.md           |  2 +-
 docs/markdown/en-US/steps.md             |  4 +-
 docs/markdown/en-US/submit-bar.md        |  2 +-
 docs/markdown/en-US/swipe.md             |  4 +-
 docs/markdown/en-US/switch-cell.md       |  2 +-
 docs/markdown/en-US/switch.md            |  2 +-
 docs/markdown/en-US/tab.md               |  4 +-
 docs/markdown/en-US/tabbar.md            |  4 +-
 docs/markdown/en-US/tag.md               |  2 +-
 docs/markdown/en-US/tree-select.md       |  4 +-
 docs/markdown/en-US/uploader.md          |  2 +-
 docs/markdown/zh-CN/actionsheet.md       |  2 +-
 docs/markdown/zh-CN/address-edit.md      |  2 +-
 docs/markdown/zh-CN/address-list.md      |  2 +-
 docs/markdown/zh-CN/area.md              |  2 +-
 docs/markdown/zh-CN/badge.md             |  2 +-
 docs/markdown/zh-CN/button.md            |  2 +-
 docs/markdown/zh-CN/card.md              |  2 +-
 docs/markdown/zh-CN/cell-swipe.md        |  2 +-
 docs/markdown/zh-CN/cell.md              |  4 +-
 docs/markdown/zh-CN/checkbox.md          |  4 +-
 docs/markdown/zh-CN/contact.md           |  6 +--
 docs/markdown/zh-CN/coupon.md            |  4 +-
 docs/markdown/zh-CN/datetime-picker.md   |  2 +-
 docs/markdown/zh-CN/field.md             |  2 +-
 docs/markdown/zh-CN/goods-action.md      |  6 +--
 docs/markdown/zh-CN/icon.md              |  2 +-
 docs/markdown/zh-CN/layout.md            |  4 +-
 docs/markdown/zh-CN/loading.md           |  2 +-
 docs/markdown/zh-CN/nav-bar.md           |  2 +-
 docs/markdown/zh-CN/notice-bar.md        |  2 +-
 docs/markdown/zh-CN/number-keyboard.md   |  2 +-
 docs/markdown/zh-CN/pagination.md        |  2 +-
 docs/markdown/zh-CN/panel.md             |  2 +-
 docs/markdown/zh-CN/password-input.md    |  4 +-
 docs/markdown/zh-CN/picker.md            |  2 +-
 docs/markdown/zh-CN/popup.md             |  2 +-
 docs/markdown/zh-CN/progress.md          |  2 +-
 docs/markdown/zh-CN/pull-refresh.md      |  2 +-
 docs/markdown/zh-CN/radio.md             |  2 +-
 docs/markdown/zh-CN/search.md            |  2 +-
 docs/markdown/zh-CN/sku.md               |  2 +-
 docs/markdown/zh-CN/stepper.md           |  2 +-
 docs/markdown/zh-CN/steps.md             |  4 +-
 docs/markdown/zh-CN/submit-bar.md        |  2 +-
 docs/markdown/zh-CN/swipe.md             |  4 +-
 docs/markdown/zh-CN/switch-cell.md       |  2 +-
 docs/markdown/zh-CN/switch.md            |  2 +-
 docs/markdown/zh-CN/tab.md               |  4 +-
 docs/markdown/zh-CN/tabbar.md            |  4 +-
 docs/markdown/zh-CN/tag.md               |  2 +-
 docs/markdown/zh-CN/tree-select.md       |  2 +-
 docs/markdown/zh-CN/uploader.md          |  2 +-
 docs/src/DocsApp.vue                     |  5 ---
 docs/src/doc.config.js                   |  4 --
 package.json                             |  8 ++--
 packages/actionsheet/index.vue           | 12 ++----
 packages/address-edit/Detail.vue         | 10 ++---
 packages/address-edit/index.vue          |  8 ++--
 packages/address-list/index.vue          |  7 ++--
 packages/area/index.vue                  |  5 ++-
 packages/badge-group/index.vue           |  6 ++-
 packages/badge/index.vue                 |  6 ++-
 packages/button/index.vue                | 10 ++---
 packages/card/index.vue                  |  6 ++-
 packages/cell-group/index.vue            |  6 ++-
 packages/cell-swipe/index.vue            |  5 ++-
 packages/cell/index.vue                  | 10 ++---
 packages/checkbox-group/index.vue        |  6 ++-
 packages/checkbox/index.vue              | 10 ++---
 packages/col/index.vue                   |  6 ++-
 packages/contact-card/index.vue          | 13 ++-----
 packages/contact-edit/index.vue          |  8 ++--
 packages/contact-list/index.vue          | 10 ++---
 packages/coupon-cell/index.vue           |  5 ++-
 packages/coupon-list/Item.vue            | 10 ++---
 packages/coupon-list/index.vue           |  5 ++-
 packages/datetime-picker/index.vue       |  5 ++-
 packages/dialog/dialog.vue               |  8 ++--
 packages/field/index.vue                 |  9 ++---
 packages/goods-action-big-btn/index.vue  |  7 ++--
 packages/goods-action-mini-btn/index.vue | 10 ++---
 packages/goods-action/index.vue          |  6 ++-
 packages/icon/index.vue                  |  3 ++
 packages/image-preview/image-preview.vue |  5 ++-
 packages/index.js                        |  4 +-
 packages/loading/index.vue               |  6 ++-
 packages/locale/index.js                 | 20 ----------
 packages/mixins/i18n.js                  | 17 +++++++++
 packages/nav-bar/index.vue               | 10 ++---
 packages/notice-bar/index.vue            | 10 ++---
 packages/number-keyboard/index.vue       |  6 ++-
 packages/pagination/index.vue            |  8 ++--
 packages/panel/index.vue                 |  6 ++-
 packages/password-input/index.vue        |  6 ++-
 packages/picker/PickerColumn.vue         |  6 ++-
 packages/picker/index.vue                |  8 ++--
 packages/popup/index.vue                 |  5 ++-
 packages/progress/index.vue              |  6 ++-
 packages/pull-refresh/index.vue          | 13 ++-----
 packages/radio-group/index.vue           |  6 ++-
 packages/radio/index.vue                 | 10 ++---
 packages/row/index.vue                   |  6 ++-
 packages/search/index.vue                | 13 ++-----
 packages/sku/containers/SkuContainer.vue | 13 +++----
 packages/step/index.vue                  |  8 ++--
 packages/stepper/index.vue               |  6 ++-
 packages/steps/index.vue                 | 10 ++---
 packages/submit-bar/index.vue            |  8 ++--
 packages/swipe-item/index.vue            |  6 ++-
 packages/swipe/index.vue                 |  6 ++-
 packages/switch-cell/index.vue           |  5 ++-
 packages/switch/index.vue                | 10 ++---
 packages/tab/index.vue                   |  5 ++-
 packages/tabbar-item/index.vue           | 10 ++---
 packages/tabbar/index.vue                |  6 ++-
 packages/tabs/index.vue                  |  5 ++-
 packages/tag/index.vue                   |  6 ++-
 packages/toast/toast.vue                 | 12 ++----
 packages/tree-select/index.vue           | 10 ++---
 packages/uploader/index.vue              |  6 ++-
 packages/utils/create.js                 | 19 ++++++++++
 packages/utils/deep-assign.js            | 11 ++----
 packages/utils/index.js                  | 20 +++++++---
 packages/utils/install.js                |  6 +++
 yarn.lock                                | 47 +++++++++++++++---------
 162 files changed, 432 insertions(+), 490 deletions(-)
 create mode 100644 packages/mixins/i18n.js
 create mode 100644 packages/utils/create.js
 create mode 100644 packages/utils/install.js

diff --git a/README.md b/README.md
index 4a60dbf40..0d5c881ad 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,7 @@ Modern browsers and Android 4.0+, iOS 6+.
 
 ## Links
 - [Documentation](https://www.youzanyun.com/zanui/vant)
-- [Change log](https://www.youzanyun.com/zanui/vant#/en-US/component/changelog)
+- [Changelog](https://www.youzanyun.com/zanui/vant#/en-US/component/changelog)
 - [React UI Zent](https://www.youzanyun.com/zanui/zent)
 - [vue-cli-template-vant](https://github.com/youzan/vue-cli-template-vant) 
 - [vant-demo](https://github.com/youzan/vant-demo)
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 9877586a0..fb13ce451 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -27,8 +27,8 @@ const components = [
 ];
 
 const install = Vue => {
-  components.forEach(component => {
-    Vue.component(component.name, component);
+  components.forEach(Component => {
+    Vue.use(Component);
   });
 };
 
diff --git a/docs/demos/common.js b/docs/demos/common.js
index a31312f1f..26a723934 100644
--- a/docs/demos/common.js
+++ b/docs/demos/common.js
@@ -3,6 +3,7 @@
  */
 
 import Vue from 'vue';
+import i18n from 'packages/mixins/i18n';
 import { Locale, Toast, Dialog } from 'packages';
 import { DemoBlock, DemoSection } from 'vant-doc';
 import { camelize } from 'packages/utils';
@@ -23,7 +24,7 @@ const demoBaseMixin = {
 
 window.Toast = Toast;
 window.Dialog = Dialog;
-Vue.mixin(Locale.i18n);
+Vue.mixin(i18n);
 Vue.mixin(demoBaseMixin);
 Vue.component('demo-block', DemoBlock);
 Vue.component('demo-section', DemoSection);
diff --git a/docs/demos/views/layout.vue b/docs/demos/views/layout.vue
index ad4503374..fad7f479b 100644
--- a/docs/demos/views/layout.vue
+++ b/docs/demos/views/layout.vue
@@ -42,9 +42,14 @@ export default {
 
 <style lang="postcss">
 .demo-layout {
-  .van-row {
+  .van-doc-demo-block {
     padding: 0 15px;
   }
+
+  .van-doc-demo-block__title {
+    padding-left: 0;
+  }
+
   .van-col {
     color: #fff;
     font-size: 13px;
diff --git a/docs/markdown/en-US/actionsheet.md b/docs/markdown/en-US/actionsheet.md
index 401663348..f45886fc1 100644
--- a/docs/markdown/en-US/actionsheet.md
+++ b/docs/markdown/en-US/actionsheet.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Actionsheet } from 'vant';
 
-Vue.component(Actionsheet.name, Actionsheet);
+Vue.use(Actionsheet);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/address-edit.md b/docs/markdown/en-US/address-edit.md
index f3aad29c5..a810fc014 100644
--- a/docs/markdown/en-US/address-edit.md
+++ b/docs/markdown/en-US/address-edit.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { AddressEdit } from 'vant';
 
-Vue.component(AddressEdit.name, AddressEdit);
+Vue.use(AddressEdit);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/address-list.md b/docs/markdown/en-US/address-list.md
index 037cfdea1..cf3856932 100644
--- a/docs/markdown/en-US/address-list.md
+++ b/docs/markdown/en-US/address-list.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { AddressList } from 'vant';
 
-Vue.component(AddressList.name, AddressList);
+Vue.use(AddressList);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/area.md b/docs/markdown/en-US/area.md
index f535d2853..e651c37e9 100644
--- a/docs/markdown/en-US/area.md
+++ b/docs/markdown/en-US/area.md
@@ -5,7 +5,7 @@
 ``` javascript
 import { Area } from 'vant';
 
-Vue.component(Area.name, Area);
+Vue.use(Area);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/badge.md b/docs/markdown/en-US/badge.md
index 1c4e56b17..b6e09d133 100644
--- a/docs/markdown/en-US/badge.md
+++ b/docs/markdown/en-US/badge.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Badge } from 'vant';
 
-Vue.component(Badge.name, Badge);
+Vue.use(Badge);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/button.md b/docs/markdown/en-US/button.md
index 6b6de3d77..5b6845047 100644
--- a/docs/markdown/en-US/button.md
+++ b/docs/markdown/en-US/button.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Button } from 'vant';
 
-Vue.component(Button.name, Button);
+Vue.use(Button);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/card.md b/docs/markdown/en-US/card.md
index d94c85d71..cb220f30d 100644
--- a/docs/markdown/en-US/card.md
+++ b/docs/markdown/en-US/card.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Card } from 'vant';
 
-Vue.component(Card.name, Card);
+Vue.use(Card);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/cell-swipe.md b/docs/markdown/en-US/cell-swipe.md
index e31ed50ac..0d330774f 100644
--- a/docs/markdown/en-US/cell-swipe.md
+++ b/docs/markdown/en-US/cell-swipe.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { CellSwipe } from 'vant';
 
-Vue.component(CellSwipe.name, CellSwipe);
+Vue.use(CellSwipe);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/cell.md b/docs/markdown/en-US/cell.md
index a57c646d1..28e3c7fbc 100644
--- a/docs/markdown/en-US/cell.md
+++ b/docs/markdown/en-US/cell.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Cell, CellGroup } from 'vant';
 
-Vue.component(Cell.name, Cell);
-Vue.component(CellGroup.name, CellGroup);
+Vue.use(Cell);
+Vue.use(CellGroup);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/checkbox.md b/docs/markdown/en-US/checkbox.md
index ccf2b089c..e1007b5b3 100644
--- a/docs/markdown/en-US/checkbox.md
+++ b/docs/markdown/en-US/checkbox.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Checkbox, CheckboxGroup } from 'vant';
 
-Vue.component(Checkbox.name, Checkbox);
-Vue.component(CheckboxGroup.name, CheckboxGroup);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/contact.md b/docs/markdown/en-US/contact.md
index 3ad57d9aa..9074782b0 100644
--- a/docs/markdown/en-US/contact.md
+++ b/docs/markdown/en-US/contact.md
@@ -5,9 +5,9 @@
 ``` javascript
 import { ContactCard, ContactList, ContactEdit } from 'vant';
 
-Vue.component(ContactCard.name, ContactCard);
-Vue.component(ContactList.name, ContactList);
-Vue.component(ContactEdit.name, ContactEdit);
+Vue.use(ContactCard);
+Vue.use(ContactList);
+Vue.use(ContactEdit);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/coupon.md b/docs/markdown/en-US/coupon.md
index 50a0b8252..c0fbdb632 100644
--- a/docs/markdown/en-US/coupon.md
+++ b/docs/markdown/en-US/coupon.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { CouponCell, CouponList } from 'vant';
 
-Vue.component(CouponCell.name, CouponCell);
-Vue.component(CouponList.name, CouponList);
+Vue.use(CouponCell);
+Vue.use(CouponList);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/datetime-picker.md b/docs/markdown/en-US/datetime-picker.md
index 7f3299f31..b5c6ce06f 100644
--- a/docs/markdown/en-US/datetime-picker.md
+++ b/docs/markdown/en-US/datetime-picker.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { DatetimePicker } from 'vant';
 
-Vue.component(DatetimePicker.name, DatetimePicker);
+Vue.use(DatetimePicker);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/field.md b/docs/markdown/en-US/field.md
index 39ec7ff77..1e22c6bc1 100644
--- a/docs/markdown/en-US/field.md
+++ b/docs/markdown/en-US/field.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Field } from 'vant';
 
-Vue.component(Field.name, Field);
+Vue.use(Field);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/goods-action.md b/docs/markdown/en-US/goods-action.md
index 5620b8b75..10c0c7b32 100644
--- a/docs/markdown/en-US/goods-action.md
+++ b/docs/markdown/en-US/goods-action.md
@@ -8,9 +8,9 @@ import {
   GoodsActionMiniBtn
 } from 'vant';
 
-Vue.component(GoodsAction.name, GoodsAction);
-Vue.component(GoodsActionBigBtn.name, GoodsActionBigBtn);
-Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
+Vue.use(GoodsAction);
+Vue.use(GoodsActionBigBtn);
+Vue.use(GoodsActionMiniBtn);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/icon.md b/docs/markdown/en-US/icon.md
index f6b924209..2adf19715 100644
--- a/docs/markdown/en-US/icon.md
+++ b/docs/markdown/en-US/icon.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Icon } from 'vant';
 
-Vue.component(Icon.name, Icon);
+Vue.use(Icon);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/layout.md b/docs/markdown/en-US/layout.md
index 9ff9c2b05..bc0582576 100644
--- a/docs/markdown/en-US/layout.md
+++ b/docs/markdown/en-US/layout.md
@@ -6,8 +6,8 @@ Quickly and easily create layouts with `van-row` and `van-col`
 ``` javascript
 import { Row, Col } from 'vant';
 
-Vue.component(Row.name, Row);
-Vue.component(Col.name, Col);
+Vue.use(Row);
+Vue.use(Col);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/lazyload.md b/docs/markdown/en-US/lazyload.md
index 3a22a27e9..707fd9d79 100644
--- a/docs/markdown/en-US/lazyload.md
+++ b/docs/markdown/en-US/lazyload.md
@@ -1,32 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      imageList: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
-      ],
-      backgroundImageList: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
-      ],
-      componentImageList: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
-      ]
-    };
-  },
-
-  methods: {
-    handleComponentShow() {
-      console.log('component show');
-    }
-  }
-}
-</script>
-
 ## Lazyload
 
 ### Install
diff --git a/docs/markdown/en-US/loading.md b/docs/markdown/en-US/loading.md
index d9c03cac8..5ac34a998 100644
--- a/docs/markdown/en-US/loading.md
+++ b/docs/markdown/en-US/loading.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Loading } from 'vant';
 
-Vue.component(Loading.name, Loading);
+Vue.use(Loading);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/nav-bar.md b/docs/markdown/en-US/nav-bar.md
index ed1fc1bb7..77ba3ab64 100644
--- a/docs/markdown/en-US/nav-bar.md
+++ b/docs/markdown/en-US/nav-bar.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { NavBar } from 'vant';
 
-Vue.component(NavBar.name, NavBar);
+Vue.use(NavBar);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/notice-bar.md b/docs/markdown/en-US/notice-bar.md
index d088579fb..eea3d9f51 100644
--- a/docs/markdown/en-US/notice-bar.md
+++ b/docs/markdown/en-US/notice-bar.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { NoticeBar } from 'vant';
 
-Vue.component(NoticeBar.name, NoticeBar);
+Vue.use(NoticeBar);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/number-keyboard.md b/docs/markdown/en-US/number-keyboard.md
index f4c065fc0..5d35defee 100644
--- a/docs/markdown/en-US/number-keyboard.md
+++ b/docs/markdown/en-US/number-keyboard.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { NumberKeyboard } from 'vant';
 
-Vue.component(NumberKeyboard.name, NumberKeyboard);
+Vue.use(NumberKeyboard);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/pagination.md b/docs/markdown/en-US/pagination.md
index 3d246b832..78487ac33 100644
--- a/docs/markdown/en-US/pagination.md
+++ b/docs/markdown/en-US/pagination.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Pagination } from 'vant';
 
-Vue.component(Pagination.name, Pagination);
+Vue.use(Pagination);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/panel.md b/docs/markdown/en-US/panel.md
index 00e168d8b..5dd926927 100644
--- a/docs/markdown/en-US/panel.md
+++ b/docs/markdown/en-US/panel.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Panel } from 'vant';
 
-Vue.component(Panel.name, Panel);
+Vue.use(Panel);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/password-input.md b/docs/markdown/en-US/password-input.md
index ff46c37f8..25eda7b11 100644
--- a/docs/markdown/en-US/password-input.md
+++ b/docs/markdown/en-US/password-input.md
@@ -1,23 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      showKeyboard: true
-    }
-  },
-
-  methods: {
-    onInput(key) {
-      this.value = (this.value + key).slice(0, 6);
-    },
-    onDelete() {
-      this.value = this.value.slice(0, this.value.length - 1);
-    }
-  }
-}
-</script>
-
 ## PasswordInput
 The PasswordInput component is usually used with [NumberKeyboard](#/en-US/component/number-keyboard) Component.
 
@@ -25,8 +5,8 @@ The PasswordInput component is usually used with [NumberKeyboard](#/en-US/compon
 ``` javascript
 import { PasswordInput, NumberKeyBoard } from 'vant';
 
-Vue.component(PasswordInput.name, PasswordInput);
-Vue.component(NumberKeyBoard.name, NumberKeyBoard);
+Vue.use(PasswordInput);
+Vue.use(NumberKeyBoard);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/picker.md b/docs/markdown/en-US/picker.md
index 3a404cc10..824419592 100644
--- a/docs/markdown/en-US/picker.md
+++ b/docs/markdown/en-US/picker.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Picker } from 'vant';
 
-Vue.component(Picker.name, Picker);
+Vue.use(Picker);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/popup.md b/docs/markdown/en-US/popup.md
index 9c9045c16..b0c091468 100644
--- a/docs/markdown/en-US/popup.md
+++ b/docs/markdown/en-US/popup.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Popup } from 'vant';
 
-Vue.component(Popup.name, Popup);
+Vue.use(Popup);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/progress.md b/docs/markdown/en-US/progress.md
index 830dc792e..965e0a02b 100644
--- a/docs/markdown/en-US/progress.md
+++ b/docs/markdown/en-US/progress.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Progress } from 'vant';
 
-Vue.component(Progress.name, Progress);
+Vue.use(Progress);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/pull-refresh.md b/docs/markdown/en-US/pull-refresh.md
index 45d1ab0d3..b0bf9e500 100644
--- a/docs/markdown/en-US/pull-refresh.md
+++ b/docs/markdown/en-US/pull-refresh.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { PullRefresh } from 'vant';
 
-Vue.component(PullRefresh.name, PullRefresh);
+Vue.use(PullRefresh);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/radio.md b/docs/markdown/en-US/radio.md
index aab646c40..626876e03 100644
--- a/docs/markdown/en-US/radio.md
+++ b/docs/markdown/en-US/radio.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Radio } from 'vant';
 
-Vue.component(Radio.name, Radio);
+Vue.use(Radio);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/search.md b/docs/markdown/en-US/search.md
index 8462c7512..a3d420ea8 100644
--- a/docs/markdown/en-US/search.md
+++ b/docs/markdown/en-US/search.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Search } from 'vant';
 
-Vue.component(Search.name, Search);
+Vue.use(Search);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/sku.md b/docs/markdown/en-US/sku.md
index b96376d6b..6e3427834 100644
--- a/docs/markdown/en-US/sku.md
+++ b/docs/markdown/en-US/sku.md
@@ -4,7 +4,7 @@
 ```javascript
 import { Sku } from 'vant';
 
-Vue.component(Sku.name, Sku);
+Vue.use(Sku);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/stepper.md b/docs/markdown/en-US/stepper.md
index fa6614d64..d60b9e2c7 100644
--- a/docs/markdown/en-US/stepper.md
+++ b/docs/markdown/en-US/stepper.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Stepper } from 'vant';
 
-Vue.component(Stepper.name, Stepper);
+Vue.use(Stepper);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/steps.md b/docs/markdown/en-US/steps.md
index d5920ecf5..6efa07aa0 100644
--- a/docs/markdown/en-US/steps.md
+++ b/docs/markdown/en-US/steps.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Step, Steps } from 'vant';
 
-Vue.component(Step.name, Step);
-Vue.component(Steps.name, Steps);
+Vue.use(Step);
+Vue.use(Steps);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/submit-bar.md b/docs/markdown/en-US/submit-bar.md
index 9f3c827b3..e809bfa6e 100644
--- a/docs/markdown/en-US/submit-bar.md
+++ b/docs/markdown/en-US/submit-bar.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { SubmitBar } from 'vant';
 
-Vue.component(SubmitBar.name, SubmitBar);
+Vue.use(SubmitBar);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/swipe.md b/docs/markdown/en-US/swipe.md
index 8d89337e5..9780029f6 100644
--- a/docs/markdown/en-US/swipe.md
+++ b/docs/markdown/en-US/swipe.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Swipe, SwipeItem } from 'vant';
 
-Vue.component(Swipe.name, Swipe);
-Vue.component(SwipeItem.name, SwipeItem);
+Vue.use(Swipe);
+Vue.use(SwipeItem);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/switch-cell.md b/docs/markdown/en-US/switch-cell.md
index 87d1ffb06..909fd6afd 100644
--- a/docs/markdown/en-US/switch-cell.md
+++ b/docs/markdown/en-US/switch-cell.md
@@ -5,7 +5,7 @@
 ``` javascript
 import { SwitchCell } from 'vant';
 
-Vue.component(SwitchCell.name, SwitchCell);
+Vue.use(SwitchCell);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/switch.md b/docs/markdown/en-US/switch.md
index 6a71930cf..80589bf0b 100644
--- a/docs/markdown/en-US/switch.md
+++ b/docs/markdown/en-US/switch.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Switch } from 'vant';
 
-Vue.component(Switch.name, Switch);
+Vue.use(Switch);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/tab.md b/docs/markdown/en-US/tab.md
index b71da120d..c35a2b064 100644
--- a/docs/markdown/en-US/tab.md
+++ b/docs/markdown/en-US/tab.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Tab, Tabs } from 'vant';
 
-Vue.component(Tab.name, Tab);
-Vue.component(Tabs.name, Tabs);
+Vue.use(Tab);
+Vue.use(Tabs);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/tabbar.md b/docs/markdown/en-US/tabbar.md
index 5b2df10dc..103d2be74 100644
--- a/docs/markdown/en-US/tabbar.md
+++ b/docs/markdown/en-US/tabbar.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Tabbar, TabbarItem } from 'vant';
 
-Vue.component(Tabbar.name, Tabbar);
-Vue.component(TabbarItem.name, TabbarItem);
+Vue.use(Tabbar);
+Vue.use(TabbarItem);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/tag.md b/docs/markdown/en-US/tag.md
index 60d836db0..755a5dae9 100644
--- a/docs/markdown/en-US/tag.md
+++ b/docs/markdown/en-US/tag.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Tag } from 'vant';
 
-Vue.component(Tag.name, Tag);
+Vue.use(Tag);
 ```
 
 ### Usage
diff --git a/docs/markdown/en-US/tree-select.md b/docs/markdown/en-US/tree-select.md
index 602ca1146..accabe80d 100644
--- a/docs/markdown/en-US/tree-select.md
+++ b/docs/markdown/en-US/tree-select.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { TreeSelect } from 'vant';
 
-Vue.component(TreeSelect.name, TreeSelect);
+Vue.use(TreeSelect);
 ```
 
 ### Usage
@@ -62,7 +62,7 @@ export default {
 ### Data Structure
 `items` should be an array contains specified tree objects.
 
-In every tree object, `text` property defines the name, `id` stands for the unique key while the `children` contains sub-tree objects.
+In every tree object, `text` property defines `id` stands for the unique key while the `children` contains sub-tree objects.
 
 ```javascript
 [
diff --git a/docs/markdown/en-US/uploader.md b/docs/markdown/en-US/uploader.md
index 4ece35ebe..4b6ed496d 100644
--- a/docs/markdown/en-US/uploader.md
+++ b/docs/markdown/en-US/uploader.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Uploader } from 'vant';
 
-Vue.component(Uploader.name, Uploader);
+Vue.use(Uploader);
 ```
 
 ### Usage
diff --git a/docs/markdown/zh-CN/actionsheet.md b/docs/markdown/zh-CN/actionsheet.md
index 895e44b76..388160bb5 100644
--- a/docs/markdown/zh-CN/actionsheet.md
+++ b/docs/markdown/zh-CN/actionsheet.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Actionsheet } from 'vant';
 
-Vue.component(Actionsheet.name, Actionsheet);
+Vue.use(Actionsheet);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/address-edit.md b/docs/markdown/zh-CN/address-edit.md
index 99a772285..18b08af2d 100644
--- a/docs/markdown/zh-CN/address-edit.md
+++ b/docs/markdown/zh-CN/address-edit.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { AddressEdit } from 'vant';
 
-Vue.component(AddressEdit.name, AddressEdit);
+Vue.use(AddressEdit);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/address-list.md b/docs/markdown/zh-CN/address-list.md
index 312305bca..7f1b5d036 100644
--- a/docs/markdown/zh-CN/address-list.md
+++ b/docs/markdown/zh-CN/address-list.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { AddressList } from 'vant';
 
-Vue.component(AddressList.name, AddressList);
+Vue.use(AddressList);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/area.md b/docs/markdown/zh-CN/area.md
index d705f44a5..dc44716ae 100644
--- a/docs/markdown/zh-CN/area.md
+++ b/docs/markdown/zh-CN/area.md
@@ -5,7 +5,7 @@
 ``` javascript
 import { Area } from 'vant';
 
-Vue.component(Area.name, Area);
+Vue.use(Area);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/badge.md b/docs/markdown/zh-CN/badge.md
index 028f52388..25e1842aa 100644
--- a/docs/markdown/zh-CN/badge.md
+++ b/docs/markdown/zh-CN/badge.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Badge } from 'vant';
 
-Vue.component(Badge.name, Badge);
+Vue.use(Badge);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/button.md b/docs/markdown/zh-CN/button.md
index 214e39a73..ff353c054 100644
--- a/docs/markdown/zh-CN/button.md
+++ b/docs/markdown/zh-CN/button.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Button } from 'vant';
 
-Vue.component(Button.name, Button);
+Vue.use(Button);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/card.md b/docs/markdown/zh-CN/card.md
index 68d13f7a1..f36281182 100644
--- a/docs/markdown/zh-CN/card.md
+++ b/docs/markdown/zh-CN/card.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Card } from 'vant';
 
-Vue.component(Card.name, Card);
+Vue.use(Card);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/cell-swipe.md b/docs/markdown/zh-CN/cell-swipe.md
index d3ebe8083..63c3bfa4f 100644
--- a/docs/markdown/zh-CN/cell-swipe.md
+++ b/docs/markdown/zh-CN/cell-swipe.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { CellSwipe } from 'vant';
 
-Vue.component(CellSwipe.name, CellSwipe);
+Vue.use(CellSwipe);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/cell.md b/docs/markdown/zh-CN/cell.md
index c942c90ed..611c682f0 100644
--- a/docs/markdown/zh-CN/cell.md
+++ b/docs/markdown/zh-CN/cell.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Cell, CellGroup } from 'vant';
 
-Vue.component(Cell.name, Cell);
-Vue.component(CellGroup.name, CellGroup);
+Vue.use(Cell);
+Vue.use(CellGroup);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/checkbox.md b/docs/markdown/zh-CN/checkbox.md
index cd220c5ec..957ae45ea 100644
--- a/docs/markdown/zh-CN/checkbox.md
+++ b/docs/markdown/zh-CN/checkbox.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Checkbox, CheckboxGroup } from 'vant';
 
-Vue.component(Checkbox.name, Checkbox);
-Vue.component(CheckboxGroup.name, CheckboxGroup);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/contact.md b/docs/markdown/zh-CN/contact.md
index cd50b857b..48c37efa8 100644
--- a/docs/markdown/zh-CN/contact.md
+++ b/docs/markdown/zh-CN/contact.md
@@ -5,9 +5,9 @@
 ``` javascript
 import { ContactCard, ContactList, ContactEdit } from 'vant';
 
-Vue.component(ContactCard.name, ContactCard);
-Vue.component(ContactList.name, ContactList);
-Vue.component(ContactEdit.name, ContactEdit);
+Vue.use(ContactCard);
+Vue.use(ContactList);
+Vue.use(ContactEdit);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/coupon.md b/docs/markdown/zh-CN/coupon.md
index 18e16e83c..04fc8e0a2 100644
--- a/docs/markdown/zh-CN/coupon.md
+++ b/docs/markdown/zh-CN/coupon.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { CouponCell, CouponList } from 'vant';
 
-Vue.component(CouponCell.name, CouponCell);
-Vue.component(CouponList.name, CouponList);
+Vue.use(CouponCell);
+Vue.use(CouponList);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/datetime-picker.md b/docs/markdown/zh-CN/datetime-picker.md
index a9c0116af..03cbf48e1 100644
--- a/docs/markdown/zh-CN/datetime-picker.md
+++ b/docs/markdown/zh-CN/datetime-picker.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { DatetimePicker } from 'vant';
 
-Vue.component(DatetimePicker.name, DatetimePicker);
+Vue.use(DatetimePicker);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/field.md b/docs/markdown/zh-CN/field.md
index 0fffdab48..0a04f341a 100644
--- a/docs/markdown/zh-CN/field.md
+++ b/docs/markdown/zh-CN/field.md
@@ -6,7 +6,7 @@
 ``` javascript
 import { Field } from 'vant';
 
-Vue.component(Field.name, Field);
+Vue.use(Field);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/goods-action.md b/docs/markdown/zh-CN/goods-action.md
index 11689051c..827cf2712 100644
--- a/docs/markdown/zh-CN/goods-action.md
+++ b/docs/markdown/zh-CN/goods-action.md
@@ -8,9 +8,9 @@ import {
   GoodsActionMiniBtn
 } from 'vant';
 
-Vue.component(GoodsAction.name, GoodsAction);
-Vue.component(GoodsActionBigBtn.name, GoodsActionBigBtn);
-Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
+Vue.use(GoodsAction);
+Vue.use(GoodsActionBigBtn);
+Vue.use(GoodsActionMiniBtn);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/icon.md b/docs/markdown/zh-CN/icon.md
index 605693581..9bad60002 100644
--- a/docs/markdown/zh-CN/icon.md
+++ b/docs/markdown/zh-CN/icon.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Icon } from 'vant';
 
-Vue.component(Icon.name, Icon);
+Vue.use(Icon);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/layout.md b/docs/markdown/zh-CN/layout.md
index de7a665d2..0897d8a59 100644
--- a/docs/markdown/zh-CN/layout.md
+++ b/docs/markdown/zh-CN/layout.md
@@ -6,8 +6,8 @@
 ``` javascript
 import { Row, Col } from 'vant';
 
-Vue.component(Row.name, Row);
-Vue.component(Col.name, Col);
+Vue.use(Row);
+Vue.use(Col);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/loading.md b/docs/markdown/zh-CN/loading.md
index dda2c6e03..06a3c0667 100644
--- a/docs/markdown/zh-CN/loading.md
+++ b/docs/markdown/zh-CN/loading.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Loading } from 'vant';
 
-Vue.component(Loading.name, Loading);
+Vue.use(Loading);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/nav-bar.md b/docs/markdown/zh-CN/nav-bar.md
index 4e8a8dd4f..3deb9e57f 100644
--- a/docs/markdown/zh-CN/nav-bar.md
+++ b/docs/markdown/zh-CN/nav-bar.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { NavBar } from 'vant';
 
-Vue.component(NavBar.name, NavBar);
+Vue.use(NavBar);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/notice-bar.md b/docs/markdown/zh-CN/notice-bar.md
index b96abfd98..d6c28efd9 100644
--- a/docs/markdown/zh-CN/notice-bar.md
+++ b/docs/markdown/zh-CN/notice-bar.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { NoticeBar } from 'vant';
 
-Vue.component(NoticeBar.name, NoticeBar);
+Vue.use(NoticeBar);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/number-keyboard.md b/docs/markdown/zh-CN/number-keyboard.md
index fe0fed0a5..2c66b33c0 100644
--- a/docs/markdown/zh-CN/number-keyboard.md
+++ b/docs/markdown/zh-CN/number-keyboard.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { NumberKeyboard } from 'vant';
 
-Vue.component(NumberKeyboard.name, NumberKeyboard);
+Vue.use(NumberKeyboard);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/pagination.md b/docs/markdown/zh-CN/pagination.md
index 4f747804b..cdda6f451 100644
--- a/docs/markdown/zh-CN/pagination.md
+++ b/docs/markdown/zh-CN/pagination.md
@@ -5,7 +5,7 @@
 ``` javascript
 import { Pagination } from 'vant';
 
-Vue.component(Pagination.name, Pagination);
+Vue.use(Pagination);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/panel.md b/docs/markdown/zh-CN/panel.md
index 6657748a8..7eb4e3dc4 100644
--- a/docs/markdown/zh-CN/panel.md
+++ b/docs/markdown/zh-CN/panel.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Panel } from 'vant';
 
-Vue.component(Panel.name, Panel);
+Vue.use(Panel);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/password-input.md b/docs/markdown/zh-CN/password-input.md
index 70313ba0b..78e07d328 100644
--- a/docs/markdown/zh-CN/password-input.md
+++ b/docs/markdown/zh-CN/password-input.md
@@ -5,8 +5,8 @@
 ``` javascript
 import { PasswordInput, NumberKeyBoard } from 'vant';
 
-Vue.component(PasswordInput.name, PasswordInput);
-Vue.component(NumberKeyBoard.name, NumberKeyBoard);
+Vue.use(PasswordInput);
+Vue.use(NumberKeyBoard);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/picker.md b/docs/markdown/zh-CN/picker.md
index 14465a31b..8718f4ae1 100644
--- a/docs/markdown/zh-CN/picker.md
+++ b/docs/markdown/zh-CN/picker.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Picker } from 'vant';
 
-Vue.component(Picker.name, Picker);
+Vue.use(Picker);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/popup.md b/docs/markdown/zh-CN/popup.md
index 905082121..e6020176b 100644
--- a/docs/markdown/zh-CN/popup.md
+++ b/docs/markdown/zh-CN/popup.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Popup } from 'vant';
 
-Vue.component(Popup.name, Popup);
+Vue.use(Popup);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/progress.md b/docs/markdown/zh-CN/progress.md
index d31c09377..e3f01cd96 100644
--- a/docs/markdown/zh-CN/progress.md
+++ b/docs/markdown/zh-CN/progress.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Progress } from 'vant';
 
-Vue.component(Progress.name, Progress);
+Vue.use(Progress);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/pull-refresh.md b/docs/markdown/zh-CN/pull-refresh.md
index cb6ad0f7d..9423b9c26 100644
--- a/docs/markdown/zh-CN/pull-refresh.md
+++ b/docs/markdown/zh-CN/pull-refresh.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { PullRefresh } from 'vant';
 
-Vue.component(PullRefresh.name, PullRefresh);
+Vue.use(PullRefresh);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/radio.md b/docs/markdown/zh-CN/radio.md
index 2bea771d3..d6273014b 100644
--- a/docs/markdown/zh-CN/radio.md
+++ b/docs/markdown/zh-CN/radio.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Radio } from 'vant';
 
-Vue.component(Radio.name, Radio);
+Vue.use(Radio);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/search.md b/docs/markdown/zh-CN/search.md
index baf4e5c65..e30bf7f29 100644
--- a/docs/markdown/zh-CN/search.md
+++ b/docs/markdown/zh-CN/search.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Search } from 'vant';
 
-Vue.component(Search.name, Search);
+Vue.use(Search);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/sku.md b/docs/markdown/zh-CN/sku.md
index d27f36a1b..b1c5598d8 100644
--- a/docs/markdown/zh-CN/sku.md
+++ b/docs/markdown/zh-CN/sku.md
@@ -4,7 +4,7 @@
 ```javascript
 import { Sku } from 'vant';
 
-Vue.component(Sku.name, Sku);
+Vue.use(Sku);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/stepper.md b/docs/markdown/zh-CN/stepper.md
index 8034518f7..9cde63a92 100644
--- a/docs/markdown/zh-CN/stepper.md
+++ b/docs/markdown/zh-CN/stepper.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Stepper } from 'vant';
 
-Vue.component(Stepper.name, Stepper);
+Vue.use(Stepper);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/steps.md b/docs/markdown/zh-CN/steps.md
index 1c2f0608d..dba0cb892 100644
--- a/docs/markdown/zh-CN/steps.md
+++ b/docs/markdown/zh-CN/steps.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Step, Steps } from 'vant';
 
-Vue.component(Step.name, Step);
-Vue.component(Steps.name, Steps);
+Vue.use(Step);
+Vue.use(Steps);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/submit-bar.md b/docs/markdown/zh-CN/submit-bar.md
index 079eb3d16..325622129 100644
--- a/docs/markdown/zh-CN/submit-bar.md
+++ b/docs/markdown/zh-CN/submit-bar.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { SubmitBar } from 'vant';
 
-Vue.component(SubmitBar.name, SubmitBar);
+Vue.use(SubmitBar);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/swipe.md b/docs/markdown/zh-CN/swipe.md
index eb7d48083..c58f38f7e 100644
--- a/docs/markdown/zh-CN/swipe.md
+++ b/docs/markdown/zh-CN/swipe.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Swipe, SwipeItem } from 'vant';
 
-Vue.component(Swipe.name, Swipe);
-Vue.component(SwipeItem.name, SwipeItem);
+Vue.use(Swipe);
+Vue.use(SwipeItem);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/switch-cell.md b/docs/markdown/zh-CN/switch-cell.md
index 5064153e7..61aefdaea 100644
--- a/docs/markdown/zh-CN/switch-cell.md
+++ b/docs/markdown/zh-CN/switch-cell.md
@@ -6,7 +6,7 @@
 ``` javascript
 import { SwitchCell } from 'vant';
 
-Vue.component(SwitchCell.name, SwitchCell);
+Vue.use(SwitchCell);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/switch.md b/docs/markdown/zh-CN/switch.md
index 3d439c328..a90c22fbc 100644
--- a/docs/markdown/zh-CN/switch.md
+++ b/docs/markdown/zh-CN/switch.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Switch } from 'vant';
 
-Vue.component(Switch.name, Switch);
+Vue.use(Switch);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/tab.md b/docs/markdown/zh-CN/tab.md
index 1f2d2d35b..548e44f56 100644
--- a/docs/markdown/zh-CN/tab.md
+++ b/docs/markdown/zh-CN/tab.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Tab, Tabs } from 'vant';
 
-Vue.component(Tab.name, Tab);
-Vue.component(Tabs.name, Tabs);
+Vue.use(Tab);
+Vue.use(Tabs);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/tabbar.md b/docs/markdown/zh-CN/tabbar.md
index 8ad226703..94238e7ed 100644
--- a/docs/markdown/zh-CN/tabbar.md
+++ b/docs/markdown/zh-CN/tabbar.md
@@ -4,8 +4,8 @@
 ``` javascript
 import { Tabbar, TabbarItem } from 'vant';
 
-Vue.component(Tabbar.name, Tabbar);
-Vue.component(TabbarItem.name, TabbarItem);
+Vue.use(Tabbar);
+Vue.use(TabbarItem);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/tag.md b/docs/markdown/zh-CN/tag.md
index 7aa9b06b2..3d6879961 100644
--- a/docs/markdown/zh-CN/tag.md
+++ b/docs/markdown/zh-CN/tag.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Tag } from 'vant';
 
-Vue.component(Tag.name, Tag);
+Vue.use(Tag);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/tree-select.md b/docs/markdown/zh-CN/tree-select.md
index e74806120..80b301c33 100644
--- a/docs/markdown/zh-CN/tree-select.md
+++ b/docs/markdown/zh-CN/tree-select.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { TreeSelect } from 'vant';
 
-Vue.component(TreeSelect.name, TreeSelect);
+Vue.use(TreeSelect);
 ```
 
 ### 代码演示
diff --git a/docs/markdown/zh-CN/uploader.md b/docs/markdown/zh-CN/uploader.md
index 9ff9a621b..19bba563b 100644
--- a/docs/markdown/zh-CN/uploader.md
+++ b/docs/markdown/zh-CN/uploader.md
@@ -4,7 +4,7 @@
 ``` javascript
 import { Uploader } from 'vant';
 
-Vue.component(Uploader.name, Uploader);
+Vue.use(Uploader);
 ```
 
 ### 代码演示
diff --git a/docs/src/DocsApp.vue b/docs/src/DocsApp.vue
index 6c591c9ef..2033504c4 100644
--- a/docs/src/DocsApp.vue
+++ b/docs/src/DocsApp.vue
@@ -11,11 +11,6 @@ import docConfig from './doc.config';
 
 export default {
   data() {
-    if (window.location.host === 'www.youzanyun.com') {
-      const group = docConfig['zh-CN'].nav[0].groups[0];
-      group.list = group.list.filter(item => item.title !== '业务组件');
-    }
-
     return {
       simulators: [`/zanui/vant/examples${location.hash}`],
       demoURL: ''
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index cd85f4a83..c55337288 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -30,10 +30,6 @@ module.exports = {
                 title: '快速上手',
                 noExample: true
               },
-              {
-                title: '业务组件',
-                link: '/zanui/captain'
-              },
               {
                 path: '/changelog',
                 title: '更新日志',
diff --git a/package.json b/package.json
index 2805c06e7..af4c23c56 100644
--- a/package.json
+++ b/package.json
@@ -51,11 +51,11 @@
     "vue": ">= 2.5.0"
   },
   "devDependencies": {
-    "autoprefixer": "^7.2.1",
+    "autoprefixer": "^7.2.2",
     "avoriaz": "2.0.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-helper-vue-jsx-merge-props": "^2.0.2",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -116,9 +116,9 @@
     "vue-style-loader": "^3.0.0",
     "vue-template-compiler": "^2.5.9",
     "vue-template-es2015-compiler": "^1.6.0",
-    "webpack": "^3.9.1",
+    "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.1",
-    "webpack-dev-server": "^2.9.4",
+    "webpack-dev-server": "^2.9.7",
     "webpack-merge": "^4.1.1"
   }
 }
diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
index eebeb5aca..d6b19751c 100644
--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@@ -34,20 +34,14 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Popup from '../mixins/popup';
-import Icon from '../icon';
-import Loading from '../loading';
 
-export default {
+export default create({
   name: 'van-actionsheet',
 
   mixins: [Popup],
 
-  components: {
-    Icon,
-    Loading
-  },
-
   props: {
     value: Boolean,
     title: String,
@@ -75,5 +69,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
index 7406a5684..4d4a33c18 100644
--- a/packages/address-edit/Detail.vue
+++ b/packages/address-edit/Detail.vue
@@ -37,21 +37,17 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 import Field from '../field';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
 import { isAndroid } from '../utils';
-import { i18n } from '../locale';
 
-export default {
+export default create({
   name: 'van-address-edit-detail',
 
-  mixins: [i18n],
-
   components: {
     Field,
-    Icon,
     Cell,
     CellGroup
   },
@@ -107,5 +103,5 @@ export default {
       this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
     }
   }
-};
+});
 </script>
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
index f81b85f8e..2b867c985 100644
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@@ -70,6 +70,7 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Field from '../field';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
@@ -81,13 +82,10 @@ import VanArea from '../area';
 import AddressEditDetail from './Detail';
 import SwitchCell from '../switch-cell';
 import validateMobile from '../utils/validate/mobile';
-import { i18n } from '../locale';
 
-export default {
+export default create({
   name: 'van-address-edit',
 
-  mixins: [i18n],
-
   components: {
     Field,
     Cell,
@@ -246,5 +244,5 @@ export default {
       });
     }
   }
-};
+});
 </script>
diff --git a/packages/address-list/index.vue b/packages/address-list/index.vue
index 02a44861f..ee68f68b1 100644
--- a/packages/address-list/index.vue
+++ b/packages/address-list/index.vue
@@ -16,17 +16,16 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
 import Radio from '../radio';
 import RadioGroup from '../radio-group';
 
-export default {
+export default create({
   name: 'van-address-list',
 
   components: {
-    Icon,
     Cell,
     Radio,
     CellGroup,
@@ -44,5 +43,5 @@ export default {
       default: '新增收货地址'
     }
   }
-};
+});
 </script>
diff --git a/packages/area/index.vue b/packages/area/index.vue
index a9f0c1097..7e8585bea 100644
--- a/packages/area/index.vue
+++ b/packages/area/index.vue
@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Picker from '../picker';
 
 const DEFAULT_PROVINCE = {
@@ -34,7 +35,7 @@ const PROVINCE_TYPE = 'provice';
 const CITY_TYPE = 'city';
 const COUNTY_TYPE = 'county';
 
-export default {
+export default create({
   name: 'van-area',
 
   components: {
@@ -146,5 +147,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/badge-group/index.vue b/packages/badge-group/index.vue
index 72babb9cb..5a4f41f62 100644
--- a/packages/badge-group/index.vue
+++ b/packages/badge-group/index.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-badge-group',
 
   props: {
@@ -20,5 +22,5 @@ export default {
       badges: []
     };
   }
-};
+});
 </script>
diff --git a/packages/badge/index.vue b/packages/badge/index.vue
index 9dd628f63..bc920b28e 100644
--- a/packages/badge/index.vue
+++ b/packages/badge/index.vue
@@ -6,7 +6,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-badge',
 
   props: {
@@ -30,5 +32,5 @@ export default {
       this.$emit('click', this.$parent.badges.indexOf(this));
     }
   }
-};
+});
 </script>
diff --git a/packages/button/index.vue b/packages/button/index.vue
index c596ad041..193054f0d 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -30,15 +30,11 @@
 </template>
 
 <script>
-import Loading from '../loading';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-button',
 
-  components: {
-    Loading
-  },
-
   props: {
     block: Boolean,
     loading: Boolean,
@@ -66,5 +62,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/card/index.vue b/packages/card/index.vue
index 903b637a2..864d0dd24 100644
--- a/packages/card/index.vue
+++ b/packages/card/index.vue
@@ -27,7 +27,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-card',
 
   props: {
@@ -38,5 +40,5 @@ export default {
     num: [Number, String],
     price: [Number, String]
   }
-};
+});
 </script>
diff --git a/packages/cell-group/index.vue b/packages/cell-group/index.vue
index 3672912b1..edcb60149 100644
--- a/packages/cell-group/index.vue
+++ b/packages/cell-group/index.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-cell-group'
-};
+});
 </script>
diff --git a/packages/cell-swipe/index.vue b/packages/cell-swipe/index.vue
index 04f13e6a8..137743f3b 100644
--- a/packages/cell-swipe/index.vue
+++ b/packages/cell-swipe/index.vue
@@ -21,9 +21,10 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Clickoutside from '../utils/clickoutside';
 
-export default {
+export default create({
   name: 'van-cell-swipe',
 
   props: {
@@ -134,5 +135,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index 8832a3b12..db3ce349a 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -29,18 +29,14 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 import RouterLink from '../mixins/router-link';
 
-export default {
+export default create({
   name: 'van-cell',
 
   mixins: [RouterLink],
 
-  components: {
-    Icon
-  },
-
   props: {
     icon: String,
     title: String,
@@ -56,5 +52,5 @@ export default {
       this.routerLink();
     }
   }
-};
+});
 </script>
diff --git a/packages/checkbox-group/index.vue b/packages/checkbox-group/index.vue
index db746f142..268b11db3 100644
--- a/packages/checkbox-group/index.vue
+++ b/packages/checkbox-group/index.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-checkbox-group',
 
   props: {
@@ -18,5 +20,5 @@ export default {
       this.$emit('change', val);
     }
   }
-};
+});
 </script>
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index 2f95aad47..2d3b51707 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -21,16 +21,12 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 import findParent from '../mixins/find-parent';
 
-export default {
+export default create({
   name: 'van-checkbox',
 
-  components: {
-    Icon
-  },
-
   mixins: [findParent],
 
   props: {
@@ -106,5 +102,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/col/index.vue b/packages/col/index.vue
index 4dbdee59a..79439b423 100644
--- a/packages/col/index.vue
+++ b/packages/col/index.vue
@@ -9,7 +9,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-col',
 
   props: {
@@ -26,5 +28,5 @@ export default {
       return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
     }
   }
-};
+});
 </script>
diff --git a/packages/contact-card/index.vue b/packages/contact-card/index.vue
index a52ec84e1..72bda4631 100644
--- a/packages/contact-card/index.vue
+++ b/packages/contact-card/index.vue
@@ -18,18 +18,11 @@
 </template>
 
 <script>
-import Icon from '../icon';
-import { i18n } from '../locale';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-contact-card',
 
-  mixins: [i18n],
-
-  components: {
-    Icon
-  },
-
   props: {
     tel: String,
     name: String,
@@ -39,5 +32,5 @@ export default {
       default: 'add'
     }
   }
-};
+});
 </script>
diff --git a/packages/contact-edit/index.vue b/packages/contact-edit/index.vue
index ecbf90ac7..23e48b2c7 100644
--- a/packages/contact-edit/index.vue
+++ b/packages/contact-edit/index.vue
@@ -32,13 +32,11 @@ import CellGroup from '../cell-group';
 import Dialog from '../dialog';
 import Toast from '../toast';
 import validateMobile from '../utils/validate/mobile';
-import { i18n } from '../locale';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-contact-edit',
 
-  mixins: [i18n],
-
   components: {
     Field,
     VanButton,
@@ -122,5 +120,5 @@ export default {
       });
     }
   }
-};
+});
 </script>
diff --git a/packages/contact-list/index.vue b/packages/contact-list/index.vue
index 9a4d3c853..458b50131 100644
--- a/packages/contact-list/index.vue
+++ b/packages/contact-list/index.vue
@@ -16,20 +16,16 @@
 </template>
 
 <script>
-import Icon from '../icon';
 import Cell from '../cell';
 import Radio from '../radio';
 import CellGroup from '../cell-group';
 import RadioGroup from '../radio-group';
-import { i18n } from '../locale';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-contact-list',
 
-  mixins: [i18n],
-
   components: {
-    Icon,
     Cell,
     Radio,
     CellGroup,
@@ -44,5 +40,5 @@ export default {
       default: () => []
     }
   }
-};
+});
 </script>
diff --git a/packages/coupon-cell/index.vue b/packages/coupon-cell/index.vue
index aa84a4ed0..3feb43c49 100644
--- a/packages/coupon-cell/index.vue
+++ b/packages/coupon-cell/index.vue
@@ -5,10 +5,11 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
 
-export default {
+export default create({
   name: 'van-coupon-cell',
 
   components: {
@@ -46,5 +47,5 @@ export default {
       return coupons.length === 0 ? '使用优惠' : `您有 ${coupons.length} 个可用优惠`;
     }
   }
-};
+});
 </script>
diff --git a/packages/coupon-list/Item.vue b/packages/coupon-list/Item.vue
index 5cb9e23a9..1d314bc86 100644
--- a/packages/coupon-list/Item.vue
+++ b/packages/coupon-list/Item.vue
@@ -19,15 +19,11 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-coupon-item',
 
-  components: {
-    Icon
-  },
-
   props: {
     data: Object,
     chosen: Boolean,
@@ -67,5 +63,5 @@ export default {
       return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
     }
   }
-};
+});
 </script>
diff --git a/packages/coupon-list/index.vue b/packages/coupon-list/index.vue
index 66a4641c4..b40083134 100644
--- a/packages/coupon-list/index.vue
+++ b/packages/coupon-list/index.vue
@@ -36,6 +36,7 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
 import CouponItem from './Item';
@@ -43,7 +44,7 @@ import Field from '../field';
 import Popup from '../popup';
 import VanButton from '../button';
 
-export default {
+export default create({
   name: 'van-coupon-list',
 
   components: {
@@ -144,5 +145,5 @@ export default {
       });
     }
   }
-};
+});
 </script>
diff --git a/packages/datetime-picker/index.vue b/packages/datetime-picker/index.vue
index fe9651dc3..ae300706c 100644
--- a/packages/datetime-picker/index.vue
+++ b/packages/datetime-picker/index.vue
@@ -11,11 +11,12 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Picker from '../picker';
 
 const isValidDate = date => Object.prototype.toString.call(date) === "[object Date]" && !isNaN(date.getTime());
 
-export default {
+export default create({
   name: 'van-datetime-picker',
 
   components: {
@@ -286,5 +287,5 @@ export default {
   mounted() {
     this.updateColumnValue(this.innerValue);
   }
-};
+});
 </script>
diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue
index cff793b20..6b92cb5f4 100644
--- a/packages/dialog/dialog.vue
+++ b/packages/dialog/dialog.vue
@@ -31,18 +31,18 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import VanButton from '../button';
 import Popup from '../mixins/popup';
-import { i18n } from '../locale';
 
-export default {
+export default create({
   name: 'van-dialog',
 
   components: {
     VanButton
   },
 
-  mixins: [Popup, i18n],
+  mixins: [Popup],
 
   props: {
     title: String,
@@ -76,5 +76,5 @@ export default {
       this.callback && this.callback(action);
     }
   }
-};
+});
 </script>
diff --git a/packages/field/index.vue b/packages/field/index.vue
index a4b9427e9..a29c8b9d9 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -48,15 +48,14 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Cell from '../cell';
-import Icon from '../icon';
 
-export default {
+export default create({
   name: 'van-field',
 
   components: {
-    Cell,
-    Icon
+    Cell
   },
 
   props: {
@@ -129,5 +128,5 @@ export default {
       el.style.height = el.scrollHeight + 'px';
     }
   }
-};
+});
 </script>
diff --git a/packages/goods-action-big-btn/index.vue b/packages/goods-action-big-btn/index.vue
index c569f2dd8..e8b298c1e 100644
--- a/packages/goods-action-big-btn/index.vue
+++ b/packages/goods-action-big-btn/index.vue
@@ -4,17 +4,18 @@
     :href="url"
     class="van-goods-action__big-btn"
     :type="primary ? 'primary' : 'default'"
-    @click="$emit('click', $event)"
     bottomAction
+    @click="$emit('click', $event)"
   >
     <slot></slot>
   </van-button>
 </template>
 
 <script>
+import { create } from '../utils';
 import VanButton from '../button';
 
-export default {
+export default create({
   name: 'van-goods-action-big-btn',
 
   components: {
@@ -25,5 +26,5 @@ export default {
     url: String,
     primary: Boolean
   }
-};
+});
 </script>
diff --git a/packages/goods-action-mini-btn/index.vue b/packages/goods-action-mini-btn/index.vue
index cc6a65e73..ad508c37c 100644
--- a/packages/goods-action-mini-btn/index.vue
+++ b/packages/goods-action-mini-btn/index.vue
@@ -6,19 +6,15 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-goods-action-mini-btn',
 
-  components: {
-    Icon
-  },
-
   props: {
     url: String,
     icon: String,
     iconClass: String
   }
-};
+});
 </script>
diff --git a/packages/goods-action/index.vue b/packages/goods-action/index.vue
index 8ab06d10a..6a2b9d86e 100644
--- a/packages/goods-action/index.vue
+++ b/packages/goods-action/index.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-goods-action'
-};
+});
 </script>
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index a046cd3b1..43e7f725a 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -5,7 +5,10 @@
 </template>
 
 <script>
+import install from '../utils/install';
+
 export default {
+  install,
   name: 'van-icon',
   props: {
     name: String
diff --git a/packages/image-preview/image-preview.vue b/packages/image-preview/image-preview.vue
index ba576e9e1..cd0b1508c 100644
--- a/packages/image-preview/image-preview.vue
+++ b/packages/image-preview/image-preview.vue
@@ -16,11 +16,12 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Popup from '../mixins/popup';
 import Swipe from '../swipe';
 import SwipeItem from '../swipe-item';
 
-export default {
+export default create({
   name: 'van-image-preview',
 
   mixins: [Popup],
@@ -70,5 +71,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/index.js b/packages/index.js
index 2a1af163b..00b1d0309 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -123,8 +123,8 @@ const components = [
 ];
 
 const install = Vue => {
-  components.forEach(component => {
-    Vue.component(component.name, component);
+  components.forEach(Component => {
+    Vue.use(Component);
   });
 };
 
diff --git a/packages/loading/index.vue b/packages/loading/index.vue
index c6b8781dd..f12c0c54c 100644
--- a/packages/loading/index.vue
+++ b/packages/loading/index.vue
@@ -7,9 +7,11 @@
 </template>
 
 <script>
-export default {
-  name: 'van-loading',
+import install from '../utils/install';
 
+export default {
+  install,
+  name: 'van-loading',
   props: {
     type: {
       type: String,
diff --git a/packages/locale/index.js b/packages/locale/index.js
index dcb455cc8..bf456e9a8 100644
--- a/packages/locale/index.js
+++ b/packages/locale/index.js
@@ -1,29 +1,10 @@
 import Vue from 'vue';
-import { get, camelize } from '../utils';
 import deepAssign from '../utils/deep-assign';
 import defaultMessages from './lang/zh-CN';
 
-// component mixin
-const i18n = {
-  computed: {
-    $t() {
-      const { name } = this.$options;
-      const prefix = name ? camelize(name) + '.' : '';
-      const messages = this.$vantMessages[this.$vantLang];
-
-      return (path, ...args) => {
-        const message = get(messages, prefix + path) || get(messages, path);
-        return typeof message === 'function' ? message.apply(null, args) : message;
-      };
-    }
-  }
-};
-
 const proto = Vue.prototype;
 const defaultLang = 'zh-CN';
 const locale = {
-  i18n,
-
   init() {
     Vue.util.defineReactive(proto, '$vantLang', defaultLang);
     Vue.util.defineReactive(proto, '$vantMessages', { [defaultLang]: defaultMessages });
@@ -41,4 +22,3 @@ const locale = {
 
 locale.init();
 export default locale;
-export { i18n };
diff --git a/packages/mixins/i18n.js b/packages/mixins/i18n.js
new file mode 100644
index 000000000..63cb675e2
--- /dev/null
+++ b/packages/mixins/i18n.js
@@ -0,0 +1,17 @@
+// component mixin
+import { get, camelize } from '../utils';
+
+export default {
+  computed: {
+    $t() {
+      const { name } = this.$options;
+      const prefix = name ? camelize(name) + '.' : '';
+      const messages = this.$vantMessages[this.$vantLang];
+
+      return (path, ...args) => {
+        const message = get(messages, prefix + path) || get(messages, path);
+        return typeof message === 'function' ? message.apply(null, args) : message;
+      };
+    }
+  }
+};
diff --git a/packages/nav-bar/index.vue b/packages/nav-bar/index.vue
index 505024ab8..36329689e 100644
--- a/packages/nav-bar/index.vue
+++ b/packages/nav-bar/index.vue
@@ -18,15 +18,11 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-nav-bar',
 
-  components: {
-    Icon
-  },
-
   props: {
     title: String,
     leftText: String,
@@ -34,5 +30,5 @@ export default {
     leftArrow: Boolean,
     fixed: Boolean
   }
-};
+});
 </script>
diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue
index a6b65f6a1..7824307e5 100644
--- a/packages/notice-bar/index.vue
+++ b/packages/notice-bar/index.vue
@@ -26,15 +26,11 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-notice-bar',
 
-  components: {
-    Icon
-  },
-
   props: {
     text: String,
     mode: String,
@@ -108,5 +104,5 @@ export default {
       });
     }
   }
-};
+});
 </script>
diff --git a/packages/number-keyboard/index.vue b/packages/number-keyboard/index.vue
index 86398d1a7..03b647b3b 100644
--- a/packages/number-keyboard/index.vue
+++ b/packages/number-keyboard/index.vue
@@ -28,7 +28,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-number-keyboard',
 
   props: {
@@ -131,5 +133,5 @@ export default {
       this.$emit(this.show ? 'show' : 'hide');
     }
   }
-};
+});
 </script>
diff --git a/packages/pagination/index.vue b/packages/pagination/index.vue
index 03f30510e..bbbd64fb8 100644
--- a/packages/pagination/index.vue
+++ b/packages/pagination/index.vue
@@ -31,13 +31,11 @@
 </template>
 
 <script>
-import { i18n } from '../locale';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-pagination',
 
-  mixins: [i18n],
-
   props: {
     value: Number,
     prevText: String,
@@ -144,5 +142,5 @@ export default {
       return { number, text, active };
     }
   }
-};
+});
 </script>
\ No newline at end of file
diff --git a/packages/panel/index.vue b/packages/panel/index.vue
index 08977da36..9f8baebfc 100644
--- a/packages/panel/index.vue
+++ b/packages/panel/index.vue
@@ -17,12 +17,14 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-panel',
   props: {
     desc: String,
     title: String,
     status: String
   }
-};
+});
 </script>
diff --git a/packages/password-input/index.vue b/packages/password-input/index.vue
index 2f16aed3a..ae9e9aee8 100644
--- a/packages/password-input/index.vue
+++ b/packages/password-input/index.vue
@@ -14,7 +14,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-password-input',
 
   props: {
@@ -39,5 +41,5 @@ export default {
       return arr;
     }
   }
-};
+});
 </script>
diff --git a/packages/picker/PickerColumn.vue b/packages/picker/PickerColumn.vue
index dde262cb5..2e5d3d7d9 100644
--- a/packages/picker/PickerColumn.vue
+++ b/packages/picker/PickerColumn.vue
@@ -23,10 +23,12 @@
 </template>
 
 <script>
+import { create } from '../utils';
+
 const DEFAULT_DURATION = 200;
 const range = (num, arr) => Math.min(Math.max(num, arr[0]), arr[1]);
 
-export default {
+export default create({
   name: 'van-picker-column',
 
   props: {
@@ -175,5 +177,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/picker/index.vue b/packages/picker/index.vue
index 9087940fe..c2579626a 100644
--- a/packages/picker/index.vue
+++ b/packages/picker/index.vue
@@ -24,15 +24,13 @@
 </template>
 
 <script>
-import { i18n } from '../locale';
+import { create } from '../utils';
 import PickerColumn from './PickerColumn';
 import deepClone from '../utils/deep-clone';
 
-export default {
+export default create({
   name: 'van-picker',
 
-  mixins: [i18n],
-
   components: {
     PickerColumn
   },
@@ -156,5 +154,5 @@ export default {
       });
     }
   }
-};
+});
 </script>
diff --git a/packages/popup/index.vue b/packages/popup/index.vue
index d08dcb969..0a707d1aa 100644
--- a/packages/popup/index.vue
+++ b/packages/popup/index.vue
@@ -7,9 +7,10 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import Popup from '../mixins/popup';
 
-export default {
+export default create({
   name: 'van-popup',
 
   mixins: [Popup],
@@ -44,5 +45,5 @@ export default {
       this.open();
     }
   }
-};
+});
 </script>
diff --git a/packages/progress/index.vue b/packages/progress/index.vue
index 3c8464fbf..53051f46b 100644
--- a/packages/progress/index.vue
+++ b/packages/progress/index.vue
@@ -6,7 +6,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-progress',
 
   props: {
@@ -56,5 +58,5 @@ export default {
       };
     }
   }
-};
+});
 </script>
diff --git a/packages/pull-refresh/index.vue b/packages/pull-refresh/index.vue
index 5872fb3dc..db28a227f 100644
--- a/packages/pull-refresh/index.vue
+++ b/packages/pull-refresh/index.vue
@@ -27,15 +27,12 @@
 </template>
 
 <script>
-import Loading from '../loading';
+import { create } from '../utils';
 import scrollUtils from '../utils/scroll';
-import { i18n } from '../locale';
 
-export default {
+export default create({
   name: 'van-pull-refresh',
 
-  mixins: [i18n],
-
   props: {
     pullingText: String,
     loosingText: String,
@@ -54,10 +51,6 @@ export default {
     }
   },
 
-  components: {
-    Loading
-  },
-
   data() {
     return {
       status: 'normal',
@@ -171,5 +164,5 @@ export default {
       return distanceX > distanceY ? 'horizontal' : distanceX < distanceY ? 'vertical' : '';
     }
   }
-};
+});
 </script>
diff --git a/packages/radio-group/index.vue b/packages/radio-group/index.vue
index c35ea4065..6fbcacce3 100644
--- a/packages/radio-group/index.vue
+++ b/packages/radio-group/index.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-radio-group',
 
   props: {
@@ -18,5 +20,5 @@ export default {
       this.$emit('change', value);
     }
   }
-};
+});
 </script>
diff --git a/packages/radio/index.vue b/packages/radio/index.vue
index 333bb517b..3e75f4027 100644
--- a/packages/radio/index.vue
+++ b/packages/radio/index.vue
@@ -20,16 +20,12 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 import findParent from '../mixins/find-parent';
 
-export default {
+export default create({
   name: 'van-radio',
 
-  components: {
-    Icon
-  },
-
   mixins: [findParent],
 
   props: {
@@ -76,5 +72,5 @@ export default {
       this.$emit('click');
     }
   }
-};
+});
 </script>
diff --git a/packages/row/index.vue b/packages/row/index.vue
index 747bf6016..1e30afd69 100644
--- a/packages/row/index.vue
+++ b/packages/row/index.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-row',
 
   props: {
@@ -23,5 +25,5 @@ export default {
         : {};
     }
   }
-};
+});
 </script>
diff --git a/packages/search/index.vue b/packages/search/index.vue
index 65fde29f0..b1b22c891 100644
--- a/packages/search/index.vue
+++ b/packages/search/index.vue
@@ -26,19 +26,12 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 import Clickoutside from '../utils/clickoutside';
-import { i18n } from '../locale';
 
-export default {
+export default create({
   name: 'van-search',
 
-  mixins: [i18n],
-
-  components: {
-    Icon
-  },
-
   props: {
     value: String,
     showAction: Boolean,
@@ -103,5 +96,5 @@ export default {
       this.focusStatus = false;
     }
   }
-};
+});
 </script>
diff --git a/packages/sku/containers/SkuContainer.vue b/packages/sku/containers/SkuContainer.vue
index 8163b6d53..169a98a42 100644
--- a/packages/sku/containers/SkuContainer.vue
+++ b/packages/sku/containers/SkuContainer.vue
@@ -82,10 +82,11 @@ import SkuMessages from '../components/SkuMessages';
 import SkuActions from '../components/SkuActions';
 import { isAllSelected, getSkuComb, getSelectedSkuValues } from '../utils/skuHelper';
 import { LIMIT_TYPE, DEFAULT_STEPPER_TITLE } from '../constants';
+import { create } from '../../utils';
 
 const { QUOTA_LIMIT } = LIMIT_TYPE;
 
-export default {
+export default create({
   name: 'van-sku',
 
   components: {
@@ -103,9 +104,7 @@ export default {
     goodsId: [Number, String],
     initialSku: {
       type: Object,
-      default() {
-        return {};
-      }
+      default: () => ({})
     },
     sku: Object,
     quota: {
@@ -134,9 +133,7 @@ export default {
     disableStepperInput: Boolean,
     messagePlaceholderMap: {
       type: Object,
-      default() {
-        return {};
-      }
+      default: () => ({})
     },
     value: Boolean
   },
@@ -326,5 +323,5 @@ export default {
       });
     }
   }
-};
+});
 </script>
diff --git a/packages/step/index.vue b/packages/step/index.vue
index 3e1577d18..4c5f42e25 100644
--- a/packages/step/index.vue
+++ b/packages/step/index.vue
@@ -2,7 +2,7 @@
   <div class="van-step van-hairline" :class="[`van-step--${$parent.direction}`, { [`van-step--${status}`]: status }]">
     <div class="van-step__circle-container">
       <i class="van-step__circle" v-if="status !== 'process'" />
-      <i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else />
+      <icon v-else name="checked" :style="{ color: $parent.activeColor }" />
     </div>
     <div class="van-step__title" :style="titleStyle">
       <slot></slot>
@@ -12,7 +12,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-step',
 
   beforeCreate() {
@@ -37,5 +39,5 @@ export default {
       } : {};
     }
   }
-};
+});
 </script>
diff --git a/packages/stepper/index.vue b/packages/stepper/index.vue
index eaa34a265..adce68285 100644
--- a/packages/stepper/index.vue
+++ b/packages/stepper/index.vue
@@ -23,7 +23,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-stepper',
 
   props: {
@@ -119,5 +121,5 @@ export default {
       this.$emit(type);
     }
   }
-};
+});
 </script>
diff --git a/packages/steps/index.vue b/packages/steps/index.vue
index 67efa73e8..a5595e8da 100644
--- a/packages/steps/index.vue
+++ b/packages/steps/index.vue
@@ -19,15 +19,11 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-steps',
 
-  components: {
-    Icon
-  },
-
   props: {
     icon: String,
     title: String,
@@ -49,5 +45,5 @@ export default {
       steps: []
     };
   }
-};
+});
 </script>
diff --git a/packages/submit-bar/index.vue b/packages/submit-bar/index.vue
index 72276b58f..d52d7f6e4 100644
--- a/packages/submit-bar/index.vue
+++ b/packages/submit-bar/index.vue
@@ -21,13 +21,11 @@
 
 <script>
 import VanButton from '../button';
-import { i18n } from '../locale';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-submit-bar',
 
-  mixins: [i18n],
-
   components: {
     VanButton
   },
@@ -66,5 +64,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/swipe-item/index.vue b/packages/swipe-item/index.vue
index 3cc80f0bd..f2b80d43e 100644
--- a/packages/swipe-item/index.vue
+++ b/packages/swipe-item/index.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-swipe-item',
 
   data() {
@@ -30,5 +32,5 @@ export default {
   destroyed() {
     this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
   }
-};
+});
 </script>
diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue
index f1da7718f..d9b2cd08d 100644
--- a/packages/swipe/index.vue
+++ b/packages/swipe/index.vue
@@ -22,7 +22,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-swipe',
 
   props: {
@@ -191,5 +193,5 @@ export default {
       return Math.min(Math.max(num, arr[0]), arr[1]);
     }
   }
-};
+});
 </script>
diff --git a/packages/switch-cell/index.vue b/packages/switch-cell/index.vue
index 05c14ecab..0cbd1c660 100644
--- a/packages/switch-cell/index.vue
+++ b/packages/switch-cell/index.vue
@@ -7,8 +7,9 @@
 <script>
 import Cell from '../cell';
 import VanSwitch from '../switch';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-switch-cell',
 
   components: {
@@ -28,5 +29,5 @@ export default {
       this.$emit('change', this.value);
     }
   }
-};
+});
 </script>
diff --git a/packages/switch/index.vue b/packages/switch/index.vue
index 6e21b15ee..d59908f86 100644
--- a/packages/switch/index.vue
+++ b/packages/switch/index.vue
@@ -8,15 +8,11 @@
 </template>
 
 <script>
-import Loading from '../loading';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-switch',
 
-  components: {
-    Loading
-  },
-
   props: {
     value: Boolean,
     loading: Boolean,
@@ -31,5 +27,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/tab/index.vue b/packages/tab/index.vue
index 9a6387585..3e1d4f22b 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.vue
@@ -5,9 +5,10 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import findParent from '../mixins/find-parent';
 
-export default {
+export default create({
   name: 'van-tab',
 
   mixins: [findParent],
@@ -34,5 +35,5 @@ export default {
   destroyed() {
     this.parentGroup.tabs.splice(this.index, 1);
   }
-};
+});
 </script>
diff --git a/packages/tabbar-item/index.vue b/packages/tabbar-item/index.vue
index 669680922..f5c212e67 100644
--- a/packages/tabbar-item/index.vue
+++ b/packages/tabbar-item/index.vue
@@ -13,18 +13,14 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 import RouterLink from '../mixins/router-link';
 
-export default {
+export default create({
   name: 'van-tabbar-item',
 
   mixins: [RouterLink],
 
-  components: {
-    Icon
-  },
-
   props: {
     icon: String,
     dot: Boolean,
@@ -51,5 +47,5 @@ export default {
       this.routerLink();
     }
   }
-};
+});
 </script>
diff --git a/packages/tabbar/index.vue b/packages/tabbar/index.vue
index f573bc4b9..64fe97906 100644
--- a/packages/tabbar/index.vue
+++ b/packages/tabbar/index.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-tabbar',
 
   data() {
@@ -42,5 +44,5 @@ export default {
       this.$emit('change', active);
     }
   }
-};
+});
 </script>
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index 0ee3520a7..fea568dc5 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -28,10 +28,11 @@
 </template>
 
 <script>
+import { create } from '../utils';
 import { raf } from '../utils/raf';
 import scrollUtils from '../utils/scroll';
 
-export default {
+export default create({
   name: 'van-tabs',
 
   props: {
@@ -200,5 +201,5 @@ export default {
       animate();
     }
   }
-};
+});
 </script>
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index 2f5b5f9a1..3d19f2b55 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -5,12 +5,14 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-tag',
   props: {
     type: String,
     mark: Boolean,
     plain: Boolean
   }
-};
+});
 </script>
diff --git a/packages/toast/toast.vue b/packages/toast/toast.vue
index 07919a098..e1a705834 100644
--- a/packages/toast/toast.vue
+++ b/packages/toast/toast.vue
@@ -19,19 +19,13 @@
 </template>
 
 <script>
-import Icon from '../icon';
-import Loading from '../loading';
+import { create } from '../utils';
 
 const DEFAULT_STYLE_LIST = ['success', 'fail', 'loading'];
 
-export default {
+export default create({
   name: 'van-toast',
 
-  components: {
-    Icon,
-    Loading
-  },
-
   props: {
     mask: Boolean,
     message: [String, Number],
@@ -57,5 +51,5 @@ export default {
       return DEFAULT_STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;
     }
   }
-};
+});
 </script>
diff --git a/packages/tree-select/index.vue b/packages/tree-select/index.vue
index b0d1bfcd2..774d8f8c7 100644
--- a/packages/tree-select/index.vue
+++ b/packages/tree-select/index.vue
@@ -28,15 +28,11 @@
 </template>
 
 <script>
-import Icon from '../icon';
+import { create } from '../utils';
 
-export default {
+export default create({
   name: 'van-tree-select',
 
-  components: {
-    Icon
-  },
-
   props: {
     items: {
       type: Array,
@@ -75,5 +71,5 @@ export default {
       this.$emit('itemclick', { ...data });
     }
   }
-};
+});
 </script>
diff --git a/packages/uploader/index.vue b/packages/uploader/index.vue
index cd38aeb48..7f623204c 100644
--- a/packages/uploader/index.vue
+++ b/packages/uploader/index.vue
@@ -13,7 +13,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../utils';
+
+export default create({
   name: 'van-uploader',
 
   props: {
@@ -53,5 +55,5 @@ export default {
       }
     }
   }
-};
+});
 </script>
diff --git a/packages/utils/create.js b/packages/utils/create.js
new file mode 100644
index 000000000..1bd3241cb
--- /dev/null
+++ b/packages/utils/create.js
@@ -0,0 +1,19 @@
+/**
+ * Create a component with common options
+ */
+import '../locale';
+import Icon from '../icon';
+import i18n from '../mixins/i18n';
+import install from './install';
+import Loading from '../loading';
+
+export default function(sfc) {
+  sfc.mixins = sfc.mixins || [];
+  sfc.components = sfc.components || {};
+  sfc.install = sfc.install || install;
+  sfc.mixins.push(i18n);
+  sfc.components.icon = Icon;
+  sfc.components.loading = Loading;
+
+  return sfc;
+};
diff --git a/packages/utils/deep-assign.js b/packages/utils/deep-assign.js
index bf3dd1051..133cd2c00 100644
--- a/packages/utils/deep-assign.js
+++ b/packages/utils/deep-assign.js
@@ -1,4 +1,6 @@
-const hasOwnProperty = Object.prototype.hasOwnProperty;
+import { isDef } from './';
+
+const { hasOwnProperty } = Object.prototype;
 
 function isObj(x) {
   const type = typeof x;
@@ -8,12 +10,7 @@ function isObj(x) {
 function assignKey(to, from, key) {
   const val = from[key];
 
-  if (
-    val === undefined ||
-    val === null ||
-    (hasOwnProperty.call(to, key) &&
-      (to[key] === undefined || to[key] === null))
-  ) {
+  if (!isDef(val) || (hasOwnProperty.call(to, key) && !isDef(to[key]))) {
     return;
   }
 
diff --git a/packages/utils/index.js b/packages/utils/index.js
index 1c6488e66..c8cbe5847 100644
--- a/packages/utils/index.js
+++ b/packages/utils/index.js
@@ -1,12 +1,13 @@
 import Vue from 'vue';
+import create from './create';
 
-export const isServer = Vue.prototype.$isServer;
+const isServer = Vue.prototype.$isServer;
 
-export function isDef(value) {
+function isDef(value) {
   return value !== undefined && value !== null;
 }
 
-export function get(object, path) {
+function get(object, path) {
   const keys = path.split('.');
   let result = object;
 
@@ -18,11 +19,20 @@ export function get(object, path) {
 }
 
 const camelizeRE = /-(\w)/g;
-export function camelize(str) {
+function camelize(str) {
   return str.replace(camelizeRE, (_, c) => c.toUpperCase());
 }
 
-export function isAndroid() {
+function isAndroid() {
   /* istanbul ignore next */
   return isServer ? false : /android/.test(navigator.userAgent.toLowerCase());
 }
+
+export {
+  get,
+  isDef,
+  create,
+  isServer,
+  camelize,
+  isAndroid
+};
diff --git a/packages/utils/install.js b/packages/utils/install.js
new file mode 100644
index 000000000..11f33a1c9
--- /dev/null
+++ b/packages/utils/install.js
@@ -0,0 +1,6 @@
+/**
+ * Install function to register a component
+ */
+export default function(Vue) {
+  Vue.component(this.name, this);
+}
diff --git a/yarn.lock b/yarn.lock
index 7980d83f9..81e9f74d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -325,12 +325,12 @@ autoprefixer@^6.3.1:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
-autoprefixer@^7.2.1:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.1.tgz#906b1447a0e6a9e13b371f7909bc4e36da5a5a79"
+autoprefixer@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.2.tgz#082293b964be00602efacc59aa4aa7df5158bb6e"
   dependencies:
-    browserslist "^2.9.1"
-    caniuse-lite "^1.0.30000777"
+    browserslist "^2.10.0"
+    caniuse-lite "^1.0.30000780"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
     postcss "^6.0.14"
@@ -523,9 +523,9 @@ babel-helper-replace-supers@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helper-vue-jsx-merge-props@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz#aceb1c373588279e2755ea1cfd35c22394fd33f8"
+babel-helper-vue-jsx-merge-props@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
 
 babel-helpers@^6.24.1:
   version "6.24.1"
@@ -1109,13 +1109,20 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^2.1.2, browserslist@^2.9.1:
+browserslist@^2.1.2:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.9.1.tgz#b72d3982ab01b5cd24da62ff6d45573886aff275"
   dependencies:
     caniuse-lite "^1.0.30000770"
     electron-to-chromium "^1.3.27"
 
+browserslist@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.10.0.tgz#bac5ee1cc69ca9d96403ffb8a3abdc5b6aed6346"
+  dependencies:
+    caniuse-lite "^1.0.30000780"
+    electron-to-chromium "^1.3.28"
+
 buffer-indexof@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
@@ -1218,9 +1225,9 @@ caniuse-lite@^1.0.30000770:
   version "1.0.30000775"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000775.tgz#74d27feddc47f3c84cfbcb130c3092a35ebc2de2"
 
-caniuse-lite@^1.0.30000777:
-  version "1.0.30000778"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000778.tgz#f1e7cb8b13b1f6744402291d75f0bcd4c3160369"
+caniuse-lite@^1.0.30000780:
+  version "1.0.30000782"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000782.tgz#5b82b8c385f25348745c471ca51320afb1b7f254"
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -2179,6 +2186,10 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.27:
   version "1.3.27"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz#78ecb8a399066187bb374eede35d9c70565a803d"
 
+electron-to-chromium@^1.3.28:
+  version "1.3.28"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.28.tgz#8dd4e6458086644e9f9f0a1cf32e2a1f9dffd9ee"
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -7827,9 +7838,9 @@ webpack-dev-middleware@^1.11.0, webpack-dev-middleware@^1.12.0:
     range-parser "^1.0.3"
     time-stamp "^2.0.0"
 
-webpack-dev-server@^2.9.4:
-  version "2.9.5"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.5.tgz#79336fba0087a66ae491f4869f6545775b18daa8"
+webpack-dev-server@^2.9.7:
+  version "2.9.7"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.7.tgz#100ad6a14775478924d417ca6dcfb9d52a98faed"
   dependencies:
     ansi-html "0.0.7"
     array-includes "^3.0.3"
@@ -7872,9 +7883,9 @@ webpack-sources@^1.0.1:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^3.9.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.9.1.tgz#9a60aa544ed5d4d454c069e3f521aa007e02643c"
+webpack@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.10.0.tgz#5291b875078cf2abf42bdd23afe3f8f96c17d725"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"