diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
index 42cfa4ed8..eebeb5aca 100644
--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@@ -3,7 +3,7 @@
     <div class="van-actionsheet" :class="{ 'van-actionsheet--withtitle': title }" v-show="value">
       <div class="van-actionsheet__header van-hairline--top-bottom" v-if="title">
         <div v-text="title" />
-        <van-icon name="close" @click.stop="$emit('input', false)" />
+        <icon name="close" @click.stop="$emit('input', false)" />
       </div>
       <ul v-if="!title" class="van-actionsheet__list">
         <li
@@ -17,7 +17,7 @@
             <span class="van-actionsheet__name">{{ item.name }}</span>
             <span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
           </template>
-          <van-loading v-else class="van-actionsheet__loading" type="circle" />
+          <loading v-else class="van-actionsheet__loading" type="circle" />
         </li>
       </ul>
       <div
@@ -44,8 +44,8 @@ export default {
   mixins: [Popup],
 
   components: {
-    [Icon.name]: Icon,
-    [Loading.name]: Loading
+    Icon,
+    Loading
   },
 
   props: {
diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
index 94e2fd828..7406a5684 100644
--- a/packages/address-edit/Detail.vue
+++ b/packages/address-edit/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="root">
-    <van-field
+    <field
       :label="$t('label.address')"
       :placeholder="$t('placeholder.address')"
       maxlength="200"
@@ -16,23 +16,23 @@
     >
       <div slot="icon">
         <span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">{{ $t('complete') }}</span>
-        <van-icon v-else-if="showIcon" name="clear"  />
+        <icon v-else-if="showIcon" name="clear"  />
       </div>
-    </van-field>
+    </field>
 
-    <van-cell-group class="van-address-edit-detail__suggest-list" v-if="showSearchList">
-      <van-cell
+    <cell-group class="van-address-edit-detail__suggest-list" v-if="showSearchList">
+      <cell
         v-for="express in searchResult"
         :key="express.name + express.address"
         class="van-address-edit-detail__suggest-item"
         @click="onSuggestSelect(express)">
-        <van-icon name="location" class="van-address-edit-detail__location" />
+        <icon name="location" class="van-address-edit-detail__location" />
         <div class="van-address-edit-detail__item-info">
           <p class="van-address-edit-detail__title">{{ express.name }}</p>
           <p class="van-address-edit-detail__subtitle">{{ express.address }}</p>
         </div>
-      </van-cell>
-    </van-cell-group>
+      </cell>
+    </cell-group>
   </div>
 </template>
 
@@ -50,10 +50,10 @@ export default {
   mixins: [i18n],
 
   components: {
-    [Field.name]: Field,
-    [Icon.name]: Icon,
-    [Cell.name]: Cell,
-    [CellGroup.name]: CellGroup
+    Field,
+    Icon,
+    Cell,
+    CellGroup
   },
 
   props: {
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
index 6b2aeeef9..f81b85f8e 100644
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="van-address-edit">
-    <van-cell-group>
-      <van-field
+    <cell-group>
+      <field
         maxlength="15"
         :placeholder="$t('placeholder.name')"
         :label="$t('label.name', computedAddressText)"
@@ -9,7 +9,7 @@
         :error="errorInfo.name"
         @focus="onFocus('name')"
       />
-      <van-field
+      <field
         type="tel"
         :label="$t('label.tel')"
         :placeholder="$t('placeholder.tel')"
@@ -17,12 +17,12 @@
         :error="errorInfo.tel"
         @focus="onFocus('tel')"
       />
-      <van-cell class="van-address-edit__area" :title="$t('areaTitle')" @click="showAreaSelect = true">
+      <cell class="van-address-edit__area" :title="$t('areaTitle')" @click="showAreaSelect = true">
         <span>{{ currentInfo.province || $t('placeholder.province') }}</span>
         <span>{{ currentInfo.city || $t('placeholder.city') }}</span>
         <span>{{ currentInfo.county || $t('placeholder.county') }}</span>
-      </van-cell>
-      <van-address-edit-detail
+      </cell>
+      <address-edit-detail
         :value="currentInfo.address_detail"
         :isError="errorInfo.address_detail"
         :showSearchResult="showSearchResult"
@@ -31,7 +31,7 @@
         @blur="onDetailBlur"
         @input="onChangeDetail"
       />
-      <van-field
+      <field
         v-if="showPostal"
         v-show="!hideBottomFields"
         type="tel"
@@ -42,14 +42,14 @@
         class="van-hairline--top"
         :error="errorInfo.postal_code"
         @focus="onFocus('postal_code')">
-      </van-field>
-      <van-switch-cell 
+      </field>
+      <switch-cell 
         v-if="showSetDefault"
         v-show="!hideBottomFields"
         v-model="currentInfo.is_default"
         :title="$t('defaultAddress', computedAddressText)"
       />
-    </van-cell-group>
+    </cell-group>
     <div v-show="!hideBottomFields" class="van-address-edit__buttons">
       <van-button block :loading="isSaving" @click="onSaveAddress" type="primary">
         {{ $t('save') }}
@@ -58,14 +58,14 @@
         {{ $t('deleteAddress', computedAddressText) }}
       </van-button>
     </div>
-    <van-popup v-model="showAreaSelect" position="bottom">
+    <popup v-model="showAreaSelect" position="bottom">
       <van-area
         :value="currentInfo.area_code"
         :areaList="areaList"
         @confirm="onAreaConfirm"
         @cancel="showAreaSelect = false"
       />
-    </van-popup>
+    </popup>
   </div>
 </template>
 
@@ -73,12 +73,12 @@
 import Field from '../field';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
-import Button from '../button';
+import VanButton from '../button';
 import Popup from '../popup';
 import Toast from '../toast';
 import Dialog from '../dialog';
-import Area from '../area';
-import Detail from './Detail';
+import VanArea from '../area';
+import AddressEditDetail from './Detail';
 import SwitchCell from '../switch-cell';
 import validateMobile from '../utils/validate/mobile';
 import { i18n } from '../locale';
@@ -89,14 +89,14 @@ export default {
   mixins: [i18n],
 
   components: {
-    [Field.name]: Field,
-    [Cell.name]: Cell,
-    [CellGroup.name]: CellGroup,
-    [SwitchCell.name]: SwitchCell,
-    [Button.name]: Button,
-    [Popup.name]: Popup,
-    [Area.name]: Area,
-    [Detail.name]: Detail
+    Field,
+    Cell,
+    CellGroup,
+    SwitchCell,
+    VanButton,
+    Popup,
+    VanArea,
+    AddressEditDetail
   },
 
   props: {
diff --git a/packages/address-list/index.vue b/packages/address-list/index.vue
index 7ce04b9b1..02a44861f 100644
--- a/packages/address-list/index.vue
+++ b/packages/address-list/index.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="van-address-list">
-    <van-radio-group :value="value" @input="$emit('input', $event)" class="van-address-list__group">
-      <van-cell-group>
-        <van-cell v-for="(item, index) in list" :key="item.id">
-          <van-radio :name="item.id" @click="$emit('select', item, index)">
+    <radio-group :value="value" @input="$emit('input', $event)" class="van-address-list__group">
+      <cell-group>
+        <cell v-for="(item, index) in list" :key="item.id">
+          <radio :name="item.id" @click="$emit('select', item, index)">
             <div class="van-address-list__name">{{ item.name }}，{{ item.tel }}</div>
             <div class="van-address-list__address">收货地址：{{ item.address }}</div>
-          </van-radio>
-          <van-icon name="edit" class="van-address-list__edit" @click="$emit('edit', item, index)" />
-        </van-cell>
-      </van-cell-group>
-    </van-radio-group>
-    <van-cell icon="add" class="van-address-list__add van-hairline--top" @click="$emit('add')" :title="addButtonText" isLink />
+          </radio>
+          <icon name="edit" class="van-address-list__edit" @click="$emit('edit', item, index)" />
+        </cell>
+      </cell-group>
+    </radio-group>
+    <cell icon="add" class="van-address-list__add van-hairline--top" @click="$emit('add')" :title="addButtonText" isLink />
   </div>
 </template>
 
@@ -26,11 +26,11 @@ export default {
   name: 'van-address-list',
 
   components: {
-    [Icon.name]: Icon,
-    [Cell.name]: Cell,
-    [Radio.name]: Radio,
-    [CellGroup.name]: CellGroup,
-    [RadioGroup.name]: RadioGroup
+    Icon,
+    Cell,
+    Radio,
+    CellGroup,
+    RadioGroup
   },
 
   props: {
diff --git a/packages/area/index.vue b/packages/area/index.vue
index 121edc00d..a9f0c1097 100644
--- a/packages/area/index.vue
+++ b/packages/area/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="van-area">
-    <van-picker
+    <picker
       ref="picker"
       showToolbar
       valueKey="name"
@@ -38,7 +38,7 @@ export default {
   name: 'van-area',
 
   components: {
-    [Picker.name]: Picker
+    Picker
   },
 
   props: {
diff --git a/packages/button/index.vue b/packages/button/index.vue
index 65fe2dec1..c596ad041 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -17,7 +17,7 @@
     ]"
       @click="onClick"
     >
-    <van-loading
+    <loading
       v-if="loading"
       class="van-button__icon-loading"
       type="circle"
@@ -36,7 +36,7 @@ export default {
   name: 'van-button',
 
   components: {
-    [Loading.name]: Loading
+    Loading
   },
 
   props: {
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index fda6f7b89..8832a3b12 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -2,7 +2,7 @@
   <div class="van-cell van-hairline" :class="{ 'van-cell--required': required }" @click="onClick">
     <div class="van-cell__title" v-if="$slots.title || title">
       <slot name="icon">
-        <van-icon v-if="icon" :name="icon" />
+        <icon v-if="icon" :name="icon" />
       </slot>
       <slot name="title">
         <span class="van-cell__text" v-text="title" />
@@ -22,7 +22,7 @@
       </slot>
     </div>
     <slot name="right-icon">
-      <van-icon name="arrow" class="van-cell__right-icon" v-if="isLink" />
+      <icon name="arrow" class="van-cell__right-icon" v-if="isLink" />
     </slot>
     <slot name="extra" />
   </div>
@@ -38,7 +38,7 @@ export default {
   mixins: [RouterLink],
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index 794902b44..2f95aad47 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -12,7 +12,7 @@
         class="van-checkbox__control"
         :disabled="isDisabled"
       />
-      <van-icon name="success" />
+      <icon name="success" />
     </span>
     <span class="van-checkbox__label" @click="onClickLabel">
       <slot></slot>
@@ -28,7 +28,7 @@ export default {
   name: 'van-checkbox',
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   mixins: [findParent],
diff --git a/packages/contact-card/index.vue b/packages/contact-card/index.vue
index 69f15f750..a52ec84e1 100644
--- a/packages/contact-card/index.vue
+++ b/packages/contact-card/index.vue
@@ -2,18 +2,18 @@
   <div class="van-contact-card" :class="`van-contact-card--${type}`" v-on="$listeners">
     <div class="van-contact-card__content">
       <template v-if="type === 'add'">
-        <van-icon class="van-contact-card__icon" name="add2" />
+        <icon class="van-contact-card__icon" name="add2" />
         <div class="van-contact-card__text">{{ addText || $t('addText') }}</div>
       </template>
       <template v-else-if="type === 'edit'">
-        <van-icon class="van-contact-card__icon" name="contact" />
+        <icon class="van-contact-card__icon" name="contact" />
         <div class="van-contact-card__text">
           <div>{{ $t('name') }}：{{ name }}</div>
           <div>{{ $t('tel') }}：{{ tel }}</div>
         </div>
       </template>
     </div>
-    <van-icon class="van-contact-card__arrow" name="arrow" />
+    <icon class="van-contact-card__arrow" name="arrow" />
   </div>
 </template>
 
@@ -27,7 +27,7 @@ export default {
   mixins: [i18n],
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {
diff --git a/packages/contact-edit/index.vue b/packages/contact-edit/index.vue
index 7f20df22b..ecbf90ac7 100644
--- a/packages/contact-edit/index.vue
+++ b/packages/contact-edit/index.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="van-contact-edit">
-    <van-cell-group>
-      <van-field
+    <cell-group>
+      <field
         v-model="currentInfo.name"
         maxlength="30"
         :label="$t('name')"
         :placeholder="$t('namePlaceholder')"
         :error="errorInfo.name"
         @focus="onFocus('name')">
-      </van-field>
-      <van-field
+      </field>
+      <field
         v-model="currentInfo.tel"
         type="tel"
         :label="$t('tel')"
         :placeholder="$t('telPlaceholder')"
         :error="errorInfo.tel"
         @focus="onFocus('tel')">
-      </van-field>
-    </van-cell-group>
+      </field>
+    </cell-group>
     <div class="van-contact-edit__buttons">
       <van-button block :loading="isSaving" @click="onSaveContact" type="primary">{{ $t('save') }}</van-button>
       <van-button block :loading="isDeleting" @click="onDeleteContact" v-if="isEdit">{{ $t('delete') }}</van-button>
@@ -27,7 +27,7 @@
 
 <script>
 import Field from '../field';
-import Button from '../button';
+import VanButton from '../button';
 import CellGroup from '../cell-group';
 import Dialog from '../dialog';
 import Toast from '../toast';
@@ -40,9 +40,9 @@ export default {
   mixins: [i18n],
 
   components: {
-    [Field.name]: Field,
-    [Button.name]: Button,
-    [CellGroup.name]: CellGroup
+    Field,
+    VanButton,
+    CellGroup
   },
 
   props: {
diff --git a/packages/contact-list/index.vue b/packages/contact-list/index.vue
index 427623441..9a4d3c853 100644
--- a/packages/contact-list/index.vue
+++ b/packages/contact-list/index.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="van-contact-list">
-    <van-radio-group :value="value" @input="$emit('input', $event)">
-      <van-cell-group>
-        <van-cell v-for="(item, index) in list" :key="item.id">
-          <van-radio :name="item.id" @click="$emit('select', item, index)">
+    <radio-group :value="value" @input="$emit('input', $event)">
+      <cell-group>
+        <cell v-for="(item, index) in list" :key="item.id">
+          <radio :name="item.id" @click="$emit('select', item, index)">
             <p class="van-contact-list__text">{{ $t('name') }}：{{ item.name }}</p>
             <p class="van-contact-list__text">{{ $t('tel') }}：{{ item.tel }}</p>
-          </van-radio>
-          <van-icon name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" />
-        </van-cell>
-      </van-cell-group>
-    </van-radio-group>
-    <van-cell icon="add" class="van-contact-list__add van-hairline--top" @click="$emit('add')" :title="addText || $t('addText')" isLink />
+          </radio>
+          <icon name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" />
+        </cell>
+      </cell-group>
+    </radio-group>
+    <cell icon="add" class="van-contact-list__add van-hairline--top" @click="$emit('add')" :title="addText || $t('addText')" isLink />
   </div>
 </template>
 
@@ -29,11 +29,11 @@ export default {
   mixins: [i18n],
 
   components: {
-    [Icon.name]: Icon,
-    [Cell.name]: Cell,
-    [Radio.name]: Radio,
-    [CellGroup.name]: CellGroup,
-    [RadioGroup.name]: RadioGroup
+    Icon,
+    Cell,
+    Radio,
+    CellGroup,
+    RadioGroup
   },
 
   props: {
diff --git a/packages/coupon-cell/index.vue b/packages/coupon-cell/index.vue
index 99ed996e5..aa84a4ed0 100644
--- a/packages/coupon-cell/index.vue
+++ b/packages/coupon-cell/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <van-cell-group class="van-coupon-cell">
-    <van-cell :title="title || '优惠券码'" :value="value" :isLink="editable" @click="$emit('click')" />
-  </van-cell-group>
+  <cell-group class="van-coupon-cell">
+    <cell :title="title || '优惠券码'" :value="value" :isLink="editable" @click="$emit('click')" />
+  </cell-group>
 </template>
 
 <script>
@@ -12,8 +12,8 @@ export default {
   name: 'van-coupon-cell',
 
   components: {
-    [Cell.name]: Cell,
-    [CellGroup.name]: CellGroup
+    Cell,
+    CellGroup
   },
 
   model: {
diff --git a/packages/coupon-list/Item.vue b/packages/coupon-list/Item.vue
index 194664d89..5cb9e23a9 100644
--- a/packages/coupon-list/Item.vue
+++ b/packages/coupon-list/Item.vue
@@ -12,7 +12,7 @@
       <span>{{ validPeriod }}</span>
       <p v-if="disabled && data.reason">{{ data.reason }}</p>
       <div class="van-coupon-item__corner" v-if="chosen">
-        <van-icon name="success" />
+        <icon name="success" />
       </div>
     </div>
   </div>
@@ -25,7 +25,7 @@ export default {
   name: 'van-coupon-item',
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {
diff --git a/packages/coupon-list/index.vue b/packages/coupon-list/index.vue
index 0644c3805..66a4641c4 100644
--- a/packages/coupon-list/index.vue
+++ b/packages/coupon-list/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="van-coupon-list">
-    <van-cell-group class="van-coupon-list__top" v-if="showExchangeBar">
-      <van-field class="van-coupon-list__filed van-hairline--surround" v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
+    <cell-group class="van-coupon-list__top" v-if="showExchangeBar">
+      <field class="van-coupon-list__filed van-hairline--surround" v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
       <van-button size="small" type="danger" class="van-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
-    </van-cell-group>
+    </cell-group>
     <div class="van-coupon-list__list" :class="{ 'van-coupon-list--with-exchange': showExchangeBar }" ref="list">
-      <van-coupon-item
+      <coupon-item
         ref="card"
         v-for="(item, index) in coupons"
         :key="item.id || item.name"
@@ -14,7 +14,7 @@
         @click.native="onClickCoupon(index)"
       />
       <h3 v-if="disabledCoupons.length">{{ disabledListTitle }}</h3>
-      <van-coupon-item
+      <coupon-item
         disabled
         v-for="item in disabledCoupons"
         :key="item.id || item.name"
@@ -38,21 +38,21 @@
 <script>
 import Cell from '../cell';
 import CellGroup from '../cell-group';
-import Item from './Item';
+import CouponItem from './Item';
 import Field from '../field';
 import Popup from '../popup';
-import Button from '../button';
+import VanButton from '../button';
 
 export default {
   name: 'van-coupon-list',
 
   components: {
-    [Button.name]: Button,
-    [Cell.name]: Cell,
-    [CellGroup.name]: CellGroup,
-    [Field.name]: Field,
-    [Popup.name]: Popup,
-    [Item.name]: Item
+    VanButton,
+    Cell,
+    CellGroup,
+    Field,
+    Popup,
+    CouponItem
   },
 
   props: {
diff --git a/packages/datetime-picker/index.vue b/packages/datetime-picker/index.vue
index b247a30e8..fe9651dc3 100644
--- a/packages/datetime-picker/index.vue
+++ b/packages/datetime-picker/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <van-picker
+  <picker
     ref="picker"
     showToolbar
     :columns="columns"
@@ -19,7 +19,7 @@ export default {
   name: 'van-datetime-picker',
 
   components: {
-    [Picker.name]: Picker
+    Picker
   },
 
   props: {
diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue
index 3dea3d129..cff793b20 100644
--- a/packages/dialog/dialog.vue
+++ b/packages/dialog/dialog.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import Button from '../button';
+import VanButton from '../button';
 import Popup from '../mixins/popup';
 import { i18n } from '../locale';
 
@@ -39,7 +39,7 @@ export default {
   name: 'van-dialog',
 
   components: {
-    [Button.name]: Button
+    VanButton
   },
 
   mixins: [Popup, i18n],
diff --git a/packages/field/index.vue b/packages/field/index.vue
index 48acaa86e..a4b9427e9 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <van-cell
+  <cell
     :title="label"
     :required="required"
     class="van-field"
@@ -41,10 +41,10 @@
       @touchstart.prevent="onClickIcon"
     >
       <slot name="icon">
-        <van-icon :name="icon" />
+        <icon :name="icon" />
       </slot>
     </div>
-  </van-cell>
+  </cell>
 </template>
 
 <script>
@@ -55,8 +55,8 @@ export default {
   name: 'van-field',
 
   components: {
-    [Cell.name]: Cell,
-    [Icon.name]: Icon
+    Cell,
+    Icon
   },
 
   props: {
diff --git a/packages/goods-action-big-btn/index.vue b/packages/goods-action-big-btn/index.vue
index 86ceb7373..c569f2dd8 100644
--- a/packages/goods-action-big-btn/index.vue
+++ b/packages/goods-action-big-btn/index.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import Button from '../button';
+import VanButton from '../button';
 
 export default {
   name: 'van-goods-action-big-btn',
 
   components: {
-    [Button.name]: Button
+    VanButton
   },
 
   props: {
diff --git a/packages/goods-action-mini-btn/index.vue b/packages/goods-action-mini-btn/index.vue
index 9698d4bdc..cc6a65e73 100644
--- a/packages/goods-action-mini-btn/index.vue
+++ b/packages/goods-action-mini-btn/index.vue
@@ -1,6 +1,6 @@
 <template>
   <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="$emit('click', $event);">
-    <van-icon class="van-goods-action__mini-btn-icon" :class="iconClass" :name="icon" />
+    <icon class="van-goods-action__mini-btn-icon" :class="iconClass" :name="icon" />
     <slot></slot>
   </a>
 </template>
@@ -12,7 +12,7 @@ export default {
   name: 'van-goods-action-mini-btn',
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {
diff --git a/packages/image-preview/image-preview.vue b/packages/image-preview/image-preview.vue
index 5c5c4247d..ba576e9e1 100644
--- a/packages/image-preview/image-preview.vue
+++ b/packages/image-preview/image-preview.vue
@@ -7,11 +7,11 @@
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <van-swipe :initialSwipe="startPosition">
-      <van-swipe-item v-for="(item, index) in images" :key="index">
+    <swipe :initialSwipe="startPosition">
+      <swipe-item v-for="(item, index) in images" :key="index">
         <img class="van-image-preview__image" :src="item" >
-      </van-swipe-item>
-    </van-swipe>
+      </swipe-item>
+    </swipe>
   </div>  
 </template>
 
@@ -26,8 +26,8 @@ export default {
   mixins: [Popup],
 
   components: {
-    [Swipe.name]: Swipe,
-    [SwipeItem.name]: SwipeItem
+    Swipe,
+    SwipeItem
   },
 
   props: {
diff --git a/packages/nav-bar/index.vue b/packages/nav-bar/index.vue
index 09789dbc5..505024ab8 100644
--- a/packages/nav-bar/index.vue
+++ b/packages/nav-bar/index.vue
@@ -2,7 +2,7 @@
   <div class="van-nav-bar van-hairline--top-bottom" :class="{ 'van-nav-bar--fixed': fixed }">
     <div class="van-nav-bar__left" @click="$emit('click-left')">
       <slot name="left">
-        <van-icon v-if="leftArrow" class="van-nav-bar__arrow" name="arrow" />
+        <icon v-if="leftArrow" class="van-nav-bar__arrow" name="arrow" />
         <span v-if="leftText" v-text="leftText" class="van-nav-bar__text" />
       </slot>
     </div>
@@ -24,7 +24,7 @@ export default {
   name: 'van-nav-bar',
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {
diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue
index 65a8f7890..06fd40083 100644
--- a/packages/notice-bar/index.vue
+++ b/packages/notice-bar/index.vue
@@ -20,7 +20,7 @@
         <slot>{{ text }}</slot>
       </div>
     </div>
-    <van-icon class="van-notice-bar__right-icon" :name="iconName" v-if="iconName" @click="onClickIcon" />
+    <icon class="van-notice-bar__right-icon" :name="iconName" v-if="iconName" @click="onClickIcon" />
   </div>
 </template>
 
@@ -31,7 +31,7 @@ export default {
   name: 'van-notice-bar',
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {
diff --git a/packages/picker/index.vue b/packages/picker/index.vue
index 52e9dcb35..9087940fe 100644
--- a/packages/picker/index.vue
+++ b/packages/picker/index.vue
@@ -8,7 +8,7 @@
       </slot>
     </div>
     <div class="van-picker__columns">
-      <van-picker-column
+      <picker-column
         v-for="(item, index) in currentColumns"
         :key="index"
         :valueKey="valueKey"
@@ -25,7 +25,7 @@
 
 <script>
 import { i18n } from '../locale';
-import Column from './PickerColumn';
+import PickerColumn from './PickerColumn';
 import deepClone from '../utils/deep-clone';
 
 export default {
@@ -34,7 +34,7 @@ export default {
   mixins: [i18n],
 
   components: {
-    [Column.name]: Column
+    PickerColumn
   },
 
   props: {
diff --git a/packages/pull-refresh/index.vue b/packages/pull-refresh/index.vue
index 32fa1cd97..5872fb3dc 100644
--- a/packages/pull-refresh/index.vue
+++ b/packages/pull-refresh/index.vue
@@ -17,7 +17,7 @@
       </slot>
       <slot name="loading" v-if="status === 'loading'">
         <div class="van-pull-refresh__loading">
-          <van-loading />
+          <loading />
           <span>{{ loadingText || $t('loadingText') }}</span>
         </div>
       </slot>
@@ -55,7 +55,7 @@ export default {
   },
 
   components: {
-    [Loading.name]: Loading
+    Loading
   },
 
   data() {
diff --git a/packages/radio/index.vue b/packages/radio/index.vue
index cbf0cfae5..333bb517b 100644
--- a/packages/radio/index.vue
+++ b/packages/radio/index.vue
@@ -11,7 +11,7 @@
         class="van-radio__control"
         :disabled="isDisabled"
       >
-      <van-icon :name="currentValue === name ? 'checked' : 'check'" />
+      <icon :name="currentValue === name ? 'checked' : 'check'" />
     </span>
     <span class="van-radio__label" @click="handleLabelClick">
       <slot></slot>
@@ -27,7 +27,7 @@ export default {
   name: 'van-radio',
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   mixins: [findParent],
diff --git a/packages/search/index.vue b/packages/search/index.vue
index 0c9e93844..65fde29f0 100644
--- a/packages/search/index.vue
+++ b/packages/search/index.vue
@@ -4,7 +4,7 @@
     :class="{ 'van-search--show-action': showAction }"
     :style="{ 'background-color': background }">
     <div class="van-search__input-wrap" v-clickoutside="onClickoutside">
-      <van-icon name="search" />
+      <icon name="search" />
       <input
         type="search"
         class="van-search__input"
@@ -15,7 +15,7 @@
         @focus="onFocus"
         @keypress.enter.prevent="onSearch"
       >
-      <van-icon name="clear" @click="onClean" v-show="isFocus" />
+      <icon name="clear" @click="onClean" v-show="isFocus" />
     </div>
     <div class="van-search__action" v-if="showAction">
       <slot name="action">
@@ -36,7 +36,7 @@ export default {
   mixins: [i18n],
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {
diff --git a/packages/sku/components/SkuActions.vue b/packages/sku/components/SkuActions.vue
index 96ce46aaf..3f067e088 100644
--- a/packages/sku/components/SkuActions.vue
+++ b/packages/sku/components/SkuActions.vue
@@ -6,13 +6,13 @@
 </template>
 
 <script>
-import Button from '../../button';
+import VanButton from '../../button';
 
 export default {
   name: 'van-sku-actions',
 
   components: {
-    [Button.name]: Button
+    VanButton
   },
 
   props: {
diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.vue
index e916b54d9..ada187b37 100644
--- a/packages/sku/components/SkuMessages.vue
+++ b/packages/sku/components/SkuMessages.vue
@@ -1,25 +1,25 @@
 <template>
-  <van-cell-group class="van-sku-messages">
+  <cell-group class="van-sku-messages">
     <template v-for="(message, index) in internalMessages">
       <template v-if="message.type === 'image'"></template>
-      <van-field v-else-if="message.multiple == '1'"
+      <field v-else-if="message.multiple == '1'"
         :key="`${goodsId}-${index}`"
         :required="message.required == '1'"
         :label="message.name"
         :placeholder="placeholderMap.textarea"
         type="textarea"
         v-model="messageValues[index]">
-      </van-field>
-      <van-field v-else
+      </field>
+      <field v-else
         :key="`${goodsId}-${index}`"
         :required="message.required == '1'"
         :label="message.name"
         :placeholder="placeholderMap[message.type]"
         :type="getType(message)"
         v-model="messageValues[index]">
-      </van-field>
+      </field>
     </template>
-  </van-cell-group>
+  </cell-group>
 </template>
 
 <script>
@@ -33,8 +33,8 @@ export default {
   name: 'van-sku-messages',
 
   components: {
-    [Field.name]: Field,
-    [CellGroup.name]: CellGroup
+    Field,
+    CellGroup
   },
 
   props: {
diff --git a/packages/sku/components/SkuStepper.vue b/packages/sku/components/SkuStepper.vue
index c15be326f..8a52d0e94 100644
--- a/packages/sku/components/SkuStepper.vue
+++ b/packages/sku/components/SkuStepper.vue
@@ -2,14 +2,14 @@
   <div class="van-sku-stepper-stock">
     <div class="van-sku-stepper-container">
       <div class="van-sku__stepper-title">{{ stepperTitle }}：</div>
-      <van-stepper
+      <stepper
         class="van-sku__stepper"
         v-model="currentNum"
         :min="1"
         :max="stepperLimit"
         :disableInput="disableStepperInput"
         @overlimit="handleOverLimit">
-      </van-stepper>
+      </stepper>
     </div>
     <div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
     <div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
@@ -26,7 +26,7 @@ export default {
   name: 'van-sku-stepper',
 
   components: {
-    [Stepper.name]: Stepper
+    Stepper
   },
 
   props: {
diff --git a/packages/sku/containers/SkuContainer.vue b/packages/sku/containers/SkuContainer.vue
index c4977bd71..8163b6d53 100644
--- a/packages/sku/containers/SkuContainer.vue
+++ b/packages/sku/containers/SkuContainer.vue
@@ -1,15 +1,15 @@
 <template>
-  <van-popup v-model="show" v-if="!isSkuEmpty" position="bottom" lockOnScroll preventScroll>
+  <popup v-model="show" v-if="!isSkuEmpty" position="bottom" lockOnScroll preventScroll>
     <div class="van-sku-container">
       <div class="van-sku-layout">
         <slot name="sku-header" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb">
-          <van-sku-header
+          <sku-header
             :skuEventBus="skuEventBus"
             :selectedSku="selectedSku"
             :selectedSkuComb="selectedSkuComb"
             :goods="goods"
             :sku="sku">
-          </van-sku-header>
+          </sku-header>
         </slot>
         <div class="van-sku-body scroller" :style="bodyStyle">
           <slot name="sku-group" :selectedSku="selectedSku" :skuEventBus="skuEventBus">
@@ -17,10 +17,10 @@
               <div v-for="(skuTreeItem, index) in skuTree"
                 class="van-sku-row-group"
                 :key="index">
-                <van-sku-row
+                <sku-row
                   :skuEventBus="skuEventBus"
                   :skuRow="skuTreeItem">
-                  <van-sku-row-item
+                  <sku-row-item
                     v-for="(skuValue, index) in skuTreeItem.v"
                     :key="index"
                     :skuKeyStr="skuTreeItem.k_s"
@@ -28,14 +28,14 @@
                     :skuEventBus="skuEventBus"
                     :selectedSku="selectedSku"
                     :skuList="sku.list">
-                  </van-sku-row-item>
-                </van-sku-row>
+                  </sku-row-item>
+                </sku-row>
               </div>
             </div>
           </slot>
           <slot name="extra-sku-group" :skuEventBus="skuEventBus"></slot>
           <slot name="sku-stepper" :skuEventBus="skuEventBus" :selectedSku="selectedSku" :selectedSkuComb="selectedSkuComb" :selectedNum="selectedNum">
-            <van-sku-stepper
+            <sku-stepper
               ref="skuStepper"
               :skuEventBus="skuEventBus"
               :selectedSku="selectedSku"
@@ -47,27 +47,27 @@
               :quotaUsed="quotaUsed"
               :disableStepperInput="disableStepperInput"
               :hideStock="hideStock">
-            </van-sku-stepper>
+            </sku-stepper>
           </slot>
          <slot name="sku-messages">
-            <van-sku-messages
+            <sku-messages
               ref="skuMessages"
               :goodsId="goodsId"
               :messagePlaceholderMap="messagePlaceholderMap"
               :messages="sku.messages">
-            </van-sku-messages>
+            </sku-messages>
           </slot>
         </div>
         <slot name="sku-actions" :skuEventBus="skuEventBus">
-          <van-sku-actions
+          <sku-actions
             :skuEventBus="skuEventBus"
             :buyText="buyText"
             :showAddCartBtn="showAddCartBtn">
-          </van-sku-actions>
+          </sku-actions>
         </slot>
       </div>
     </div>
-  </van-popup>
+  </popup>
 </template>
 
 <script>
@@ -89,13 +89,13 @@ export default {
   name: 'van-sku',
 
   components: {
-    [Popup.name]: Popup,
-    [SkuHeader.name]: SkuHeader,
-    [SkuRow.name]: SkuRow,
-    [SkuRowItem.name]: SkuRowItem,
-    [SkuStepper.name]: SkuStepper,
-    [SkuMessages.name]: SkuMessages,
-    [SkuActions.name]: SkuActions
+    Popup,
+    SkuHeader,
+    SkuRow,
+    SkuRowItem,
+    SkuStepper,
+    SkuMessages,
+    SkuActions
   },
 
   props: {
diff --git a/packages/steps/index.vue b/packages/steps/index.vue
index c4131d087..67efa73e8 100644
--- a/packages/steps/index.vue
+++ b/packages/steps/index.vue
@@ -3,7 +3,7 @@
     <div class="van-steps__status" v-if="title || description">
       <div class="van-steps__icon" v-if="icon || $slots.icon">
         <slot name="icon">
-          <van-icon :name="icon" :class="iconClass" />
+          <icon :name="icon" :class="iconClass" />
         </slot>
       </div>
       <div class="van-steps__message">
@@ -25,7 +25,7 @@ export default {
   name: 'van-steps',
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {
diff --git a/packages/submit-bar/index.vue b/packages/submit-bar/index.vue
index 7188ff3d4..72276b58f 100644
--- a/packages/submit-bar/index.vue
+++ b/packages/submit-bar/index.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Button from '../button';
+import VanButton from '../button';
 import { i18n } from '../locale';
 
 export default {
@@ -29,7 +29,7 @@ export default {
   mixins: [i18n],
 
   components: {
-    [Button.name]: Button
+    VanButton
   },
 
   props: {
diff --git a/packages/switch-cell/index.vue b/packages/switch-cell/index.vue
index 52bb2514b..05c14ecab 100644
--- a/packages/switch-cell/index.vue
+++ b/packages/switch-cell/index.vue
@@ -1,19 +1,19 @@
 <template>
-  <van-cell :title="title" class="van-switch-cell">
+  <cell :title="title" class="van-switch-cell">
     <van-switch v-bind="$props" @input="$emit('input', $event)" />
-  </van-cell>
+  </cell>
 </template>
 
 <script>
 import Cell from '../cell';
-import Switch from '../switch';
+import VanSwitch from '../switch';
 
 export default {
   name: 'van-switch-cell',
 
   components: {
-    [Cell.name]: Cell,
-    [Switch.name]: Switch
+    Cell,
+    VanSwitch
   },
 
   props: {
diff --git a/packages/switch/index.vue b/packages/switch/index.vue
index d007f6299..6e21b15ee 100644
--- a/packages/switch/index.vue
+++ b/packages/switch/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="van-switch" :class="[`van-switch--${value ? 'on' : 'off'}`, { 'van-switch--disabled': disabled }]" @click="toggleState">
     <div class="van-switch__node van-hairline-surround">
-      <van-loading v-if="loading" class="van-switch__loading" />
+      <loading v-if="loading" class="van-switch__loading" />
     </div>
     <div class="van-switch__bg" />
   </div>
@@ -14,7 +14,7 @@ export default {
   name: 'van-switch',
 
   components: {
-    [Loading.name]: Loading
+    Loading
   },
 
   props: {
diff --git a/packages/tabbar-item/index.vue b/packages/tabbar-item/index.vue
index 3fa5bd510..669680922 100644
--- a/packages/tabbar-item/index.vue
+++ b/packages/tabbar-item/index.vue
@@ -2,7 +2,7 @@
   <div class="van-tabbar-item" :class="{ 'van-tabbar-item--active': active }" @click="onClick">
     <div class="van-tabbar-item__icon" :class="{ 'van-tabbar-item__icon-dot': dot }">
       <slot name="icon" :active="active">
-        <van-icon v-if="icon" :name="icon" />
+        <icon v-if="icon" :name="icon" />
       </slot>
       <div v-if="info" class="van-tabbar-item__info">{{ info }}</div>
     </div>
@@ -22,7 +22,7 @@ export default {
   mixins: [RouterLink],
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {
diff --git a/packages/toast/toast.vue b/packages/toast/toast.vue
index dc21abeac..e07e40f84 100644
--- a/packages/toast/toast.vue
+++ b/packages/toast/toast.vue
@@ -8,8 +8,8 @@
 
         <!-- with icon -->
         <template v-if="displayStyle === 'default'">
-          <van-loading v-if="type === 'loading'" color="white" />
-          <van-icon v-else class="van-toast__icon" :name="type" />
+          <loading v-if="type === 'loading'" color="white" />
+          <icon v-else class="van-toast__icon" :name="type" />
           <div v-if="message !== undefined" class="van-toast__text">{{ message }}</div>
         </template>
       </div>
@@ -28,8 +28,8 @@ export default {
   name: 'van-toast',
 
   components: {
-    [Icon.name]: Icon,
-    [Loading.name]: Loading
+    Icon,
+    Loading
   },
 
   props: {
diff --git a/packages/tree-select/index.vue b/packages/tree-select/index.vue
index 766f68825..b0d1bfcd2 100644
--- a/packages/tree-select/index.vue
+++ b/packages/tree-select/index.vue
@@ -17,11 +17,11 @@
         :class="{ 'van-tree-select__item--active': activeId === item.id }"
         @click="onItemSelect(item)">
         {{ item.text }}
-        <van-icon
+        <icon
           v-if="activeId === item.id"
           name="success"
           class="van-tree-select__selected"
-        ></van-icon>
+        />
       </div>
     </div>
   </div>
@@ -34,7 +34,7 @@ export default {
   name: 'van-tree-select',
 
   components: {
-    [Icon.name]: Icon
+    Icon
   },
 
   props: {