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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

packages/icon/index.vue

@@ -5,7 +5,10 @@
 </template>
 
 <script>
+import install from '../utils/install';
+
 export default {
+  install,
   name: 'van-icon',
   props: {
     name: String

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>

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

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,

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

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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

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

packages/utils/install.js

@@ -0,0 +1,6 @@
+/**
+ * Install function to register a component
+ */
+export default function(Vue) {
+  Vue.component(this.name, this);
+}