[Improvement] Support Vue.use to register a component (#401)

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)

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

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);

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;

docs/markdown/en-US/actionsheet.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Actionsheet } from 'vant';
 
-Vue.component(Actionsheet.name, Actionsheet);
+Vue.use(Actionsheet);
 ```
 
 ### Usage

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

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

docs/markdown/en-US/area.md

@@ -5,7 +5,7 @@
 ``` javascript
 import { Area } from 'vant';
 
-Vue.component(Area.name, Area);
+Vue.use(Area);
 ```
 
 ### Usage

docs/markdown/en-US/badge.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Badge } from 'vant';
 
-Vue.component(Badge.name, Badge);
+Vue.use(Badge);
 ```
 
 ### Usage

docs/markdown/en-US/button.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Button } from 'vant';
 
-Vue.component(Button.name, Button);
+Vue.use(Button);
 ```
 
 ### Usage

docs/markdown/en-US/card.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Card } from 'vant';
 
-Vue.component(Card.name, Card);
+Vue.use(Card);
 ```
 
 ### Usage

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

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

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

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

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

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

docs/markdown/en-US/field.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Field } from 'vant';
 
-Vue.component(Field.name, Field);
+Vue.use(Field);
 ```
 
 ### Usage

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

docs/markdown/en-US/icon.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Icon } from 'vant';
 
-Vue.component(Icon.name, Icon);
+Vue.use(Icon);
 ```
 
 ### Usage

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

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

docs/markdown/en-US/loading.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Loading } from 'vant';
 
-Vue.component(Loading.name, Loading);
+Vue.use(Loading);
 ```
 
 ### Usage

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

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

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

docs/markdown/en-US/pagination.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Pagination } from 'vant';
 
-Vue.component(Pagination.name, Pagination);
+Vue.use(Pagination);
 ```
 
 ### Usage

docs/markdown/en-US/panel.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Panel } from 'vant';
 
-Vue.component(Panel.name, Panel);
+Vue.use(Panel);
 ```
 
 ### Usage

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

docs/markdown/en-US/picker.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Picker } from 'vant';
 
-Vue.component(Picker.name, Picker);
+Vue.use(Picker);
 ```
 
 ### Usage

docs/markdown/en-US/popup.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Popup } from 'vant';
 
-Vue.component(Popup.name, Popup);
+Vue.use(Popup);
 ```
 
 ### Usage

docs/markdown/en-US/progress.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Progress } from 'vant';
 
-Vue.component(Progress.name, Progress);
+Vue.use(Progress);
 ```
 
 ### Usage

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

docs/markdown/en-US/radio.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Radio } from 'vant';
 
-Vue.component(Radio.name, Radio);
+Vue.use(Radio);
 ```
 
 ### Usage

docs/markdown/en-US/search.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Search } from 'vant';
 
-Vue.component(Search.name, Search);
+Vue.use(Search);
 ```
 
 ### Usage

docs/markdown/en-US/sku.md

@@ -4,7 +4,7 @@
 ```javascript
 import { Sku } from 'vant';
 
-Vue.component(Sku.name, Sku);
+Vue.use(Sku);
 ```
 
 ### Usage

docs/markdown/en-US/stepper.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Stepper } from 'vant';
 
-Vue.component(Stepper.name, Stepper);
+Vue.use(Stepper);
 ```
 
 ### Usage

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

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

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

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

docs/markdown/en-US/switch.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Switch } from 'vant';
 
-Vue.component(Switch.name, Switch);
+Vue.use(Switch);
 ```
 
 ### Usage

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

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

docs/markdown/en-US/tag.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Tag } from 'vant';
 
-Vue.component(Tag.name, Tag);
+Vue.use(Tag);
 ```
 
 ### Usage

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
 [

docs/markdown/en-US/uploader.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Uploader } from 'vant';
 
-Vue.component(Uploader.name, Uploader);
+Vue.use(Uploader);
 ```
 
 ### Usage

docs/markdown/zh-CN/actionsheet.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Actionsheet } from 'vant';
 
-Vue.component(Actionsheet.name, Actionsheet);
+Vue.use(Actionsheet);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/address-edit.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { AddressEdit } from 'vant';
 
-Vue.component(AddressEdit.name, AddressEdit);
+Vue.use(AddressEdit);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/address-list.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { AddressList } from 'vant';
 
-Vue.component(AddressList.name, AddressList);
+Vue.use(AddressList);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/area.md

@@ -5,7 +5,7 @@
 ``` javascript
 import { Area } from 'vant';
 
-Vue.component(Area.name, Area);
+Vue.use(Area);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/badge.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Badge } from 'vant';
 
-Vue.component(Badge.name, Badge);
+Vue.use(Badge);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/button.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Button } from 'vant';
 
-Vue.component(Button.name, Button);
+Vue.use(Button);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/card.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Card } from 'vant';
 
-Vue.component(Card.name, Card);
+Vue.use(Card);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/cell-swipe.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { CellSwipe } from 'vant';
 
-Vue.component(CellSwipe.name, CellSwipe);
+Vue.use(CellSwipe);
 ```
 
 ### 代码演示

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

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

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

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

docs/markdown/zh-CN/datetime-picker.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { DatetimePicker } from 'vant';
 
-Vue.component(DatetimePicker.name, DatetimePicker);
+Vue.use(DatetimePicker);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/field.md

@@ -6,7 +6,7 @@
 ``` javascript
 import { Field } from 'vant';
 
-Vue.component(Field.name, Field);
+Vue.use(Field);
 ```
 
 ### 代码演示

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

docs/markdown/zh-CN/icon.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Icon } from 'vant';
 
-Vue.component(Icon.name, Icon);
+Vue.use(Icon);
 ```
 
 ### 代码演示

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

docs/markdown/zh-CN/loading.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Loading } from 'vant';
 
-Vue.component(Loading.name, Loading);
+Vue.use(Loading);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/nav-bar.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { NavBar } from 'vant';
 
-Vue.component(NavBar.name, NavBar);
+Vue.use(NavBar);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/notice-bar.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { NoticeBar } from 'vant';
 
-Vue.component(NoticeBar.name, NoticeBar);
+Vue.use(NoticeBar);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/number-keyboard.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { NumberKeyboard } from 'vant';
 
-Vue.component(NumberKeyboard.name, NumberKeyboard);
+Vue.use(NumberKeyboard);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/pagination.md

@@ -5,7 +5,7 @@
 ``` javascript
 import { Pagination } from 'vant';
 
-Vue.component(Pagination.name, Pagination);
+Vue.use(Pagination);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/panel.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Panel } from 'vant';
 
-Vue.component(Panel.name, Panel);
+Vue.use(Panel);
 ```
 
 ### 代码演示

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

docs/markdown/zh-CN/picker.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Picker } from 'vant';
 
-Vue.component(Picker.name, Picker);
+Vue.use(Picker);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/popup.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Popup } from 'vant';
 
-Vue.component(Popup.name, Popup);
+Vue.use(Popup);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/progress.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Progress } from 'vant';
 
-Vue.component(Progress.name, Progress);
+Vue.use(Progress);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/pull-refresh.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { PullRefresh } from 'vant';
 
-Vue.component(PullRefresh.name, PullRefresh);
+Vue.use(PullRefresh);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/radio.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Radio } from 'vant';
 
-Vue.component(Radio.name, Radio);
+Vue.use(Radio);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/search.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Search } from 'vant';
 
-Vue.component(Search.name, Search);
+Vue.use(Search);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/sku.md

@@ -4,7 +4,7 @@
 ```javascript
 import { Sku } from 'vant';
 
-Vue.component(Sku.name, Sku);
+Vue.use(Sku);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/stepper.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Stepper } from 'vant';
 
-Vue.component(Stepper.name, Stepper);
+Vue.use(Stepper);
 ```
 
 ### 代码演示

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

docs/markdown/zh-CN/submit-bar.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { SubmitBar } from 'vant';
 
-Vue.component(SubmitBar.name, SubmitBar);
+Vue.use(SubmitBar);
 ```
 
 ### 代码演示

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

docs/markdown/zh-CN/switch-cell.md

@@ -6,7 +6,7 @@
 ``` javascript
 import { SwitchCell } from 'vant';
 
-Vue.component(SwitchCell.name, SwitchCell);
+Vue.use(SwitchCell);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/switch.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Switch } from 'vant';
 
-Vue.component(Switch.name, Switch);
+Vue.use(Switch);
 ```
 
 ### 代码演示

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

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

docs/markdown/zh-CN/tag.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Tag } from 'vant';
 
-Vue.component(Tag.name, Tag);
+Vue.use(Tag);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/tree-select.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { TreeSelect } from 'vant';
 
-Vue.component(TreeSelect.name, TreeSelect);
+Vue.use(TreeSelect);
 ```
 
 ### 代码演示

docs/markdown/zh-CN/uploader.md

@@ -4,7 +4,7 @@
 ``` javascript
 import { Uploader } from 'vant';
 
-Vue.component(Uploader.name, Uploader);
+Vue.use(Uploader);
 ```
 
 ### 代码演示

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: ''

docs/src/doc.config.js

@@ -30,10 +30,6 @@ module.exports = {
                 title: '快速上手',
                 noExample: true
               },
-              {
-                title: '业务组件',
-                link: '/zanui/captain'
-              },
               {
                 path: '/changelog',
                 title: '更新日志',

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"
   }
 }

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>

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>

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>

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>

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>

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>

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>

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>