From 06e333eb3e7a2302ae17b472a7607afc86df3689 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Wed, 19 Apr 2017 17:44:57 +0800
Subject: [PATCH] vant components

---
 build/bin/build-all.js                        |   2 +-
 build/webpack.build.js                        |   4 +-
 build/webpack.build.min.js                    |   1 -
 build/webpack.config.js                       |  12 +-
 docs/examples-dist/actionsheet.vue            |  20 +-
 docs/examples-dist/badge.vue                  |  26 +-
 docs/examples-dist/button.vue                 | 128 +++++-----
 docs/examples-dist/card.vue                   |  24 +-
 docs/examples-dist/cell.vue                   |  47 ++--
 docs/examples-dist/checkbox.vue               |  42 ++--
 docs/examples-dist/dialog.vue                 |   8 +-
 docs/examples-dist/field.vue                  |  40 +--
 docs/examples-dist/icon.vue                   | 218 ++++++++---------
 docs/examples-dist/image-preview.vue          |   4 +-
 docs/examples-dist/layout.vue                 |  56 ++---
 docs/examples-dist/loading.vue                |  10 +-
 docs/examples-dist/panel.vue                  |  44 ++--
 docs/examples-dist/popup.vue                  |  48 ++--
 docs/examples-dist/progress.vue               |  18 +-
 docs/examples-dist/quantity.vue               |   8 +-
 docs/examples-dist/radio.vue                  |  38 +--
 docs/examples-dist/search.vue                 |   4 +-
 docs/examples-dist/steps.vue                  |  28 +--
 docs/examples-dist/swipe.vue                  |  18 +-
 docs/examples-dist/switch.vue                 |  12 +-
 docs/examples-dist/tab.vue                    |  96 ++++----
 docs/examples-dist/tag.vue                    |  26 +-
 docs/examples-dist/toast.vue                  |  20 +-
 docs/examples-dist/uploader.vue               |   6 +-
 docs/examples-docs/actionsheet.md             |  32 +--
 docs/examples-docs/badge.md                   |  40 +--
 docs/examples-docs/button.md                  | 138 +++++------
 docs/examples-docs/card.md                    |  34 +--
 docs/examples-docs/cell.md                    |  57 +++--
 docs/examples-docs/checkbox.md                |  70 +++---
 docs/examples-docs/datetime-picker.md         |  70 +++++-
 docs/examples-docs/dialog.md                  |  12 +-
 docs/examples-docs/field.md                   |  50 ++--
 docs/examples-docs/icon.md                    | 228 +++++++++---------
 docs/examples-docs/image-preview.md           |   8 +-
 docs/examples-docs/install.md                 |   2 +-
 docs/examples-docs/layout.md                  |  76 +++---
 docs/examples-docs/lazyload.md                |   2 +-
 docs/examples-docs/loading.md                 |  20 +-
 docs/examples-docs/panel.md                   |  56 ++---
 docs/examples-docs/picker.md                  |  14 +-
 docs/examples-docs/popup.md                   |  60 ++---
 docs/examples-docs/progress.md                |  28 +--
 docs/examples-docs/quantity.md                |  18 +-
 docs/examples-docs/quickstart.md              |  10 +-
 docs/examples-docs/radio.md                   |  61 ++---
 docs/examples-docs/search.md                  |  14 +-
 docs/examples-docs/steps.md                   |  40 +--
 docs/examples-docs/swipe.md                   |  30 +--
 docs/examples-docs/switch.md                  |  22 +-
 docs/examples-docs/tab.md                     | 128 +++++-----
 docs/examples-docs/tag.md                     |  36 +--
 docs/examples-docs/toast.md                   |  22 +-
 docs/examples-docs/uploader.md                |  16 +-
 docs/examples-docs/waterfall.md               |   4 +-
 docs/src/components/footer-nav.vue            |   4 +-
 docs/src/components/mobile-popup.vue          |   4 +-
 docs/src/examples.js                          |   2 +-
 docs/src/index.js                             |   2 +-
 docs/src/index.tpl                            |   2 +-
 package.json                                  |  14 +-
 packages/actionsheet/src/actionsheet.vue      |  24 +-
 packages/badge/src/badge-group.vue            |   4 +-
 packages/badge/src/badge.vue                  |  10 +-
 packages/button/package.json                  |   2 +-
 packages/button/src/button.js                 |  28 +--
 packages/card/package.json                    |   2 +-
 packages/card/src/card.vue                    |  14 +-
 packages/cell/package.json                    |   2 +-
 packages/cell/src/cell-group.vue              |   4 +-
 packages/cell/src/cell.vue                    |  20 +-
 packages/checkbox/package.json                |   2 +-
 packages/checkbox/src/checkbox-group.vue      |   4 +-
 packages/checkbox/src/checkbox.vue            |  22 +-
 packages/col/src/col.vue                      |   4 +-
 packages/datetime-picker/package.json         |   2 +-
 .../datetime-picker/src/datetime-picker.vue   |   6 +-
 packages/dialog/package.json                  |   2 +-
 packages/dialog/src/dialog.vue                |  20 +-
 packages/field/package.json                   |   2 +-
 packages/field/src/field.vue                  |  24 +-
 packages/icon/package.json                    |   4 +-
 packages/icon/src/icon.vue                    |   4 +-
 packages/image-preview/package.json           |   2 +-
 packages/image-preview/src/image-preview.vue  |  18 +-
 packages/loading/package.json                 |   2 +-
 packages/loading/src/loading.vue              |   6 +-
 packages/panel/package.json                   |   2 +-
 packages/panel/src/panel.vue                  |  16 +-
 packages/picker/package.json                  |   2 +-
 packages/picker/src/picker-column.vue         |  12 +-
 packages/picker/src/picker.vue                |  16 +-
 packages/popup/package.json                   |   2 +-
 packages/popup/src/popup.vue                  |   4 +-
 packages/progress/package.json                |   2 +-
 packages/progress/src/progress.vue            |  14 +-
 packages/quantity/src/quantity.vue            |  14 +-
 packages/radio/package.json                   |   2 +-
 packages/radio/src/radio-group.vue            |   4 +-
 packages/radio/src/radio.vue                  |  20 +-
 packages/row/src/row.vue                      |   4 +-
 packages/search/src/search.vue                |  14 +-
 packages/steps/src/step.vue                   |  16 +-
 packages/steps/src/steps.vue                  |  24 +-
 packages/swipe/src/scroll.js                  |   2 +-
 packages/swipe/src/swipe-item.vue             |   4 +-
 packages/swipe/src/swipe.vue                  |  12 +-
 packages/switch/package.json                  |   2 +-
 packages/switch/src/switch.vue                |  22 +-
 packages/tab/src/tab.vue                      |   6 +-
 packages/tab/src/tabs.vue                     |  16 +-
 packages/tag/src/main.vue                     |   4 +-
 packages/toast/package.json                   |   2 +-
 packages/toast/src/toast.vue                  |  26 +-
 packages/uploader/src/main.vue                |  22 +-
 src/mixins/popup/popup-manager.js             |   2 +-
 test/unit/components/badge.vue                |  12 +-
 test/unit/components/checkbox.vue             |  10 +-
 test/unit/components/radio.vue                |  12 +-
 test/unit/components/steps.vue                |  16 +-
 test/unit/components/tabs.vue                 |  18 +-
 test/unit/index.js                            |   2 +-
 test/unit/specs/actionsheet.spec.js           |  24 +-
 test/unit/specs/badge.spec.js                 |   4 +-
 test/unit/specs/button.spec.js                |  40 +--
 test/unit/specs/card.spec.js                  |   2 +-
 test/unit/specs/cell.spec.js                  |   8 +-
 test/unit/specs/checkbox.spec.js              |  18 +-
 test/unit/specs/field.spec.js                 |  18 +-
 test/unit/specs/icon.spec.js                  |   4 +-
 test/unit/specs/loading.spec.js               |  26 +-
 test/unit/specs/popup.spec.js                 |   2 +-
 test/unit/specs/progress.spec.js              |  10 +-
 test/unit/specs/quantity.spec.js              |  22 +-
 test/unit/specs/radio.spec.js                 |  20 +-
 test/unit/specs/search.spec.js                |  14 +-
 test/unit/specs/steps.spec.js                 |  10 +-
 test/unit/specs/switch.spec.js                |  34 +--
 test/unit/specs/tabs.spec.js                  |  10 +-
 test/unit/specs/toast.spec.js                 |   6 +-
 145 files changed, 1679 insertions(+), 1619 deletions(-)

diff --git a/build/bin/build-all.js b/build/bin/build-all.js
index 97927ee70..565edeee2 100644
--- a/build/bin/build-all.js
+++ b/build/bin/build-all.js
@@ -5,7 +5,7 @@ const execSync = require('child_process').execSync;
 const existsSync = require('fs').existsSync;
 const path = require('path');
 
-let componentPaths = [];
+const componentPaths = [];
 
 delete components.font;
 
diff --git a/build/webpack.build.js b/build/webpack.build.js
index 8516e60ee..f6373d03a 100644
--- a/build/webpack.build.js
+++ b/build/webpack.build.js
@@ -3,12 +3,12 @@ var getPostcssPlugin = require('./utils/postcss_pipe');
 var config = require('./webpack.config.js');
 
 config.entry = {
-  'zanui': './src/index.js'
+  'vant': './src/index.js'
 };
 
 config.output = {
   filename: './lib/[name].js',
-  library: 'zanui',
+  library: 'vant',
   libraryTarget: 'umd'
 };
 
diff --git a/build/webpack.build.min.js b/build/webpack.build.min.js
index 297a3815b..f8d432f2d 100644
--- a/build/webpack.build.min.js
+++ b/build/webpack.build.min.js
@@ -1,5 +1,4 @@
 var webpack = require('webpack');
-var getPostcssPlugin = require('./utils/postcss_pipe');
 var config = require('./webpack.config.js');
 
 config.output.filename = config.output.filename.replace(/\.js$/, '.min.js');
diff --git a/build/webpack.config.js b/build/webpack.config.js
index cd942827e..0bbed1299 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -1,10 +1,8 @@
 var webpack = require('webpack');
 var path = require('path');
 var slugify = require('transliteration').slugify;
-var md = require('markdown-it')();
 var striptags = require('./strip-tags');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var version = require('../package.json').version;
 var getPoastcssPlugin = require('./utils/postcss_pipe');
 var ProgressBarPlugin = require('progress-bar-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
@@ -36,8 +34,8 @@ function wrap(render) {
 module.exports = {
   entry: {
     'vendor': ['vue', 'vue-router'],
-    'zan-docs': './docs/src/index.js',
-    'zan-examples': './docs/src/examples.js'
+    'vant-docs': './docs/src/index.js',
+    'vant-examples': './docs/src/examples.js'
   },
   output: {
     path: path.join(__dirname, '../docs/dist'),
@@ -52,7 +50,7 @@ module.exports = {
     extensions: ['.js', '.vue', '.css'],
     alias: {
       'vue$': 'vue/dist/vue.runtime.common.js',
-      'zanui': path.join(__dirname, '..'),
+      'vant': path.join(__dirname, '..'),
       'src': path.join(__dirname, '../src'),
       'packages': path.join(__dirname, '../packages'),
       'lib': path.join(__dirname, '../lib'),
@@ -150,13 +148,13 @@ module.exports = {
       }
     }),
     new HtmlWebpackPlugin({
-      chunks: ['vendor', 'zan-docs'],
+      chunks: ['vendor', 'vant-docs'],
       template: 'docs/src/index.tpl',
       filename: 'index.html',
       inject: true
     }),
     new HtmlWebpackPlugin({
-      chunks: ['vendor', 'zan-examples'],
+      chunks: ['vendor', 'vant-examples'],
       template: 'docs/src/index.tpl',
       filename: 'examples.html',
       inject: true
diff --git a/docs/examples-dist/actionsheet.vue b/docs/examples-dist/actionsheet.vue
index 3a84da330..9cad0d3de 100644
--- a/docs/examples-dist/actionsheet.vue
+++ b/docs/examples-dist/actionsheet.vue
@@ -1,22 +1,22 @@
 <template><section class="demo-actionsheet"><h1 class="demo-title">Actionsheet 行动按钮</h1><example-block title="基础用法">
-                <zan-button @click="show1 = true">弹出actionsheet</zan-button>
-<zan-actionsheet v-model="show1" :actions="actions1">
-</zan-actionsheet>
+                <van-button @click="show1 = true">弹出actionsheet</van-button>
+<van-actionsheet v-model="show1" :actions="actions1">
+</van-actionsheet>
 
 
 
               </example-block><example-block title="带取消按钮的ActionSheet">
-                <zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
-<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
-</zan-actionsheet>
+                <van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
+<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
+</van-actionsheet>
 
 
 
               </example-block><example-block title="带标题的ActionSheet">
-                <zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
-<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
+                <van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
+<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
   <p>一些内容</p>
-</zan-actionsheet>
+</van-actionsheet>
 
               </example-block></section></template>
 <style>
@@ -26,7 +26,7 @@
       color: #06BF04;
     }
 
-    .zan-button {
+    .van-button {
       margin-left: 15px;
     }
 
diff --git a/docs/examples-dist/badge.vue b/docs/examples-dist/badge.vue
index af5a506a3..dccaffbce 100644
--- a/docs/examples-dist/badge.vue
+++ b/docs/examples-dist/badge.vue
@@ -1,21 +1,21 @@
 <template><section class="demo-badge"><h1 class="demo-title">Badge 徽章</h1><example-block title="基础用法">
                 <div class="badge-group-wrapper">
-  <zan-badge-group>
-    <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-    <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-    <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
-    <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
-  </zan-badge-group>
+  <van-badge-group>
+    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
+    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
+    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
+    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
+  </van-badge-group>
 </div>
 
               </example-block><example-block title="选中某个badge">
                 <div class="badge-group-wrapper">
-  <zan-badge-group :active-key="2">
-    <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-    <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-    <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
-    <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
-  </zan-badge-group>
+  <van-badge-group :active-key="2">
+    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
+    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
+    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
+    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
+  </van-badge-group>
 </div>
 
               </example-block></section></template>
@@ -27,7 +27,7 @@
       background-color: #fff;
     }
 
-    .zan-badge-group {
+    .van-badge-group {
       margin: 0 auto;
     }
   }
diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue
index 2c1aea4b3..5304705f2 100644
--- a/docs/examples-dist/button.vue
+++ b/docs/examples-dist/button.vue
@@ -1,85 +1,85 @@
 <template><section class="demo-button"><h1 class="demo-title">Button 按钮</h1><example-block title="按钮功能">
-                <zan-row>
-  <zan-col span="24">
-    <zan-button block="">default</zan-button>
-  </zan-col>
-  <zan-col span="24">
-    <zan-button type="primary" block="">primary</zan-button>
-  </zan-col>
-  <zan-col span="24">
-    <zan-button type="danger" block="">danger</zan-button>
-  </zan-col>
-</zan-row>
+                <van-row>
+  <van-col span="24">
+    <van-button block="">default</van-button>
+  </van-col>
+  <van-col span="24">
+    <van-button type="primary" block="">primary</van-button>
+  </van-col>
+  <van-col span="24">
+    <van-button type="danger" block="">danger</van-button>
+  </van-col>
+</van-row>
 
               </example-block><example-block title="禁用状态">
-                <zan-row>
-  <zan-col span="24">
-    <zan-button disabled block="">diabled</zan-button>
-  </zan-col>
-</zan-row>
+                <van-row>
+  <van-col span="24">
+    <van-button disabled block="">diabled</van-button>
+  </van-col>
+</van-row>
 
               </example-block><example-block title="按钮尺寸">
-                <zan-row>
-  <zan-col span="24">
-    <zan-button size="large">large</zan-button>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="24">
-    <zan-button size="normal">normal</zan-button>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="24">
-    <zan-button size="small">small</zan-button>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="24">
-    <zan-button size="mini">mini</zan-button>
-  </zan-col>
-</zan-row>
+                <van-row>
+  <van-col span="24">
+    <van-button size="large">large</van-button>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="24">
+    <van-button size="normal">normal</van-button>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="24">
+    <van-button size="small">small</van-button>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="24">
+    <van-button size="mini">mini</van-button>
+  </van-col>
+</van-row>
 
               </example-block><example-block title="自定义按钮标签">
-                <zan-row>
-  <zan-col span="24">
-    <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
-  </zan-col>
-</zan-row>
+                <van-row>
+  <van-col span="24">
+    <van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
+  </van-col>
+</van-row>
 
               </example-block><example-block title="loading按钮">
-                <zan-row>
-  <zan-col span="24">
-    <zan-button type="primary" loading="" block="">loading</zan-button>
-  </zan-col>
-  <zan-col span="24">
-    <zan-button loading="" block=""></zan-button>
-  </zan-col>
-</zan-row>
+                <van-row>
+  <van-col span="24">
+    <van-button type="primary" loading="" block="">loading</van-button>
+  </van-col>
+  <van-col span="24">
+    <van-button loading="" block=""></van-button>
+  </van-col>
+</van-row>
 
               </example-block><example-block title="">
-                <zan-row>
-  <zan-col span="24">
-    <zan-button type="primary" bottom-action="">立即购买</zan-button>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="12">
-    <zan-button bottom-action="">加入购物车</zan-button>
-  </zan-col>
-  <zan-col span="12">
-    <zan-button type="primary" bottom-action="">立即购买</zan-button>
-  </zan-col>
-</zan-row>
+                <van-row>
+  <van-col span="24">
+    <van-button type="primary" bottom-action="">立即购买</van-button>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="12">
+    <van-button bottom-action="">加入购物车</van-button>
+  </van-col>
+  <van-col span="12">
+    <van-button type="primary" bottom-action="">立即购买</van-button>
+  </van-col>
+</van-row>
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b button {
-    .zan-row {
+    .van-row {
       padding: 0 15px;
     }
-    .zan-col {
+    .van-col {
       margin-bottom: 10px;
     }
   }
diff --git a/docs/examples-dist/card.vue b/docs/examples-dist/card.vue
index 061790da3..1e8a6c2af 100644
--- a/docs/examples-dist/card.vue
+++ b/docs/examples-dist/card.vue
@@ -1,21 +1,21 @@
 <template><section class="demo-card"><h1 class="demo-title">Card 图文组件</h1><example-block title="基础用法">
-                <zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-</zan-card>
+                <van-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+</van-card>
 
               </example-block><example-block title="高级用法">
-                <zan-card thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-  <div class="zan-card__row" slot="title">
-    <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-    <span class="zan-card__price">¥ 2.00</span>
+                <van-card thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+  <div class="van-card__row" slot="title">
+    <h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="van-card__price">¥ 2.00</span>
   </div>
-  <div class="zan-card__row" slot="desc">
-    <span class="zan-card__num">x 2</span>
+  <div class="van-card__row" slot="desc">
+    <span class="van-card__num">x 2</span>
   </div>
-  <div class="zan-card__footer" slot="footer">
-    <zan-button size="mini">按钮一</zan-button>
-    <zan-button size="mini">按钮二</zan-button>
+  <div class="van-card__footer" slot="footer">
+    <van-button size="mini">按钮一</van-button>
+    <van-button size="mini">按钮二</van-button>
   </div>
-</zan-card>
+</van-card>
 
               </example-block></section></template>
 
diff --git a/docs/examples-dist/cell.vue b/docs/examples-dist/cell.vue
index b6848b9ee..5c5db6ae6 100644
--- a/docs/examples-dist/cell.vue
+++ b/docs/examples-dist/cell.vue
@@ -1,38 +1,37 @@
 <template><section class="demo-cell"><h1 class="demo-title">Cell 单元格</h1><example-block title="基础用法">
-                <zan-cell-group>
-  <zan-cell title="单元格1" value="单元格1内容">
-  </zan-cell>
-  <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
-</zan-cell-group>
+                <van-cell-group>
+  <van-cell title="单元格1" value="单元格1内容"></van-cell>
+  <van-cell title="单元格2" value="单元格2内容"></van-cell>
+</van-cell-group>
 
               </example-block><example-block title="标题带描述信息">
-                <zan-cell-group>
-  <zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
-  <zan-cell title="单元格2" label="描述信息"></zan-cell>
-</zan-cell-group>
+                <van-cell-group>
+  <van-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></van-cell>
+  <van-cell title="单元格2" label="描述信息"></van-cell>
+</van-cell-group>
 
               </example-block><example-block title="带图标">
-                <zan-cell-group>
-  <zan-cell title="起码运动馆" icon="home"></zan-cell>
-  <zan-cell title="线下门店" icon="location"></zan-cell>
-</zan-cell-group>
+                <van-cell-group>
+  <van-cell title="起码运动馆" icon="home"></van-cell>
+  <van-cell title="线下门店" icon="location"></van-cell>
+</van-cell-group>
 
               </example-block><example-block title="可点击的链接">
-                <zan-cell-group>
-  <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></zan-cell>
-  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
-</zan-cell-group>
+                <van-cell-group>
+  <van-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></van-cell>
+  <van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
+</van-cell-group>
 
               </example-block><example-block title="高级用法">
-                <zan-cell-group>
-  <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
+                <van-cell-group>
+  <van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
     <template slot="title">
-      <span class="zan-cell-text">起码运动馆</span>
-      <zan-tag type="danger">官方</zan-tag>
+      <span class="van-cell-text">起码运动馆</span>
+      <van-tag type="danger">官方</van-tag>
     </template>
-  </zan-cell>
-  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
-</zan-cell-group>
+  </van-cell>
+  <van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
+</van-cell-group>
 
               </example-block></section></template>
 
diff --git a/docs/examples-dist/checkbox.vue b/docs/examples-dist/checkbox.vue
index 302e1893b..9a9b13486 100644
--- a/docs/examples-dist/checkbox.vue
+++ b/docs/examples-dist/checkbox.vue
@@ -1,43 +1,43 @@
 <template><section class="demo-checkbox"><h1 class="demo-title">Checkbox 复选框</h1><example-block title="基础用法">
-                <div class="zan-checkbox-wrapper">
-  <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+                <div class="van-checkbox-wrapper">
+  <van-checkbox v-model="checkbox1">复选框1</van-checkbox>
 </div>
 
 
 
               </example-block><example-block title="禁用状态">
-                <div class="zan-checkbox-wrapper">
-  <zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+                <div class="van-checkbox-wrapper">
+  <van-checkbox v-model="checkbox2">复选框2</van-checkbox>
 </div>
 
 
 
               </example-block><example-block title="Checkbox组">
-                <div class="zan-checkbox-wrapper">
-  <zan-checkbox-group v-model="result">
-    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-  </zan-checkbox-group>
+                <div class="van-checkbox-wrapper">
+  <van-checkbox-group v-model="result">
+    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+  </van-checkbox-group>
 </div>
 
 
 
               </example-block><example-block title="禁用Checkbox组">
-                <div class="zan-checkbox-wrapper">
-  <zan-checkbox-group v-model="result" disabled>
-    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-  </zan-checkbox-group>
+                <div class="van-checkbox-wrapper">
+  <van-checkbox-group v-model="result" disabled>
+    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+  </van-checkbox-group>
 </div>
 
 
 
               </example-block><example-block title="与Cell组件一起使用">
-                <zan-checkbox-group v-model="result">
-  <zan-cell-group>
-    <zan-cell v-for="item in list">
-      <zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
-    </zan-cell>
-  </zan-cell-group>
-</zan-checkbox-group>
+                <van-checkbox-group v-model="result">
+  <van-cell-group>
+    <van-cell v-for="item in list">
+      <van-checkbox :name="item">复选框{{item}}</van-checkbox>
+    </van-cell>
+  </van-cell-group>
+</van-checkbox-group>
 
 
 
@@ -45,10 +45,10 @@
 <style>
 @component-namespace demo {
   @b checkbox {
-    .zan-checkbox-wrapper {
+    .van-checkbox-wrapper {
       padding: 0 20px;
 
-      .zan-checkbox {
+      .van-checkbox {
         margin: 10px 0;
       }
     }
diff --git a/docs/examples-dist/dialog.vue b/docs/examples-dist/dialog.vue
index a9e030938..52a14caaa 100644
--- a/docs/examples-dist/dialog.vue
+++ b/docs/examples-dist/dialog.vue
@@ -1,11 +1,11 @@
 <template><section class="demo-dialog"><h1 class="demo-title">Dialog 弹出框</h1><example-block title="消息提示">
-                <zan-button @click="handleAlertClick">alert</zan-button>
-<zan-button @click="handleAlert2Click">无标题alert</zan-button>
+                <van-button @click="handleAlertClick">alert</van-button>
+<van-button @click="handleAlert2Click">无标题alert</van-button>
 
 
 
               </example-block><example-block title="消息确认">
-                <zan-button @click="handleConfirmClick">confirm</zan-button>
+                <van-button @click="handleConfirmClick">confirm</van-button>
 
 
 
@@ -13,7 +13,7 @@
 <style>
 @component-namespace demo {
   @b dialog {
-    .zan-button {
+    .van-button {
       margin: 15px;
     }
   }
diff --git a/docs/examples-dist/field.vue b/docs/examples-dist/field.vue
index 320ebfdd6..1241f24af 100644
--- a/docs/examples-dist/field.vue
+++ b/docs/examples-dist/field.vue
@@ -1,40 +1,40 @@
 <template><section class="demo-field"><h1 class="demo-title">Field 输入框</h1><example-block title="基础用法">
-                <zan-cell-group>
-  <zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></zan-field>
-  <zan-field type="password" label="密码：" placeholder="请输入密码" required></zan-field>
-  <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></zan-field>
-</zan-cell-group>
+                <van-cell-group>
+  <van-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></van-field>
+  <van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
+  <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
+</van-cell-group>
 
               </example-block><example-block title="无label的输入框">
-                <zan-cell-group>
-  <zan-field type="text" placeholder="请输入用户名"></zan-field>
-</zan-cell-group>
+                <van-cell-group>
+  <van-field type="text" placeholder="请输入用户名"></van-field>
+</van-cell-group>
 
               </example-block><example-block title="带border的输入框">
-                <div class="zan-field-wrapper">
-  <zan-field type="text" placeholder="请输入用户名" border=""></zan-field>
+                <div class="van-field-wrapper">
+  <van-field type="text" placeholder="请输入用户名" border=""></van-field>
 </div>
 
               </example-block><example-block title="禁用的输入框">
-                <zan-cell-group>
-  <zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
-</zan-cell-group>
+                <van-cell-group>
+  <van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
+</van-cell-group>
 
               </example-block><example-block title="错误的输入框">
-                <zan-cell-group>
-  <zan-field label="用户名：" type="text" placeholder="请输入用户名" error=""></zan-field>
-</zan-cell-group>
+                <van-cell-group>
+  <van-field label="用户名：" type="text" placeholder="请输入用户名" error=""></van-field>
+</van-cell-group>
 
               </example-block><example-block title="错误的输入框">
-                <zan-cell-group>
-  <zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize=""></zan-field>
-</zan-cell-group>
+                <van-cell-group>
+  <van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize=""></van-field>
+</van-cell-group>
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b field {
-    .zan-field-wrapper {
+    .van-field-wrapper {
       padding: 0 10px;
     }
   }
diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue
index e0cf80c4c..aa1b14017 100644
--- a/docs/examples-dist/icon.vue
+++ b/docs/examples-dist/icon.vue
@@ -1,150 +1,150 @@
 <template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
-                <zan-row>
-  <zan-col span="8">
-   <zan-icon name="qr-invalid"></zan-icon>
+                <van-row>
+  <van-col span="8">
+   <van-icon name="qr-invalid"></van-icon>
    <span>qr-invalid</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="qr"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="qr"></van-icon>
    <span>qr</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="exchange"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="exchange"></van-icon>
    <span>exchange</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="close"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="close"></van-icon>
    <span>close</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="location"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="location"></van-icon>
    <span>location</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="upgrade"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="upgrade"></van-icon>
    <span>upgrade</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="check"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="check"></van-icon>
    <span>check</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="checked"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="checked"></van-icon>
    <span>checked</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="like-o"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="like-o"></van-icon>
    <span>like-o</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="like" style="color: red;"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="like" style="color: red;"></van-icon>
    <span>like</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="chat"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="chat"></van-icon>
    <span>chat</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="shop"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="shop"></van-icon>
    <span>shop</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="photograph"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="photograph"></van-icon>
    <span>photograph</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="add"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="add"></van-icon>
    <span>add</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="add2"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="add2"></van-icon>
    <span>add2</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="photo"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="photo"></van-icon>
    <span>photo</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="logistics"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="logistics"></van-icon>
    <span>logistics</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="edit"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="edit"></van-icon>
    <span>edit</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="passed"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="passed"></van-icon>
    <span>passed</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="cart"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="cart"></van-icon>
    <span>cart</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="arrow"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="arrow"></van-icon>
    <span>arrow</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="gift"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="gift"></van-icon>
    <span>gift</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="search"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="search"></van-icon>
    <span>search</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="clear"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="clear"></van-icon>
    <span>clear</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="success"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="success"></van-icon>
    <span>success</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="fail"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="fail"></van-icon>
    <span>fail</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="contact"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="contact"></van-icon>
    <span>contact</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="wechat"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="wechat"></van-icon>
    <span>wechat</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="alipay"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="alipay"></van-icon>
    <span>alipay</span>
-  </zan-col>
-</zan-row>
+  </van-col>
+</van-row>
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b icon {
-    .zan-col {
+    .van-col {
       text-align: center;
     }
 
-    .zan-icon {
+    .van-icon {
       font-size: 45px;
       display: block;
       margin: 15px 0;
diff --git a/docs/examples-dist/image-preview.vue b/docs/examples-dist/image-preview.vue
index 900a26e58..28572f8a9 100644
--- a/docs/examples-dist/image-preview.vue
+++ b/docs/examples-dist/image-preview.vue
@@ -1,5 +1,5 @@
 <template><section class="demo-image-preview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="基础用法">
-                <zan-button @click="handleImagePreview">预览图片</zan-button>
+                <van-button @click="handleImagePreview">预览图片</van-button>
 
 
 
@@ -7,7 +7,7 @@
 <style>
 @component-namespace demo {
   @b image-preview {
-    .zan-button {
+    .van-button {
       margin-left: 15px;
     }
   }
diff --git a/docs/examples-dist/layout.vue b/docs/examples-dist/layout.vue
index 188cdb028..dba33ea82 100644
--- a/docs/examples-dist/layout.vue
+++ b/docs/examples-dist/layout.vue
@@ -1,50 +1,50 @@
 <template><section class="demo-layout"><h1 class="demo-title">Layout 布局</h1><example-block title="常规用法">
-                <zan-row>
-  <zan-col span="8">
+                <van-row>
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-  <zan-col span="8">
+  </van-col>
+  <van-col span="8">
     <div class="white">span: 8</div>
-  </zan-col>
-  <zan-col span="8">
+  </van-col>
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="4">
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="4">
     <div class="gray">span: 4</div>
-  </zan-col>
-  <zan-col span="10" offset="4">
+  </van-col>
+  <van-col span="10" offset="4">
     <div class="gray">offset: 4, span: 10</div>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col offset="12" span="12">
+  </van-col>
+</van-row>
+<van-row>
+  <van-col offset="12" span="12">
     <div class="gray">offset: 12, span: 12</div>
-  </zan-col>
-</zan-row>
+  </van-col>
+</van-row>
 
               </example-block><example-block title="在列元素之间增加间距">
-                <zan-row gutter="10">
-  <zan-col span="8">
+                <van-row gutter="10">
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-  <zan-col span="8">
+  </van-col>
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-  <zan-col span="8">
+  </van-col>
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-</zan-row>
+  </van-col>
+</van-row>
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b layout {
-    .zan-row {
+    .van-row {
       padding: 0 20px;
     }
-    .zan-col {
+    .van-col {
       margin-bottom: 10px;
     }
   }
diff --git a/docs/examples-dist/loading.vue b/docs/examples-dist/loading.vue
index e112e69d3..d4fe48b14 100644
--- a/docs/examples-dist/loading.vue
+++ b/docs/examples-dist/loading.vue
@@ -1,20 +1,20 @@
 <template><section class="demo-loading"><h1 class="demo-title">Loading 加载</h1><example-block title="渐变深色spinner">
-                <zan-loading class="some-customized-class"></zan-loading>
+                <van-loading class="some-customized-class"></van-loading>
 
               </example-block><example-block title="渐变浅色spinner">
                 <div class="demo-loading__example demo-loading__example--with-bg">
-  <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
+  <van-loading class="some-customized-class" :color="'white'"></van-loading>
 </div>
 
               </example-block><example-block title="单色spinner">
-                <zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
-<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
+                <van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
+<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b loading {
-    .zan-loading {
+    .van-loading {
       margin: 0 auto;
     }
 
diff --git a/docs/examples-dist/panel.vue b/docs/examples-dist/panel.vue
index 21624675d..c4a86f503 100644
--- a/docs/examples-dist/panel.vue
+++ b/docs/examples-dist/panel.vue
@@ -1,40 +1,40 @@
 <template><section class="demo-panel"><h1 class="demo-title">Panel 面板</h1><example-block title="基础用法">
-                <zan-panel title="标题" desc="标题描述" status="状态">
+                <van-panel title="标题" desc="标题描述" status="状态">
   <div class="panel-content">
     panel内容
   </div>
-</zan-panel>
+</van-panel>
 
               </example-block><example-block title="高级用法">
-                <zan-panel title="标题" desc="标题描述" status="状态">
-  <zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-    <div class="zan-card__row" slot="title">
-      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-      <span class="zan-card__price">¥ 2.00</span>
+                <van-panel title="标题" desc="标题描述" status="状态">
+  <van-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="van-card__row" slot="title">
+      <h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="van-card__price">¥ 2.00</span>
     </div>
-    <div class="zan-card__row" slot="desc">
-      <h4 class="zan-card__desc">商品sku</h4>
-      <span class="zan-card__num">x 2</span>
+    <div class="van-card__row" slot="desc">
+      <h4 class="van-card__desc">商品sku</h4>
+      <span class="van-card__num">x 2</span>
     </div>
-    <div class="zan-card__footer" slot="footer">
-      <zan-button size="mini">按钮一</zan-button>
-      <zan-button size="mini">按钮二</zan-button>
+    <div class="van-card__footer" slot="footer">
+      <van-button size="mini">按钮一</van-button>
+      <van-button size="mini">按钮二</van-button>
     </div>
-  </zan-card>
-  <div class="zan-panel-sum">
+  </van-card>
+  <div class="van-panel-sum">
     合计：<span>¥ 1999.90</span>
   </div>
-  <div class="zan-panel-buttons" slot="footer">
-    <zan-button size="small">按钮一</zan-button>
-    <zan-button size="small" type="danger">按钮二</zan-button>
+  <div class="van-panel-buttons" slot="footer">
+    <van-button size="small">按钮一</van-button>
+    <van-button size="small" type="danger">按钮二</van-button>
   </div>
-</zan-panel>
+</van-panel>
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b panel {
-    .zan-panel-sum {
+    .van-panel-sum {
       background: #fff;
       text-align: right;
       font-size: 14px;
@@ -47,10 +47,10 @@
       }
     }
 
-    .zan-panel-buttons {
+    .van-panel-buttons {
       text-align: right;
 
-      .zan-button {
+      .van-button {
         margin-left: 5px;
       }
     }
diff --git a/docs/examples-dist/popup.vue b/docs/examples-dist/popup.vue
index aade7cef3..1db6b6907 100644
--- a/docs/examples-dist/popup.vue
+++ b/docs/examples-dist/popup.vue
@@ -1,32 +1,32 @@
 <template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
-                <zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
-<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
+                <van-button @click="popupShow1 = true">从中间弹出popup</van-button>
+<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
   从中间弹出popup
-</zan-popup>
+</van-popup>
 
 
 
               </example-block><example-block title="从不同位置弹出菜单">
-                <zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
-<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
-  <zan-button @click="showDialog">弹出dialog</zan-button>
-</zan-popup>
+                <van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
+<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
+  <van-button @click="showDialog">弹出dialog</van-button>
+</van-popup>
 
-<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
-<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
+<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
+<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
   更新成功
-</zan-popup>
+</van-popup>
 
-<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
-<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
-  <zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
-</zan-popup>
+<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
+<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
+  <van-button @click.native="popupShow4 = false">关闭 popup</van-button>
+</van-popup>
 
 
-<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
-<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
-  <zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
-</zan-popup>
+<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
+<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
+  <van-button @click.native="popupShow5 = false">关闭 popup</van-button>
+</van-popup>
 
 
 
@@ -34,11 +34,11 @@
 <style>
 @component-namespace demo {
   @b popup {
-    .zan-button {
+    .van-button {
       margin: 10px 15px;
     }
 
-    .zan-popup-1 {
+    .van-popup-1 {
       width: 60%;
       box-sizing: border-box;
       padding: 20px;
@@ -46,22 +46,22 @@
       text-align: center;
     }
 
-    .zan-popup-2 {
+    .van-popup-2 {
       width: 100%;
       height: 200px;
       box-sizing: border-box;
       padding: 20px;
     }
 
-    .zan-popup-3 {
+    .van-popup-3 {
       line-height: 50px;
       text-align: center;
       background-color: rgba(0, 0, 0, 0.701961);
       color: #fff;
     }
 
-    .zan-popup-4,
-    .zan-popup-5 {
+    .van-popup-4,
+    .van-popup-5 {
       width: 100%;
       height: 100%;
     }
diff --git a/docs/examples-dist/progress.vue b/docs/examples-dist/progress.vue
index cf1d4e170..cda4022da 100644
--- a/docs/examples-dist/progress.vue
+++ b/docs/examples-dist/progress.vue
@@ -1,34 +1,34 @@
 <template><section class="demo-progress"><h1 class="demo-title">Progress 进度条</h1><example-block title="基础用法">
                 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
+  <van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo2" :percentage="46"></zan-progress>
+  <van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" :percentage="100"></zan-progress>
+  <van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
 </div>
 
               </example-block><example-block title="Inactive">
                 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></zan-progress>
+  <van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></zan-progress>
+  <van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
+  <van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
 </div>
 
               </example-block><example-block title="自定义颜色和文字">
                 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
+  <van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
+  <van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
+  <van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
 </div>
 
               </example-block></section></template>
diff --git a/docs/examples-dist/quantity.vue b/docs/examples-dist/quantity.vue
index c61855fa3..29a320821 100644
--- a/docs/examples-dist/quantity.vue
+++ b/docs/examples-dist/quantity.vue
@@ -1,19 +1,19 @@
 <template><section class="demo-quantity"><h1 class="demo-title">Quantity 数量选择</h1><example-block title="基础用法">
-                <zan-quantity v-model="quantity1"></zan-quantity>
+                <van-quantity v-model="quantity1"></van-quantity>
 <p class="curr-quantity">当前值：{{ quantity1 }}</p>
 
               </example-block><example-block title="禁用Quantity">
-                <zan-quantity v-model="quantity1" disabled></zan-quantity>
+                <van-quantity v-model="quantity1" disabled></van-quantity>
 
               </example-block><example-block title="高级用法">
-                <zan-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></zan-quantity>
+                <van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
 <p class="curr-quantity">当前值：{{ quantity2 }}</p>
 
               </example-block></section></template>
 <style>
 @component-namespace demo {
   @b quantity {
-    .zan-quantity {
+    .van-quantity {
       margin-left: 15px;
     }
 
diff --git a/docs/examples-dist/radio.vue b/docs/examples-dist/radio.vue
index c003e4f2c..978319c8a 100644
--- a/docs/examples-dist/radio.vue
+++ b/docs/examples-dist/radio.vue
@@ -1,36 +1,36 @@
 <template><section class="demo-radio"><h1 class="demo-title">Radio 单选框</h1><example-block title="基础用法">
-                <div class="zan-radios">
-  <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
-  <zan-radio name="2" v-model="radio1">单选框2</zan-radio>
+                <div class="van-radios">
+  <van-radio name="1" v-model="radio1">单选框1</van-radio>
+  <van-radio name="2" v-model="radio1">单选框2</van-radio>
 </div>
 
 
 
               </example-block><example-block title="禁用状态">
-                <div class="zan-radios">
-  <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
-  <zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
+                <div class="van-radios">
+  <van-radio name="1" v-model="radio2" disabled>未选中禁用</van-radio>
+  <van-radio name="2" v-model="radio2" disabled>选中且禁用</van-radio>
 </div>
 
 
 
               </example-block><example-block title="radio组">
-                <div class="zan-radios">
-  <zan-radio-group v-model="radio3">
-    <zan-radio name="1">单选框1</zan-radio>
-    <zan-radio name="2">单选框2</zan-radio>
-  </zan-radio-group>
+                <div class="van-radios">
+  <van-radio-group v-model="radio3">
+    <van-radio name="1">单选框1</van-radio>
+    <van-radio name="2">单选框2</van-radio>
+  </van-radio-group>
 </div>
   
 
 
               </example-block><example-block title="与Cell组件一起使用">
-                <zan-radio-group v-model="radio4">
-  <zan-cell-group>
-    <zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
-    <zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
-  </zan-cell-group>
-</zan-radio-group>
+                <van-radio-group v-model="radio4">
+  <van-cell-group>
+    <van-cell><van-radio name="1">单选框1</van-radio></van-cell>
+    <van-cell><van-radio name="2">单选框2</van-radio></van-cell>
+  </van-cell-group>
+</van-radio-group>
 
 
 
@@ -38,10 +38,10 @@
 <style>
 @component-namespace demo {
   @b radio {
-    .zan-radios {
+    .van-radios {
       padding: 0 20px;
 
-      .zan-radio {
+      .van-radio {
         margin: 10px 0;
       }
     }
diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue
index 0f9c82a9d..24b981d97 100644
--- a/docs/examples-dist/search.vue
+++ b/docs/examples-dist/search.vue
@@ -1,10 +1,10 @@
 <template><section class="demo-search"><h1 class="demo-title">Search 搜索</h1><example-block title="基础用法">
-                <zan-search placeholder="商品名称" @search="goSearch"></zan-search>
+                <van-search placeholder="商品名称" @search="goSearch"></van-search>
 
 
 
               </example-block><example-block title="监听对应事件">
-                <zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
+                <van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
 
 
 
diff --git a/docs/examples-dist/steps.vue b/docs/examples-dist/steps.vue
index d8fb6b1d8..d933b9a1f 100644
--- a/docs/examples-dist/steps.vue
+++ b/docs/examples-dist/steps.vue
@@ -1,22 +1,22 @@
 <template><section class="demo-steps"><h1 class="demo-title">Steps 步骤条</h1><example-block title="基础用法">
-                <zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
-  <zan-step>买家下单</zan-step>
-  <zan-step>商家接单</zan-step>
-  <zan-step>买家提货</zan-step>
-  <zan-step>交易完成</zan-step>
-</zan-steps>
+                <van-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>
+</van-steps>
 
-<zan-button @click="nextStep">下一步</zan-button>
+<van-button @click="nextStep">下一步</van-button>
 
 
 
               </example-block><example-block title="只显示步骤条">
-                <zan-steps :active="active">
-  <zan-step>买家下单</zan-step>
-  <zan-step>商家接单</zan-step>
-  <zan-step>买家提货</zan-step>
-  <zan-step>交易完成</zan-step>
-</zan-steps>
+                <van-steps :active="active">
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>
+</van-steps>
 
               </example-block></section></template>
 <style>
@@ -26,7 +26,7 @@
       color: #06bf04;
     }
 
-    .zan-button {
+    .van-button {
       margin: 15px 0 0 15px;
     }
   }
diff --git a/docs/examples-dist/swipe.vue b/docs/examples-dist/swipe.vue
index d0f978832..9d90f3e0e 100644
--- a/docs/examples-dist/swipe.vue
+++ b/docs/examples-dist/swipe.vue
@@ -1,18 +1,18 @@
 <template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
-                <zan-swipe>
-  <zan-swipe-item v-for="img in images">
+                <van-swipe>
+  <van-swipe-item v-for="img in images">
     <img v-lazy="img" alt="">
-  </zan-swipe-item>
-</zan-swipe>
+  </van-swipe-item>
+</van-swipe>
 
 
 
               </example-block><example-block title="自动轮播">
-                <zan-swipe auto-play="" @pagechange:end="handlePageEnd">
-  <zan-swipe-item v-for="img in autoImages">
+                <van-swipe auto-play="" @pagechange:end="handlePageEnd">
+  <van-swipe-item v-for="img in autoImages">
     <img v-lazy="img" alt="">
-  </zan-swipe-item>
-</zan-swipe>
+  </van-swipe-item>
+</van-swipe>
 
 
 
@@ -20,7 +20,7 @@
 <style>
 @component-namespace demo {
   @b swipe {
-    .zan-swipe {
+    .van-swipe {
       height: 200px;
 
       img {
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
index 249bf6dd3..942e36132 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -1,31 +1,31 @@
 <template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
-                <zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
+                <van-switch class="some-customized-class" v-model="switchState1"></van-switch>
 <div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
 
 
 
 
               </example-block><example-block title="">
-                <zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
+                <van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
 <div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
 
 
 
 
               </example-block><example-block title="禁用状态">
-                <zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
+                <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
 <div class="demo-switch__text">ON, DISABLED</div>
 
-<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
+<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
 <div class="demo-switch__text">OFF, DISABLED</div>
 
 
 
               </example-block><example-block title="loading状态">
-                <zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
+                <van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
 <div class="demo-switch__text">ON, LOADING</div>
 
-<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
+<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
 <div class="demo-switch__text">OFF, LOADING</div>
 
 
diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue
index 52feae671..81f758ed8 100644
--- a/docs/examples-dist/tab.vue
+++ b/docs/examples-dist/tab.vue
@@ -1,60 +1,60 @@
 <template><section class="demo-tab"><h1 class="demo-title">Tab 标签</h1><example-block title="基础用法">
-                <zan-tabs>
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+                <van-tabs>
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 
               </example-block><example-block title="基础用法">
-                <zan-tabs :active="active">
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+                <van-tabs :active="active">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 
               </example-block><example-block title="禁用tab">
-                <zan-tabs>
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+                <van-tabs>
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 
 
 
               </example-block><example-block title="card样式">
-                <zan-tabs type="card">
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+                <van-tabs type="card">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 
               </example-block><example-block title="自定义样式">
-                <zan-tabs active="2" class="custom-tabwrap">
-    <zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
-    <zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
-    <zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
-    <zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
-    <zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
-</zan-tabs>
+                <van-tabs active="2" class="custom-tabwrap">
+    <van-tab title="选项一" class="custom-pane">内容一</van-tab>
+    <van-tab title="选项二" class="custom-pane">内容二</van-tab>
+    <van-tab title="选项三" class="custom-pane">内容三</van-tab>
+    <van-tab title="选项四" class="custom-pane">内容四</van-tab>
+    <van-tab title="选项五" class="custom-pane">内容五</van-tab>
+</van-tabs>
 
 
 
               </example-block><example-block title="click事件">
-                <zan-tabs @click="handleTabClick">
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+                <van-tabs @click="handleTabClick">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 
 
 
@@ -62,19 +62,19 @@
 <style>
 @component-namespace demo {
   @b tab {
-    .zan-tab__pane {
+    .van-tab__pane {
       background-color: #fff;
       padding: 20px;
     }
 
-    .zan-tabs--card .zan-tab__pane {
+    .van-tabs--card .van-tab__pane {
       background-color: transparent;
     }
 
-    .custom-tabwrap .zan-tab-active {
+    .custom-tabwrap .van-tab-active {
       color: #20a0ff;
     }
-    .custom-tabwrap .zan-tabs-nav-bar {
+    .custom-tabwrap .van-tabs-nav-bar {
       background: #20a0ff;
     }
     .custom-pane {
@@ -85,10 +85,10 @@
   }
 }
 </style><style>
-  .custom-tabwrap .zan-tab-active {
+  .custom-tabwrap .van-tab-active {
     color: #20a0ff;
   }
-  .custom-tabwrap .zan-tabs-nav-bar {
+  .custom-tabwrap .van-tabs-nav-bar {
     background: #20a0ff;
   }
   .custom-pane {
diff --git a/docs/examples-dist/tag.vue b/docs/examples-dist/tag.vue
index 6ab4dfb6d..1f2e2e702 100644
--- a/docs/examples-dist/tag.vue
+++ b/docs/examples-dist/tag.vue
@@ -1,29 +1,29 @@
 <template><section class="demo-tag"><h1 class="demo-title">Tag 标记</h1><example-block title="基础用法">
                 <div class="tags-container">
-  <zan-tag>返现</zan-tag>
-  <zan-tag plain="">返现</zan-tag>
+  <van-tag>返现</van-tag>
+  <van-tag plain="">返现</van-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="danger">返现</zan-tag>
-  <zan-tag type="danger">四字标签</zan-tag>
-  <zan-tag type="danger">一</zan-tag>
+  <van-tag type="danger">返现</van-tag>
+  <van-tag type="danger">四字标签</van-tag>
+  <van-tag type="danger">一</van-tag>
 </div>
 
               </example-block><example-block title="高级用法">
                 <div class="tags-container">
-  <zan-tag type="danger">返现</zan-tag>
-  <zan-tag plain="" type="danger">返现</zan-tag>
+  <van-tag type="danger">返现</van-tag>
+  <van-tag plain="" type="danger">返现</van-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="primary">返现</zan-tag>
-  <zan-tag plain="" type="primary">返现</zan-tag>
+  <van-tag type="primary">返现</van-tag>
+  <van-tag plain="" type="primary">返现</van-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="success">返现</zan-tag>
-  <zan-tag plain="" type="success">返现</zan-tag>
+  <van-tag type="success">返现</van-tag>
+  <van-tag plain="" type="success">返现</van-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="danger" mark="">返现</zan-tag>
+  <van-tag type="danger" mark="">返现</van-tag>
 </div>
 
               </example-block></section></template>
@@ -31,7 +31,7 @@
 .tags-container {
   padding: 5px 15px;
 
-  .zan-tag + .zan-tag {
+  .van-tag + .van-tag {
     margin-left: 10px;
   }
 }
diff --git a/docs/examples-dist/toast.vue b/docs/examples-dist/toast.vue
index 584389b92..918f64275 100644
--- a/docs/examples-dist/toast.vue
+++ b/docs/examples-dist/toast.vue
@@ -1,21 +1,21 @@
 <template><section class="demo-toast"><h1 class="demo-title">Toast 轻提示</h1><example-block title="基础用法">
-                <zan-button @click="showSimpleToast">普通文字提示</zan-button>
-<zan-button @click="showLoadingToast">加载Toast</zan-button>
-<zan-button @click="showSuccessToast">成功</zan-button>
-<zan-button @click="showFailToast">失败</zan-button>
-<zan-button @click="showForbidClickToast">背景不能点击</zan-button>
-<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
+                <van-button @click="showSimpleToast">普通文字提示</van-button>
+<van-button @click="showLoadingToast">加载Toast</van-button>
+<van-button @click="showSuccessToast">成功</van-button>
+<van-button @click="showFailToast">失败</van-button>
+<van-button @click="showForbidClickToast">背景不能点击</van-button>
+<van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
 
 
 
               </example-block><example-block title="手动关闭">
-                <zan-button @click="showToast">打开</zan-button>
-<zan-button @click="closeToast">关闭</zan-button>
+                <van-button @click="showToast">打开</van-button>
+<van-button @click="closeToast">关闭</van-button>
 
 
 
               </example-block><example-block title="手动关闭">
-                <zan-button @click="showHtmlToast">打开</zan-button>
+                <van-button @click="showHtmlToast">打开</van-button>
 
 
 
@@ -23,7 +23,7 @@
 <style>
 @component-namespace demo {
   @b toast {
-    .zan-button {
+    .van-button {
       margin: 15px;
     }
   }
diff --git a/docs/examples-dist/uploader.vue b/docs/examples-dist/uploader.vue
index 5aed1da63..46342acc4 100644
--- a/docs/examples-dist/uploader.vue
+++ b/docs/examples-dist/uploader.vue
@@ -1,8 +1,8 @@
 <template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="基础用法">
                 <div class="uploader-container">
-  <zan-uploader :after-read="logContent">
-    <zan-icon name="photograph"></zan-icon>
-  </zan-uploader>
+  <van-uploader :after-read="logContent">
+    <van-icon name="photograph"></van-icon>
+  </van-uploader>
 </div>
 
               </example-block></section></template>
diff --git a/docs/examples-docs/actionsheet.md b/docs/examples-docs/actionsheet.md
index c44233bd1..1f9d28d42 100644
--- a/docs/examples-docs/actionsheet.md
+++ b/docs/examples-docs/actionsheet.md
@@ -5,7 +5,7 @@
       color: #06BF04;
     }
 
-    .zan-button {
+    .van-button {
       margin-left: 15px;
     }
 
@@ -63,7 +63,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -71,8 +71,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { ActionSheet } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/actionSheet.css';
+import { ActionSheet } from 'vant';
+import 'vant/lib/vant-css/actionSheet.css';
 
 Vue.component(ActionSheet.name, ActionSheet);
 ```
@@ -82,11 +82,11 @@ Vue.component(ActionSheet.name, ActionSheet);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`ActionSheet`组件，这样只能在你注册的组件中使用`ActionSheet`：
 
 ```js
-import { ActionSheet } from '@youzan/zanui-vue';
+import { ActionSheet } from 'vant';
 
 export default {
   components: {
-    'zan-actionSheet': ActionSheet
+    'van-actionSheet': ActionSheet
   }
 };
 ```
@@ -99,9 +99,9 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-button @click="show1 = true">弹出actionsheet</zan-button>
-<zan-actionsheet v-model="show1" :actions="actions1">
-</zan-actionsheet>
+<van-button @click="show1 = true">弹出actionsheet</van-button>
+<van-actionsheet v-model="show1" :actions="actions1">
+</van-actionsheet>
 
 <script>
 export default {
@@ -148,9 +148,9 @@ export default {
 
 :::demo 带取消按钮的ActionSheet
 ```html
-<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
-<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
-</zan-actionsheet>
+<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
+<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
+</van-actionsheet>
 
 <script>
 export default {
@@ -191,16 +191,16 @@ export default {
 
 :::demo 带标题的ActionSheet
 ```html
-<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
-<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
+<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
+<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
   <p>一些内容</p>
-</zan-actionsheet>
+</van-actionsheet>
 ```
 :::
 
 点击以下按钮查看手机端效果：
 
-<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
 <mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
 
 ### API
diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index 16df3057e..baadb3ed4 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -6,7 +6,7 @@
       background-color: #fff;
     }
 
-    .zan-badge-group {
+    .van-badge-group {
       margin: 0 auto;
     }
   }
@@ -32,7 +32,7 @@
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -40,8 +40,8 @@
 
 ```js
 import Vue from 'vue';
-import { Badge, BadgeGroup } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/badge.css';
+import { Badge, BadgeGroup } from 'vant';
+import 'vant/lib/vant-css/badge.css';
 
 Vue.component(Badge.name, Badge);
 Vue.component(BadgeGroup.name, BadgeGroup);
@@ -52,12 +52,12 @@ Vue.component(BadgeGroup.name, BadgeGroup);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
 
 ```js
-import { Badge, BadgeGroup } from '@youzan/zanui-vue';
+import { Badge, BadgeGroup } from 'vant';
 
 export default {
   components: {
-    'zan-badge': Badge,
-    'zan-badge-group': BadgeGroup
+    'van-badge': Badge,
+    'van-badge-group': BadgeGroup
   }
 };
 ```
@@ -71,29 +71,29 @@ export default {
 :::demo 基础用法
 ```html
 <div class="badge-group-wrapper">
-  <zan-badge-group>
-    <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-    <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-    <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
-    <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
-  </zan-badge-group>
+  <van-badge-group>
+    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
+    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
+    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
+    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
+  </van-badge-group>
 </div>
 ```
 :::
 
 #### 选中某个badge
 
-如果想默认选中某个`badge`，你可以在`zan-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
+如果想默认选中某个`badge`，你可以在`van-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
 
 :::demo 选中某个badge
 ```html
 <div class="badge-group-wrapper">
-  <zan-badge-group :active-key="2">
-    <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-    <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-    <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
-    <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
-  </zan-badge-group>
+  <van-badge-group :active-key="2">
+    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
+    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
+    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
+    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
+  </van-badge-group>
 </div>
 ```
 :::
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index 16c66bf66..81b2f5246 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -1,10 +1,10 @@
 <style>
 @component-namespace demo {
   @b button {
-    .zan-row {
+    .van-row {
       padding: 0 15px;
     }
-    .zan-col {
+    .van-col {
       margin-bottom: 10px;
     }
   }
@@ -15,7 +15,7 @@
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -23,8 +23,8 @@
 
 ```js
 import Vue from 'vue';
-import { Button } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/button.css';
+import { Button } from 'vant';
+import 'vant/lib/vant-css/button.css';
 
 Vue.component(Button.name, Button);
 ```
@@ -34,11 +34,11 @@ Vue.component(Button.name, Button);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`：
 
 ```js
-import { Button } from '@youzan/zanui-vue';
+import { Button } from 'vant';
 
 export default {
   components: {
-    'zan-button': Button
+    'van-button': Button
   }
 };
 ```
@@ -51,17 +51,17 @@ export default {
 
 :::demo 按钮功能
 ```html
-<zan-row>
-  <zan-col span="24">
-    <zan-button block>default</zan-button>
-  </zan-col>
-  <zan-col span="24">
-    <zan-button type="primary" block>primary</zan-button>
-  </zan-col>
-  <zan-col span="24">
-    <zan-button type="danger" block>danger</zan-button>
-  </zan-col>
-</zan-row>
+<van-row>
+  <van-col span="24">
+    <van-button block>default</van-button>
+  </van-col>
+  <van-col span="24">
+    <van-button type="primary" block>primary</van-button>
+  </van-col>
+  <van-col span="24">
+    <van-button type="danger" block>danger</van-button>
+  </van-col>
+</van-row>
 ```
 :::
 
@@ -71,11 +71,11 @@ export default {
 
 :::demo 禁用状态
 ```html
-<zan-row>
-  <zan-col span="24">
-    <zan-button disabled block>diabled</zan-button>
-  </zan-col>
-</zan-row>
+<van-row>
+  <van-col span="24">
+    <van-button disabled block>diabled</van-button>
+  </van-col>
+</van-row>
 ```
 :::
 
@@ -85,26 +85,26 @@ export default {
 
 :::demo 按钮尺寸
 ```html 
-<zan-row>
-  <zan-col span="24">
-    <zan-button size="large">large</zan-button>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="24">
-    <zan-button size="normal">normal</zan-button>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="24">
-    <zan-button size="small">small</zan-button>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="24">
-    <zan-button size="mini">mini</zan-button>
-  </zan-col>
-</zan-row>
+<van-row>
+  <van-col span="24">
+    <van-button size="large">large</van-button>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="24">
+    <van-button size="normal">normal</van-button>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="24">
+    <van-button size="small">small</van-button>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="24">
+    <van-button size="mini">mini</van-button>
+  </van-col>
+</van-row>
 ```
 :::
 
@@ -114,11 +114,11 @@ export default {
 
 :::demo 自定义按钮标签
 ```html 
-<zan-row>
-  <zan-col span="24">
-    <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
-  </zan-col>
-</zan-row>
+<van-row>
+  <van-col span="24">
+    <van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
+  </van-col>
+</van-row>
 ```
 :::
 
@@ -128,14 +128,14 @@ export default {
 
 :::demo loading按钮
 ```html 
-<zan-row>
-  <zan-col span="24">
-    <zan-button type="primary" loading block>loading</zan-button>
-  </zan-col>
-  <zan-col span="24">
-    <zan-button loading block></zan-button>
-  </zan-col>
-</zan-row>
+<van-row>
+  <van-col span="24">
+    <van-button type="primary" loading block>loading</van-button>
+  </van-col>
+  <van-col span="24">
+    <van-button loading block></van-button>
+  </van-col>
+</van-row>
 ```
 :::
 
@@ -145,19 +145,19 @@ export default {
 
 :::demo 
 ```html 
-<zan-row>
-  <zan-col span="24">
-    <zan-button type="primary" bottom-action>立即购买</zan-button>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="12">
-    <zan-button bottom-action>加入购物车</zan-button>
-  </zan-col>
-  <zan-col span="12">
-    <zan-button type="primary" bottom-action>立即购买</zan-button>
-  </zan-col>
-</zan-row>
+<van-row>
+  <van-col span="24">
+    <van-button type="primary" bottom-action>立即购买</van-button>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="12">
+    <van-button bottom-action>加入购物车</van-button>
+  </van-col>
+  <van-col span="12">
+    <van-button type="primary" bottom-action>立即购买</van-button>
+  </van-col>
+</van-row>
 ```
 :::
 
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 624341f95..6bca59cd6 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -2,7 +2,7 @@
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -10,8 +10,8 @@
 
 ```js
 import Vue from 'vue';
-import { Card } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/card.css';
+import { Card } from 'vant';
+import 'vant/lib/vant-css/card.css';
 
 Vue.component(Card.name, Card);
 ```
@@ -21,11 +21,11 @@ Vue.component(Card.name, Card);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
 
 ```js
-import { Card } from '@youzan/zanui-vue';
+import { Card } from 'vant';
 
 export default {
   components: {
-    'zan-card': Card
+    'van-card': Card
   }
 };
 ```
@@ -38,11 +38,11 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-card
+<van-card
   title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
   desc="描述"
   thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-</zan-card>
+</van-card>
 ```
 :::
 
@@ -52,20 +52,20 @@ export default {
 
 :::demo 高级用法
 ```html
-<zan-card
+<van-card
   thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-  <div class="zan-card__row" slot="title">
-    <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-    <span class="zan-card__price">¥ 2.00</span>
+  <div class="van-card__row" slot="title">
+    <h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="van-card__price">¥ 2.00</span>
   </div>
-  <div class="zan-card__row" slot="desc">
-    <span class="zan-card__num">x 2</span>
+  <div class="van-card__row" slot="desc">
+    <span class="van-card__num">x 2</span>
   </div>
-  <div class="zan-card__footer" slot="footer">
-    <zan-button size="mini">按钮一</zan-button>
-    <zan-button size="mini">按钮二</zan-button>
+  <div class="van-card__footer" slot="footer">
+    <van-button size="mini">按钮一</van-button>
+    <van-button size="mini">按钮二</van-button>
   </div>
-</zan-card>
+</van-card>
 ```
 :::
 
diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index 7fd13dc36..7a6ba5642 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -12,7 +12,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -20,8 +20,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Cell } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/cell.css';
+import { Cell } from 'vant';
+import 'vant/lib/vant-css/cell.css';
 
 Vue.component(Cell.name, Cell);
 ```
@@ -31,11 +31,11 @@ Vue.component(Cell.name, Cell);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell`组件，这样只能在你注册的组件中使用`Cell`：
 
 ```js
-import { Cell } from '@youzan/zanui-vue';
+import { Cell } from 'vant';
 
 export default {
   components: {
-    'zan-cell': Cell
+    'van-cell': Cell
   }
 };
 ```
@@ -46,11 +46,10 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-cell-group>
-  <zan-cell title="单元格1" value="单元格1内容">
-  </zan-cell>
-  <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
-</zan-cell-group>
+<van-cell-group>
+  <van-cell title="单元格1" value="单元格1内容"></van-cell>
+  <van-cell title="单元格2" value="单元格2内容"></van-cell>
+</van-cell-group>
 ```
 :::
 
@@ -60,10 +59,10 @@ export default {
 
 :::demo 标题带描述信息
 ```html
-<zan-cell-group>
-  <zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
-  <zan-cell title="单元格2" label="描述信息"></zan-cell>
-</zan-cell-group>
+<van-cell-group>
+  <van-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></van-cell>
+  <van-cell title="单元格2" label="描述信息"></van-cell>
+</van-cell-group>
 ```
 :::
 
@@ -73,10 +72,10 @@ export default {
 
 :::demo 带图标
 ```html
-<zan-cell-group>
-  <zan-cell title="起码运动馆" icon="home"></zan-cell>
-  <zan-cell title="线下门店" icon="location"></zan-cell>
-</zan-cell-group>
+<van-cell-group>
+  <van-cell title="起码运动馆" icon="home"></van-cell>
+  <van-cell title="线下门店" icon="location"></van-cell>
+</van-cell-group>
 ```
 :::
 
@@ -86,10 +85,10 @@ export default {
 
 :::demo 可点击的链接
 ```html
-<zan-cell-group>
-  <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
-  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
-</zan-cell-group>
+<van-cell-group>
+  <van-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></van-cell>
+  <van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
+</van-cell-group>
 ```
 :::
 
@@ -99,15 +98,15 @@ export default {
 
 :::demo 高级用法
 ```html
-<zan-cell-group>
-  <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
+<van-cell-group>
+  <van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
     <template slot="title">
-      <span class="zan-cell-text">起码运动馆</span>
-      <zan-tag type="danger">官方</zan-tag>
+      <span class="van-cell-text">起码运动馆</span>
+      <van-tag type="danger">官方</van-tag>
     </template>
-  </zan-cell>
-  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
-</zan-cell-group>
+  </van-cell>
+  <van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
+</van-cell-group>
 ```
 :::
 
diff --git a/docs/examples-docs/checkbox.md b/docs/examples-docs/checkbox.md
index 3bc2fb72c..641378e75 100644
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
@@ -1,10 +1,10 @@
 <style>
 @component-namespace demo {
   @b checkbox {
-    .zan-checkbox-wrapper {
+    .van-checkbox-wrapper {
       padding: 0 20px;
 
-      .zan-checkbox {
+      .van-checkbox {
         margin: 10px 0;
       }
     }
@@ -39,7 +39,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -47,8 +47,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/checkbox.css';
+import { Checkbox, CheckboxGroup } from 'vant';
+import 'vant/lib/vant-css/checkbox.css';
 
 Vue.component(Checkbox.name, Checkbox);
 Vue.component(CheckboxGroup.name, CheckboxGroup);
@@ -59,24 +59,26 @@ Vue.component(CheckboxGroup.name, CheckboxGroup);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
 
 ```js
-import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
+import { Checkbox, CheckboxGroup } from 'vant';
 
 export default {
   components: {
-    'zan-checkbox': Checkbox,
-    'zan-checkbox-group': CheckboxGroup
+    'van-checkbox': Checkbox,
+    'van-checkbox-group': CheckboxGroup
   }
 };
 ```
 
-### 基础用法
+### 代码演示
+
+#### 基础用法
 
 通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
 
 :::demo 基础用法
 ```html
-<div class="zan-checkbox-wrapper">
-  <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+<div class="van-checkbox-wrapper">
+  <van-checkbox v-model="checkbox1">复选框1</van-checkbox>
 </div>
 
 <script>
@@ -91,14 +93,14 @@ export default {
 ```
 :::
 
-### 禁用状态
+#### 禁用状态
 
 设置`disabled`属性即可，此时`Checkbox`不能点击。
 
 :::demo 禁用状态
 ```html
-<div class="zan-checkbox-wrapper">
-  <zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+<div class="van-checkbox-wrapper">
+  <van-checkbox v-model="checkbox2">复选框2</van-checkbox>
 </div>
 
 <script>
@@ -113,16 +115,16 @@ export default {
 ```
 :::
 
-### Checkbox组
+#### Checkbox组
 
-需要与`zan-checkbox-group`一起使用，值通过`v-model`绑定在`zan-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
+需要与`van-checkbox-group`一起使用，值通过`v-model`绑定在`van-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
 
 :::demo Checkbox组
 ```html
-<div class="zan-checkbox-wrapper">
-  <zan-checkbox-group v-model="result">
-    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-  </zan-checkbox-group>
+<div class="van-checkbox-wrapper">
+  <van-checkbox-group v-model="result">
+    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+  </van-checkbox-group>
 </div>
 
 <script>
@@ -148,16 +150,16 @@ export default {
 ```
 :::
 
-### 禁用Checkbox组
+#### 禁用Checkbox组
 
-禁用`zan-checkbox-group`，此时整个组都不可点击。
+禁用`van-checkbox-group`，此时整个组都不可点击。
 
 :::demo 禁用Checkbox组
 ```html
-<div class="zan-checkbox-wrapper">
-  <zan-checkbox-group v-model="result" disabled>
-    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-  </zan-checkbox-group>
+<div class="van-checkbox-wrapper">
+  <van-checkbox-group v-model="result" disabled>
+    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+  </van-checkbox-group>
 </div>
 
 <script>
@@ -177,19 +179,19 @@ export default {
 ```
 :::
 
-### 与Cell组件一起使用
+#### 与Cell组件一起使用
 
 此时你需要再引入`Cell`和`CellGroup`组件。
 
 :::demo 与Cell组件一起使用
 ```html
-<zan-checkbox-group v-model="result">
-  <zan-cell-group>
-    <zan-cell v-for="item in list">
-      <zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
-    </zan-cell>
-  </zan-cell-group>
-</zan-checkbox-group>
+<van-checkbox-group v-model="result">
+  <van-cell-group>
+    <van-cell v-for="item in list">
+      <van-checkbox :name="item">复选框{{item}}</van-checkbox>
+    </van-cell>
+  </van-cell-group>
+</van-checkbox-group>
 
 <script>
 export default {
diff --git a/docs/examples-docs/datetime-picker.md b/docs/examples-docs/datetime-picker.md
index c3fc706bd..71bc391ba 100644
--- a/docs/examples-docs/datetime-picker.md
+++ b/docs/examples-docs/datetime-picker.md
@@ -26,13 +26,43 @@ export default {
 
 ## Datetime Picker 时间选择
 
-模仿iOS中的`UIPickerView`。
+### 使用指南
 
-### 基础用法
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
+
+```js
+import Vue from 'vue';
+import { DatetimePicker } from 'vant';
+
+Vue.component(DatetimePicker.name, DatetimePicker);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`DatetimePicker`组件，这样只能在你注册的组件中使用`DatetimePicker`：
+
+```js
+import { DatetimePicker } from 'vant';
+
+export default {
+  components: {
+    'van-datetime-picker': DatetimePicker
+  }
+};
+```
+
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
-<zan-datetime-picker
+<van-datetime-picker
   v-model="currentDate"
   type="datetime"
   format="yyyy.mm.dd hh时 mm分"
@@ -40,7 +70,7 @@ export default {
   :max-hour="maxHour"
   :min-date="minDate"
   @change="handlePickerChange">  
-</zan-datetime-picker>
+</van-datetime-picker>
 
 <script>
 
@@ -63,6 +93,38 @@ export default {
 ```
 :::
 
+#### 选择日期
+
+:::demo 选择日期
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="date"
+  format="yyyy.mm.dd hh时 mm分"
+  :min-hour="minHour"
+  :max-hour="maxHour"
+  :min-date="minDate"
+  @change="handlePickerChange">  
+</van-datetime-picker>
+```
+:::
+
+#### 选择时间
+
+:::demo 选择时间
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="time"
+  format="yyyy.mm.dd hh时 mm分"
+  :min-hour="minHour"
+  :max-hour="maxHour"
+  :min-date="minDate"
+  @change="handlePickerChange">  
+</van-datetime-picker>
+```
+:::
+
 
 ### API
 
diff --git a/docs/examples-docs/dialog.md b/docs/examples-docs/dialog.md
index 4e383a4b0..c7cd7bec4 100644
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b dialog {
-    .zan-button {
+    .van-button {
       margin: 15px;
     }
   }
@@ -54,7 +54,7 @@ export default {
 `Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
 
 ```js
-import { Dialog } from '@youzan/zanui-vue';
+import { Dialog } from 'vant';
 ```
 
 ### 代码演示
@@ -65,8 +65,8 @@ import { Dialog } from '@youzan/zanui-vue';
 
 :::demo 消息提示
 ```html
-<zan-button @click="handleAlertClick">alert</zan-button>
-<zan-button @click="handleAlert2Click">无标题alert</zan-button>
+<van-button @click="handleAlertClick">alert</van-button>
+<van-button @click="handleAlert2Click">无标题alert</van-button>
 
 <script>
 export default {
@@ -99,7 +99,7 @@ export default {
 
 :::demo 消息确认
 ```html
-<zan-button @click="handleConfirmClick">confirm</zan-button>
+<van-button @click="handleConfirmClick">confirm</van-button>
 
 <script>
 export default {
@@ -122,7 +122,7 @@ export default {
 
 点击以下按钮查看手机端效果：
 
-<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
 <mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
 
 ### 方法
diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index 0c9a9d32b..5ea2fd29d 100644
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b field {
-    .zan-field-wrapper {
+    .van-field-wrapper {
       padding: 0 10px;
     }
   }
@@ -24,7 +24,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -32,8 +32,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Field } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/field.css';
+import { Field } from 'vant';
+import 'vant/lib/vant-css/field.css';
 
 Vue.component(Field.name, Field);
 ```
@@ -43,11 +43,11 @@ Vue.component(Field.name, Field);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
 
 ```js
-import { Field } from '@youzan/zanui-vue';
+import { Field } from 'vant';
 
 export default {
   components: {
-    'zan-field': Field
+    'van-field': Field
   }
 };
 ```
@@ -60,11 +60,11 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-cell-group>
-  <zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></zan-field>
-  <zan-field type="password" label="密码：" placeholder="请输入密码" required></zan-field>
-  <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></zan-field>
-</zan-cell-group>
+<van-cell-group>
+  <van-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></van-field>
+  <van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
+  <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
+</van-cell-group>
 ```
 :::
 
@@ -74,9 +74,9 @@ export default {
 
 :::demo 无label的输入框
 ```html
-<zan-cell-group>
-  <zan-field type="text" placeholder="请输入用户名"></zan-field>
-</zan-cell-group>
+<van-cell-group>
+  <van-field type="text" placeholder="请输入用户名"></van-field>
+</van-cell-group>
 ```
 :::
 
@@ -86,8 +86,8 @@ export default {
 
 :::demo 带border的输入框
 ```html
-<div class="zan-field-wrapper">
-  <zan-field type="text" placeholder="请输入用户名" border></zan-field>
+<div class="van-field-wrapper">
+  <van-field type="text" placeholder="请输入用户名" border></van-field>
 </div>
 ```
 :::
@@ -98,9 +98,9 @@ export default {
 
 :::demo 禁用的输入框
 ```html
-<zan-cell-group>
-  <zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
-</zan-cell-group>
+<van-cell-group>
+  <van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
+</van-cell-group>
 ```
 :::
 
@@ -110,9 +110,9 @@ export default {
 
 :::demo 错误的输入框
 ```html
-<zan-cell-group>
-  <zan-field label="用户名：" type="text" placeholder="请输入用户名" error></zan-field>
-</zan-cell-group>
+<van-cell-group>
+  <van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
+</van-cell-group>
 ```
 :::
 
@@ -123,9 +123,9 @@ export default {
 
 :::demo 错误的输入框
 ```html
-<zan-cell-group>
-  <zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></zan-field>
-</zan-cell-group>
+<van-cell-group>
+  <van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
+</van-cell-group>
 ```
 :::
 
diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md
index 1a39f1d66..d5d7b634c 100644
--- a/docs/examples-docs/icon.md
+++ b/docs/examples-docs/icon.md
@@ -1,11 +1,11 @@
 <style>
 @component-namespace demo {
   @b icon {
-    .zan-col {
+    .van-col {
       text-align: center;
     }
 
-    .zan-icon {
+    .van-icon {
       font-size: 45px;
       display: block;
       margin: 15px 0;
@@ -18,7 +18,7 @@
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -26,8 +26,8 @@
 
 ```js
 import Vue from 'vue';
-import { Icon } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/icon.css';
+import { Icon } from 'vant';
+import 'vant/lib/vant-css/icon.css';
 
 Vue.component(Icon.name, Icon);
 ```
@@ -37,11 +37,11 @@ Vue.component(Icon.name, Icon);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Icon`组件，这样只能在你注册的组件中使用`Icon`：
 
 ```js
-import { Icon } from '@youzan/zanui-vue';
+import { Icon } from 'vant';
 
 export default {
   components: {
-    'zan-icon': Icon
+    'van-icon': Icon
   }
 };
 ```
@@ -54,142 +54,142 @@ export default {
 
 :::demo 所有Icon
 ```html
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="qr-invalid"></zan-icon>
+<van-row>
+  <van-col span="8">
+   <van-icon name="qr-invalid"></van-icon>
    <span>qr-invalid</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="qr"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="qr"></van-icon>
    <span>qr</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="exchange"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="exchange"></van-icon>
    <span>exchange</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="close"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="close"></van-icon>
    <span>close</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="location"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="location"></van-icon>
    <span>location</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="upgrade"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="upgrade"></van-icon>
    <span>upgrade</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="check"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="check"></van-icon>
    <span>check</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="checked"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="checked"></van-icon>
    <span>checked</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="like-o"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="like-o"></van-icon>
    <span>like-o</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="like" style="color: red;"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="like" style="color: red;"></van-icon>
    <span>like</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="chat"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="chat"></van-icon>
    <span>chat</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="shop"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="shop"></van-icon>
    <span>shop</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="photograph"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="photograph"></van-icon>
    <span>photograph</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="add"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="add"></van-icon>
    <span>add</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="add2"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="add2"></van-icon>
    <span>add2</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="photo"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="photo"></van-icon>
    <span>photo</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="logistics"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="logistics"></van-icon>
    <span>logistics</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="edit"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="edit"></van-icon>
    <span>edit</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="passed"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="passed"></van-icon>
    <span>passed</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="cart"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="cart"></van-icon>
    <span>cart</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="arrow"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="arrow"></van-icon>
    <span>arrow</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="gift"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="gift"></van-icon>
    <span>gift</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="search"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="search"></van-icon>
    <span>search</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="clear"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="clear"></van-icon>
    <span>clear</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="success"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="success"></van-icon>
    <span>success</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="fail"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="fail"></van-icon>
    <span>fail</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="contact"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="contact"></van-icon>
    <span>contact</span>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="8">
-   <zan-icon name="wechat"></zan-icon>
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="8">
+   <van-icon name="wechat"></van-icon>
    <span>wechat</span>
-  </zan-col>
-  <zan-col span="8">
-   <zan-icon name="alipay"></zan-icon>
+  </van-col>
+  <van-col span="8">
+   <van-icon name="alipay"></van-icon>
    <span>alipay</span>
-  </zan-col>
-</zan-row>
+  </van-col>
+</van-row>
 ```
 :::
 
diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md
index bc1b63f81..2e214e59c 100644
--- a/docs/examples-docs/image-preview.md
+++ b/docs/examples-docs/image-preview.md
@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b image-preview {
-    .zan-button {
+    .van-button {
       margin-left: 15px;
     }
   }
@@ -34,7 +34,7 @@ export default {
 `ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
 
 ```js
-import { ImagePreview } from '@youzan/zanui-vue';
+import { ImagePreview } from 'vant';
 ```
 
 ### 代码演示
@@ -43,7 +43,7 @@ import { ImagePreview } from '@youzan/zanui-vue';
 
 :::demo 基础用法
 ```html
-<zan-button @click="handleImagePreview">预览图片</zan-button>
+<van-button @click="handleImagePreview">预览图片</van-button>
 
 <script>
 import { ImagePreview } from 'src/index';
@@ -64,7 +64,7 @@ export default {
 
 点击以下按钮查看手机端效果：
 
-<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
 <mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
 
 ### 方法参数
diff --git a/docs/examples-docs/install.md b/docs/examples-docs/install.md
index a88c3b88d..9922b6658 100644
--- a/docs/examples-docs/install.md
+++ b/docs/examples-docs/install.md
@@ -3,5 +3,5 @@
 ### ynpm安装
 
 ```shell
-npm i @youzan/zanui-vue -S
+npm i vant -S
 ```
diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md
index 40e3a21eb..049fd59ed 100644
--- a/docs/examples-docs/layout.md
+++ b/docs/examples-docs/layout.md
@@ -1,10 +1,10 @@
 <style>
 @component-namespace demo {
   @b layout {
-    .zan-row {
+    .van-row {
       padding: 0 20px;
     }
-    .zan-col {
+    .van-col {
       margin-bottom: 10px;
     }
   }
@@ -30,11 +30,11 @@
 
 ## Layout 布局
 
-主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
+主要提供了`van-row`和`van-col`两个组件来进行行列布局。
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -42,9 +42,9 @@
 
 ```js
 import Vue from 'vue';
-import { Row, Col } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/col.css';
-import '@youzan/zanui-vue/lib/zanui-css/row.css';
+import { Row, Col } from 'vant';
+import 'vant/lib/vant-css/col.css';
+import 'vant/lib/vant-css/row.css';
 
 Vue.component(Row.name, Row);
 Vue.component(Col.name, Col);
@@ -55,12 +55,12 @@ Vue.component(Col.name, Col);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
 
 ```js
-import { Row, Col } from '@youzan/zanui-vue';
+import { Row, Col } from 'vant';
 
 export default {
   components: {
-    'zan-row': Row,
-    'zan-col': Col
+    'van-row': Row,
+    'van-col': Col
   }
 };
 ```
@@ -69,54 +69,54 @@ export default {
 
 #### 常规用法
 
-Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
+Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
 
 :::demo 常规用法
 ```html
-<zan-row>
-  <zan-col span="8">
+<van-row>
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-  <zan-col span="8">
+  </van-col>
+  <van-col span="8">
     <div class="white">span: 8</div>
-  </zan-col>
-  <zan-col span="8">
+  </van-col>
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col span="4">
+  </van-col>
+</van-row>
+<van-row>
+  <van-col span="4">
     <div class="gray">span: 4</div>
-  </zan-col>
-  <zan-col span="10" offset="4">
+  </van-col>
+  <van-col span="10" offset="4">
     <div class="gray">offset: 4, span: 10</div>
-  </zan-col>
-</zan-row>
-<zan-row>
-  <zan-col offset="12" span="12">
+  </van-col>
+</van-row>
+<van-row>
+  <van-col offset="12" span="12">
     <div class="gray">offset: 12, span: 12</div>
-  </zan-col>
-</zan-row>
+  </van-col>
+</van-row>
 ```
 :::
 
 #### 在列元素之间增加间距
 
-列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
+列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
 
 :::demo 在列元素之间增加间距
 ```html
-<zan-row gutter="10">
-  <zan-col span="8">
+<van-row gutter="10">
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-  <zan-col span="8">
+  </van-col>
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-  <zan-col span="8">
+  </van-col>
+  <van-col span="8">
     <div class="gray">span: 8</div>
-  </zan-col>
-</zan-row>
+  </van-col>
+</van-row>
 ```
 :::
 
diff --git a/docs/examples-docs/lazyload.md b/docs/examples-docs/lazyload.md
index bd5cf0aec..17c3a0bbc 100644
--- a/docs/examples-docs/lazyload.md
+++ b/docs/examples-docs/lazyload.md
@@ -55,7 +55,7 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Lazyload } from '@youzan/zanui-vue';
+import { Lazyload } from 'vant';
 
 Vue.use(Lazyload, options);
 ```
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index a5f41f19b..209be8d30 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b loading {
-    .zan-loading {
+    .van-loading {
       margin: 0 auto;
     }
 
@@ -24,7 +24,7 @@
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -32,8 +32,8 @@
 
 ```js
 import Vue from 'vue';
-import { Loading } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/loading.css';
+import { Loading } from 'vant';
+import 'vant/lib/vant-css/loading.css';
 
 Vue.component(Loading.name, Loading);
 ```
@@ -43,11 +43,11 @@ Vue.component(Loading.name, Loading);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
 
 ```js
-import { Loading } from '@youzan/zanui-vue';
+import { Loading } from 'vant';
 
 export default {
   components: {
-    'zan-loading': Loading
+    'van-loading': Loading
   }
 };
 ```
@@ -58,7 +58,7 @@ export default {
 
 :::demo 渐变深色spinner
 ```html
-<zan-loading class="some-customized-class"></zan-loading>
+<van-loading class="some-customized-class"></van-loading>
 ```
 :::
 
@@ -67,7 +67,7 @@ export default {
 :::demo 渐变浅色spinner
 ```html
 <div class="demo-loading__example demo-loading__example--with-bg">
-  <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
+  <van-loading class="some-customized-class" :color="'white'"></van-loading>
 </div>
 ```
 :::
@@ -76,8 +76,8 @@ export default {
 
 :::demo 单色spinner
 ```html
-<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
-<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
+<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
+<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
 ```
 :::
 
diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md
index 850fc28b7..6be2130e8 100644
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b panel {
-    .zan-panel-sum {
+    .van-panel-sum {
       background: #fff;
       text-align: right;
       font-size: 14px;
@@ -14,10 +14,10 @@
       }
     }
 
-    .zan-panel-buttons {
+    .van-panel-buttons {
       text-align: right;
 
-      .zan-button {
+      .van-button {
         margin-left: 5px;
       }
     }
@@ -33,7 +33,7 @@
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -41,8 +41,8 @@
 
 ```js
 import Vue from 'vue';
-import { Panel } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/panel.css';
+import { Panel } from 'vant';
+import 'vant/lib/vant-css/panel.css';
 
 Vue.component(Panel.name, Panel);
 ```
@@ -52,11 +52,11 @@ Vue.component(Panel.name, Panel);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
 
 ```js
-import { Panel } from '@youzan/zanui-vue';
+import { Panel } from 'vant';
 
 export default {
   components: {
-    'zan-panel': Panel
+    'van-panel': Panel
   }
 };
 ```
@@ -69,46 +69,46 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-panel title="标题" desc="标题描述" status="状态">
+<van-panel title="标题" desc="标题描述" status="状态">
   <div class="panel-content">
     panel内容
   </div>
-</zan-panel>
+</van-panel>
 ```
 :::
 
 #### 高级用法
 
-使用`slot`自定义内容。比如在自定义内容中放入一个`zan-card`。
+使用`slot`自定义内容。比如在自定义内容中放入一个`van-card`。
 
 :::demo 高级用法
 ```html
-<zan-panel title="标题" desc="标题描述" status="状态">
-  <zan-card
+<van-panel title="标题" desc="标题描述" status="状态">
+  <van-card
     title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
     desc="商品SKU1，商品SKU2"
     thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-    <div class="zan-card__row" slot="title">
-      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-      <span class="zan-card__price">¥ 2.00</span>
+    <div class="van-card__row" slot="title">
+      <h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="van-card__price">¥ 2.00</span>
     </div>
-    <div class="zan-card__row" slot="desc">
-      <h4 class="zan-card__desc">商品sku</h4>
-      <span class="zan-card__num">x 2</span>
+    <div class="van-card__row" slot="desc">
+      <h4 class="van-card__desc">商品sku</h4>
+      <span class="van-card__num">x 2</span>
     </div>
-    <div class="zan-card__footer" slot="footer">
-      <zan-button size="mini">按钮一</zan-button>
-      <zan-button size="mini">按钮二</zan-button>
+    <div class="van-card__footer" slot="footer">
+      <van-button size="mini">按钮一</van-button>
+      <van-button size="mini">按钮二</van-button>
     </div>
-  </zan-card>
-  <div class="zan-panel-sum">
+  </van-card>
+  <div class="van-panel-sum">
     合计：<span>¥ 1999.90</span>
   </div>
-  <div class="zan-panel-buttons" slot="footer">
-    <zan-button size="small">按钮一</zan-button>
-    <zan-button size="small" type="danger">按钮二</zan-button>
+  <div class="van-panel-buttons" slot="footer">
+    <van-button size="small">按钮一</van-button>
+    <van-button size="small" type="danger">按钮二</van-button>
   </div>
-</zan-panel>
+</van-panel>
 ```
 :::
 
diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md
index f766755e3..636d833c0 100644
--- a/docs/examples-docs/picker.md
+++ b/docs/examples-docs/picker.md
@@ -39,7 +39,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -47,8 +47,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Picker } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/picker.css';
+import { Picker } from 'vant';
+import 'vant/lib/vant-css/picker.css';
 
 Vue.component(Picker.name, Picker);
 ```
@@ -58,11 +58,11 @@ Vue.component(Picker.name, Picker);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Picker`组件，这样只能在你注册的组件中使用`Picker`：
 
 ```js
-import { Picker } from '@youzan/zanui-vue';
+import { Picker } from 'vant';
 
 export default {
   components: {
-    'zan-picker': Picker
+    'van-picker': Picker
   }
 };
 ```
@@ -73,7 +73,7 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
+<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
 
 <script>
 const citys = {
@@ -112,7 +112,7 @@ export default {
 
 :::demo 带toolbar的Picker
 ```html
-<zan-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker>
+<van-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></van-picker>
 
 <script>
 const citys = {
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index 824a1b034..79b45e690 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -1,11 +1,11 @@
 <style>
 @component-namespace demo {
   @b popup {
-    .zan-button {
+    .van-button {
       margin: 10px 15px;
     }
 
-    .zan-popup-1 {
+    .van-popup-1 {
       width: 60%;
       box-sizing: border-box;
       padding: 20px;
@@ -13,22 +13,22 @@
       text-align: center;
     }
 
-    .zan-popup-2 {
+    .van-popup-2 {
       width: 100%;
       height: 200px;
       box-sizing: border-box;
       padding: 20px;
     }
 
-    .zan-popup-3 {
+    .van-popup-3 {
       line-height: 50px;
       text-align: center;
       background-color: rgba(0, 0, 0, 0.701961);
       color: #fff;
     }
 
-    .zan-popup-4,
-    .zan-popup-5 {
+    .van-popup-4,
+    .van-popup-5 {
       width: 100%;
       height: 100%;
     }
@@ -82,7 +82,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -90,8 +90,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Popup } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/popup.css';
+import { Popup } from 'vant';
+import 'vant/lib/vant-css/popup.css';
 
 Vue.component(Popup.name, Popup);
 ```
@@ -101,11 +101,11 @@ Vue.component(Popup.name, Popup);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Popup`组件，这样只能在你注册的组件中使用`Popup`：
 
 ```js
-import { Popup } from '@youzan/zanui-vue';
+import { Popup } from 'vant';
 
 export default {
   components: {
-    'zan-popup': Popup
+    'van-popup': Popup
   }
 };
 ```
@@ -118,10 +118,10 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
-<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
+<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
+<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
   从中间弹出popup
-</zan-popup>
+</van-popup>
 
 <script>
 export default {
@@ -141,26 +141,26 @@ export default {
 
 :::demo 从不同位置弹出菜单
 ```html
-<zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
-<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
-  <zan-button @click="showDialog">弹出dialog</zan-button>
-</zan-popup>
+<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
+<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
+  <van-button @click="showDialog">弹出dialog</van-button>
+</van-popup>
 
-<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
-<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
+<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
+<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
   更新成功
-</zan-popup>
+</van-popup>
 
-<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
-<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
-  <zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
-</zan-popup>
+<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
+<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
+  <van-button @click.native="popupShow4 = false">关闭 popup</van-button>
+</van-popup>
 
 
-<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
-<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
-  <zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
-</zan-popup>
+<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
+<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
+  <van-button @click.native="popupShow5 = false">关闭 popup</van-button>
+</van-popup>
 
 <script>
 export default {
@@ -189,7 +189,7 @@ export default {
 
 点击以下按钮查看手机端效果：
 
-<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
 <mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
 
 ### API
diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md
index 6dbd829e8..62547273d 100644
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@@ -14,7 +14,7 @@
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -22,8 +22,8 @@
 
 ```js
 import Vue from 'vue';
-import { Progress } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/progress.css';
+import { Progress } from 'vant';
+import 'vant/lib/vant-css/progress.css';
 
 Vue.component(Progress.name, Progress);
 ```
@@ -33,11 +33,11 @@ Vue.component(Progress.name, Progress);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
 
 ```js
-import { Progress } from '@youzan/zanui-vue';
+import { Progress } from 'vant';
 
 export default {
   components: {
-    'zan-progress': Progress
+    'van-progress': Progress
   }
 };
 ```
@@ -51,13 +51,13 @@ export default {
 :::demo 基础用法
 ```html
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
+  <van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo2" :percentage="46"></zan-progress>
+  <van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" :percentage="100"></zan-progress>
+  <van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
 </div>
 ```
 :::
@@ -70,13 +70,13 @@ export default {
 :::demo Inactive
 ```html
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></zan-progress>
+  <van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></zan-progress>
+  <van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
+  <van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
 </div>
 ```
 :::
@@ -89,13 +89,13 @@ export default {
 :::demo 自定义颜色和文字
 ```html
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
+  <van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
+  <van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
 </div>
 <div class="demo-progress__wrapper">
-  <zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
+  <van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
 </div>
 ```
 :::
diff --git a/docs/examples-docs/quantity.md b/docs/examples-docs/quantity.md
index 95aad3a41..09f8686da 100644
--- a/docs/examples-docs/quantity.md
+++ b/docs/examples-docs/quantity.md
@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b quantity {
-    .zan-quantity {
+    .van-quantity {
       margin-left: 15px;
     }
 
@@ -27,7 +27,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -35,8 +35,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Quantity } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/quantity.css';
+import { Quantity } from 'vant';
+import 'vant/lib/vant-css/quantity.css';
 
 Vue.component(Quantity.name, Quantity);
 ```
@@ -46,11 +46,11 @@ Vue.component(Quantity.name, Quantity);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
 
 ```js
-import { Quantity } from '@youzan/zanui-vue';
+import { Quantity } from 'vant';
 
 export default {
   components: {
-    'zan-quantity': Quantity
+    'van-quantity': Quantity
   }
 };
 ```
@@ -61,7 +61,7 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-quantity v-model="quantity1"></zan-quantity>
+<van-quantity v-model="quantity1"></van-quantity>
 <p class="curr-quantity">当前值：{{ quantity1 }}</p>
 ```
 :::
@@ -72,7 +72,7 @@ export default {
 
 :::demo 禁用Quantity
 ```html
-<zan-quantity v-model="quantity1" disabled></zan-quantity>
+<van-quantity v-model="quantity1" disabled></van-quantity>
 ```
 :::
 
@@ -82,7 +82,7 @@ export default {
 
 :::demo 高级用法
 ```html
-<zan-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></zan-quantity>
+<van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
 <p class="curr-quantity">当前值：{{ quantity2 }}</p>
 ```
 :::
diff --git a/docs/examples-docs/quickstart.md b/docs/examples-docs/quickstart.md
index f7794285d..dcae8a179 100644
--- a/docs/examples-docs/quickstart.md
+++ b/docs/examples-docs/quickstart.md
@@ -4,8 +4,8 @@
 
 ```javascript
 import Vue from 'vue';
-import ZanUI from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/index.css';
+import ZanUI from 'vant';
+import 'vant/lib/vant-css/index.css';
 
 Vue.use(ZanUI);
 ```
@@ -14,9 +14,9 @@ Vue.use(ZanUI);
 
 ```javascript
 import Vue from 'vue';
-import { Button, Cell } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/button.css';
-import '@youzan/zanui-vue/lib/zanui-css/cell.css';
+import { Button, Cell } from 'vant';
+import 'vant/lib/vant-css/button.css';
+import 'vant/lib/vant-css/cell.css';
 
 Vue.component(Button.name, Button);
 Vue.component(Cell.name, Cell);
diff --git a/docs/examples-docs/radio.md b/docs/examples-docs/radio.md
index 8fbf28a18..8a3918c5f 100644
--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
@@ -1,10 +1,10 @@
 <style>
 @component-namespace demo {
   @b radio {
-    .zan-radios {
+    .van-radios {
       padding: 0 20px;
 
-      .zan-radio {
+      .van-radio {
         margin: 10px 0;
       }
     }
@@ -29,7 +29,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -37,8 +37,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Radio, RadioGroup } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/radio.css';
+import { Radio, RadioGroup } from 'vant';
+import 'vant/lib/vant-css/radio.css';
 
 Vue.component(Radio.name, Radio);
 Vue.component(RadioGroup.name, RadioGroup);
@@ -49,25 +49,26 @@ Vue.component(RadioGroup.name, RadioGroup);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
 
 ```js
-import { Radio, RadioGroup } from '@youzan/zanui-vue';
+import { Radio, RadioGroup } from 'vant';
 
 export default {
   components: {
-    'zan-radio': Radio,
-    'zan-radio-group': RadioGroup
+    'van-radio': Radio,
+    'van-radio-group': RadioGroup
   }
 };
 ```
+### 代码演示
 
-### 基础用法
+#### 基础用法
 
 通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
 
 :::demo 基础用法
 ```html
-<div class="zan-radios">
-  <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
-  <zan-radio name="2" v-model="radio1">单选框2</zan-radio>
+<div class="van-radios">
+  <van-radio name="1" v-model="radio1">单选框1</van-radio>
+  <van-radio name="2" v-model="radio1">单选框2</van-radio>
 </div>
 
 <script>
@@ -82,15 +83,15 @@ export default {
 ```
 :::
 
-### 禁用状态
+#### 禁用状态
 
 设置`disabled`属性即可，此时`Radio`不能点击。
 
 :::demo 禁用状态
 ```html
-<div class="zan-radios">
-  <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
-  <zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
+<div class="van-radios">
+  <van-radio name="1" v-model="radio2" disabled>未选中禁用</van-radio>
+  <van-radio name="2" v-model="radio2" disabled>选中且禁用</van-radio>
 </div>
 
 <script>
@@ -105,17 +106,17 @@ export default {
 ```
 :::
 
-### radio组
+#### radio组
 
-需要与`zan-radio-group`一起使用，在`zan-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
+需要与`van-radio-group`一起使用，在`van-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
 
 :::demo radio组
 ```html
-<div class="zan-radios">
-  <zan-radio-group v-model="radio3">
-    <zan-radio name="1">单选框1</zan-radio>
-    <zan-radio name="2">单选框2</zan-radio>
-  </zan-radio-group>
+<div class="van-radios">
+  <van-radio-group v-model="radio3">
+    <van-radio name="1">单选框1</van-radio>
+    <van-radio name="2">单选框2</van-radio>
+  </van-radio-group>
 </div>
   
 <script>
@@ -130,18 +131,18 @@ export default {
 ```
 :::
 
-### 与Cell组件一起使用
+#### 与Cell组件一起使用
 
 此时你需要再引入`Cell`和`CellGroup`组件。
 
 :::demo 与Cell组件一起使用
 ```html
-<zan-radio-group v-model="radio4">
-  <zan-cell-group>
-    <zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
-    <zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
-  </zan-cell-group>
-</zan-radio-group>
+<van-radio-group v-model="radio4">
+  <van-cell-group>
+    <van-cell><van-radio name="1">单选框1</van-radio></van-cell>
+    <van-cell><van-radio name="2">单选框2</van-radio></van-cell>
+  </van-cell-group>
+</van-radio-group>
 
 <script>
 export default {
diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md
index 63adeb5f6..bf03ec823 100644
--- a/docs/examples-docs/search.md
+++ b/docs/examples-docs/search.md
@@ -18,7 +18,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -26,8 +26,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Search } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/search.css';
+import { Search } from 'vant';
+import 'vant/lib/vant-css/search.css';
 
 Vue.component(Search.name, Search);
 ```
@@ -37,11 +37,11 @@ Vue.component(Search.name, Search);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
 
 ```js
-import { Search } from '@youzan/zanui-vue';
+import { Search } from 'vant';
 
 export default {
   components: {
-    'zan-search': Search
+    'van-search': Search
   }
 };
 ```
@@ -54,7 +54,7 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
+<van-search placeholder="商品名称" @search="goSearch"></van-search>
 
 <script>
 export default {
@@ -74,7 +74,7 @@ export default {
 
 :::demo 监听对应事件
 ```html
-<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
+<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
 
 <script>
 export default {
diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md
index de9eb5699..0fb25b828 100644
--- a/docs/examples-docs/steps.md
+++ b/docs/examples-docs/steps.md
@@ -5,7 +5,7 @@
       color: #06bf04;
     }
 
-    .zan-button {
+    .van-button {
       margin: 15px 0 0 15px;
     }
   }
@@ -32,7 +32,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -40,8 +40,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Steps, Step } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/steps.css';
+import { Steps, Step } from 'vant';
+import 'vant/lib/vant-css/steps.css';
 
 Vue.component(Steps.name, Steps);
 Vue.component(Step.name, Step);
@@ -52,12 +52,12 @@ Vue.component(Step.name, Step);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
 
 ```js
-import { Steps, Step } from '@youzan/zanui-vue';
+import { Steps, Step } from 'vant';
 
 export default {
   components: {
-    'zan-steps': Steps,
-    'zan-step': Step
+    'van-steps': Steps,
+    'van-step': Step
   }
 };
 ```
@@ -68,14 +68,14 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
-  <zan-step>买家下单</zan-step>
-  <zan-step>商家接单</zan-step>
-  <zan-step>买家提货</zan-step>
-  <zan-step>交易完成</zan-step>
-</zan-steps>
+<van-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>
+</van-steps>
 
-<zan-button @click="nextStep">下一步</zan-button>
+<van-button @click="nextStep">下一步</van-button>
 
 <script>
 export default {
@@ -101,12 +101,12 @@ export default {
 
 :::demo 只显示步骤条
 ```html
-<zan-steps :active="active">
-  <zan-step>买家下单</zan-step>
-  <zan-step>商家接单</zan-step>
-  <zan-step>买家提货</zan-step>
-  <zan-step>交易完成</zan-step>
-</zan-steps>
+<van-steps :active="active">
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>
+</van-steps>
 ```
 :::
 
diff --git a/docs/examples-docs/swipe.md b/docs/examples-docs/swipe.md
index adb413b6a..440480ccf 100644
--- a/docs/examples-docs/swipe.md
+++ b/docs/examples-docs/swipe.md
@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b swipe {
-    .zan-swipe {
+    .van-swipe {
       height: 200px;
 
       img {
@@ -39,7 +39,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -47,8 +47,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Swipe, SwipeItem } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/swipe.css';
+import { Swipe, SwipeItem } from 'vant';
+import 'vant/lib/vant-css/swipe.css';
 
 Vue.component(Swipe.name, Swipe);
 Vue.component(SwipeItem.name, SwipeItem);
@@ -59,12 +59,12 @@ Vue.component(SwipeItem.name, SwipeItem);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
 
 ```js
-import { Swipe, SwipeItem } from '@youzan/zanui-vue';
+import { Swipe, SwipeItem } from 'vant';
 
 export default {
   components: {
-    'zan-swipe': Swipe,
-    'zan-swipe-item': SwipeItem
+    'van-swipe': Swipe,
+    'van-swipe-item': SwipeItem
   }
 };
 ```
@@ -75,11 +75,11 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-swipe>
-  <zan-swipe-item v-for="img in images">
+<van-swipe>
+  <van-swipe-item v-for="img in images">
     <img v-lazy="img" alt="">
-  </zan-swipe-item>
-</zan-swipe>
+  </van-swipe-item>
+</van-swipe>
 
 <script>
 export default {
@@ -102,11 +102,11 @@ export default {
 
 :::demo 自动轮播
 ```html
-<zan-swipe auto-play @pagechange:end="handlePageEnd">
-  <zan-swipe-item v-for="img in autoImages">
+<van-swipe auto-play @pagechange:end="handlePageEnd">
+  <van-swipe-item v-for="img in autoImages">
     <img v-lazy="img" alt="">
-  </zan-swipe-item>
-</zan-swipe>
+  </van-swipe-item>
+</van-swipe>
 
 <script>
 export default {
diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index 1c3824325..28a9a9666 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -49,7 +49,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -57,8 +57,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Switch } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/switch.css';
+import { Switch } from 'vant';
+import 'vant/lib/vant-css/switch.css';
 
 Vue.component(Switch.name, Switch);
 ```
@@ -68,11 +68,11 @@ Vue.component(Switch.name, Switch);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
 
 ```js
-import { Switch } from '@youzan/zanui-vue';
+import { Switch } from 'vant';
 
 export default {
   components: {
-    'zan-switch': Switch
+    'van-switch': Switch
   }
 };
 ```
@@ -83,7 +83,7 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
+<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
 <div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
 
 
@@ -101,7 +101,7 @@ export default {
 
 :::demo
 ```html
-<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
+<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
 <div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
 
 
@@ -138,10 +138,10 @@ export default {
 
 :::demo 禁用状态
 ```html
-<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
+<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
 <div class="demo-switch__text">ON, DISABLED</div>
 
-<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
+<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
 <div class="demo-switch__text">OFF, DISABLED</div>
 
 <script>
@@ -163,10 +163,10 @@ export default {
 
 :::demo loading状态
 ```html
-<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
+<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
 <div class="demo-switch__text">ON, LOADING</div>
 
-<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
+<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
 <div class="demo-switch__text">OFF, LOADING</div>
 
 <script>
diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md
index 5b9c2a7c5..3d4dc9030 100644
--- a/docs/examples-docs/tab.md
+++ b/docs/examples-docs/tab.md
@@ -1,19 +1,19 @@
 <style>
 @component-namespace demo {
   @b tab {
-    .zan-tab__pane {
+    .van-tab__pane {
       background-color: #fff;
       padding: 20px;
     }
 
-    .zan-tabs--card .zan-tab__pane {
+    .van-tabs--card .van-tab__pane {
       background-color: transparent;
     }
 
-    .custom-tabwrap .zan-tab-active {
+    .custom-tabwrap .van-tab-active {
       color: #20a0ff;
     }
-    .custom-tabwrap .zan-tabs-nav-bar {
+    .custom-tabwrap .van-tabs-nav-bar {
       background: #20a0ff;
     }
     .custom-pane {
@@ -53,7 +53,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -61,8 +61,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Tab, Tabs } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/tab.css';
+import { Tab, Tabs } from 'vant';
+import 'vant/lib/vant-css/tab.css';
 
 Vue.component(Tab.name, Tab);
 Vue.component(Tabs.name, Tabs);
@@ -73,12 +73,12 @@ Vue.component(Tabs.name, Tabs);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
 
 ```js
-import { Tab, Tabs } from '@youzan/zanui-vue';
+import { Tab, Tabs } from 'vant';
 
 export default {
   components: {
-    'zan-tab': Tab,
-    'zan-tabs': Tabs
+    'van-tab': Tab,
+    'van-tabs': Tabs
   }
 };
 ```
@@ -91,45 +91,45 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-tabs>
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+<van-tabs>
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 ```
 :::
 
 #### active特定tab
 
-可以在`zan-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
+可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
 
 :::demo 基础用法
 ```html
-<zan-tabs :active="active">
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+<van-tabs :active="active">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 ```
 :::
 
 #### 禁用tab
 
-在对应的`zan-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
+在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
 
 :::demo 禁用tab
 ```html
-<zan-tabs>
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+<van-tabs>
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 
 <script>
 export default {
@@ -145,24 +145,24 @@ export default {
 
 #### card样式
 
-`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`zan-tabs`上设置`type`为`card`改为card样式。
+`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
 
 :::demo card样式
 ```html
-<zan-tabs type="card">
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+<van-tabs type="card">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 ```
 :::
 <style>
-  .custom-tabwrap .zan-tab-active {
+  .custom-tabwrap .van-tab-active {
     color: #20a0ff;
   }
-  .custom-tabwrap .zan-tabs-nav-bar {
+  .custom-tabwrap .van-tabs-nav-bar {
     background: #20a0ff;
   }
   .custom-pane {
@@ -174,23 +174,23 @@ export default {
 
 #### 自定义样式
 
-可以在`zan-tabs`上设置对应的`class`，从而自定义某些样式。
+可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
 
 :::demo 自定义样式
 ```html
-<zan-tabs active="2" class="custom-tabwrap">
-    <zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
-    <zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
-    <zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
-    <zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
-    <zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
-</zan-tabs>
+<van-tabs active="2" class="custom-tabwrap">
+    <van-tab title="选项一" class="custom-pane">内容一</van-tab>
+    <van-tab title="选项二" class="custom-pane">内容二</van-tab>
+    <van-tab title="选项三" class="custom-pane">内容三</van-tab>
+    <van-tab title="选项四" class="custom-pane">内容四</van-tab>
+    <van-tab title="选项五" class="custom-pane">内容五</van-tab>
+</van-tabs>
 
 <style>
-  .custom-tabwrap .zan-tab-active {
+  .custom-tabwrap .van-tab-active {
     color: #20a0ff;
   }
-  .custom-tabwrap .zan-tabs-nav-bar {
+  .custom-tabwrap .van-tabs-nav-bar {
     background: #20a0ff;
   }
   .custom-pane {
@@ -204,17 +204,17 @@ export default {
 
 #### click事件
 
-可以在`zan-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
+可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
 
 :::demo click事件
 ```html
-<zan-tabs @click="handleTabClick">
-  <zan-tab title="选项一">内容一</zan-tab>
-  <zan-tab title="选项二">内容二</zan-tab>
-  <zan-tab title="选项三">内容三</zan-tab>
-  <zan-tab title="选项四">内容四</zan-tab>
-  <zan-tab title="选项五">内容五</zan-tab>
-</zan-tabs>
+<van-tabs @click="handleTabClick">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+</van-tabs>
 
 <script>
 export default {
@@ -228,7 +228,7 @@ export default {
 ```
 :::
 
-### zan-tabs API
+### van-tabs API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选      |
 |-----------|-----------|-----------|-------------|-------------|
@@ -237,14 +237,14 @@ export default {
 | navclass | tabs的内部nav上的自定义classname | `string`  |  |           |
 
 
-### zan-tab API
+### van-tab API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选       |
 |-----------|-----------|-----------|-------------|-------------|
 | title | tab的标题 | `string`  |         |          |
 | disabled | 是否禁用这个tab | `boolean`  | `false`      |           |
 
-### zan-tabs Event
+### van-tabs Event
 
 | 事件名       | 说明      | 参数       |
 |-----------|-----------|-----------|
diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md
index d7f1af015..eb2f4b518 100644
--- a/docs/examples-docs/tag.md
+++ b/docs/examples-docs/tag.md
@@ -2,7 +2,7 @@
 .tags-container {
   padding: 5px 15px;
 
-  .zan-tag + .zan-tag {
+  .van-tag + .van-tag {
     margin-left: 10px;
   }
 }
@@ -12,7 +12,7 @@
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -20,8 +20,8 @@
 
 ```js
 import Vue from 'vue';
-import { Tag } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/tag.css';
+import { Tag } from 'vant';
+import 'vant/lib/vant-css/tag.css';
 
 Vue.component(Tag.name, Tag);
 ```
@@ -31,11 +31,11 @@ Vue.component(Tag.name, Tag);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
 
 ```js
-import { Tag } from '@youzan/zanui-vue';
+import { Tag } from 'vant';
 
 export default {
   components: {
-    'zan-tag': Tag
+    'van-tag': Tag
   }
 };
 ```
@@ -49,13 +49,13 @@ export default {
 :::demo 基础用法
 ```html
 <div class="tags-container">
-  <zan-tag>返现</zan-tag>
-  <zan-tag plain>返现</zan-tag>
+  <van-tag>返现</van-tag>
+  <van-tag plain>返现</van-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="danger">返现</zan-tag>
-  <zan-tag type="danger">四字标签</zan-tag>
-  <zan-tag type="danger">一</zan-tag>
+  <van-tag type="danger">返现</van-tag>
+  <van-tag type="danger">四字标签</van-tag>
+  <van-tag type="danger">一</van-tag>
 </div>
 ```
 :::
@@ -67,19 +67,19 @@ export default {
 :::demo 高级用法
 ```html
 <div class="tags-container">
-  <zan-tag type="danger">返现</zan-tag>
-  <zan-tag plain type="danger">返现</zan-tag>
+  <van-tag type="danger">返现</van-tag>
+  <van-tag plain type="danger">返现</van-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="primary">返现</zan-tag>
-  <zan-tag plain type="primary">返现</zan-tag>
+  <van-tag type="primary">返现</van-tag>
+  <van-tag plain type="primary">返现</van-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="success">返现</zan-tag>
-  <zan-tag plain type="success">返现</zan-tag>
+  <van-tag type="success">返现</van-tag>
+  <van-tag plain type="success">返现</van-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="danger" mark>返现</zan-tag>
+  <van-tag type="danger" mark>返现</van-tag>
 </div>
 ```
 :::
diff --git a/docs/examples-docs/toast.md b/docs/examples-docs/toast.md
index 53197e154..d33fa266a 100644
--- a/docs/examples-docs/toast.md
+++ b/docs/examples-docs/toast.md
@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b toast {
-    .zan-button {
+    .van-button {
       margin: 15px;
     }
   }
@@ -70,7 +70,7 @@ export default {
 `Toast`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
 
 ```js
-import { Toast } from '@youzan/zanui-vue';
+import { Toast } from 'vant';
 ```
 
 ### 代码演示
@@ -79,12 +79,12 @@ import { Toast } from '@youzan/zanui-vue';
 
 :::demo 基础用法
 ```html
-<zan-button @click="showSimpleToast">普通文字提示</zan-button>
-<zan-button @click="showLoadingToast">加载Toast</zan-button>
-<zan-button @click="showSuccessToast">成功</zan-button>
-<zan-button @click="showFailToast">失败</zan-button>
-<zan-button @click="showForbidClickToast">背景不能点击</zan-button>
-<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
+<van-button @click="showSimpleToast">普通文字提示</van-button>
+<van-button @click="showLoadingToast">加载Toast</van-button>
+<van-button @click="showSuccessToast">成功</van-button>
+<van-button @click="showFailToast">失败</van-button>
+<van-button @click="showForbidClickToast">背景不能点击</van-button>
+<van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
 
 <script>
 import { Toast } from 'src/index';
@@ -135,8 +135,8 @@ export default {
 
 :::demo 手动关闭
 ```html
-<zan-button @click="showToast">打开</zan-button>
-<zan-button @click="closeToast">关闭</zan-button>
+<van-button @click="showToast">打开</van-button>
+<van-button @click="closeToast">关闭</van-button>
 
 <script>
 import { Toast } from 'src/index';
@@ -160,7 +160,7 @@ export default {
 
 :::demo 手动关闭
 ```html
-<zan-button @click="showHtmlToast">打开</zan-button>
+<van-button @click="showHtmlToast">打开</van-button>
 
 <script>
 import { Toast } from 'src/index';
diff --git a/docs/examples-docs/uploader.md b/docs/examples-docs/uploader.md
index 42e3a69d4..3123e65c8 100644
--- a/docs/examples-docs/uploader.md
+++ b/docs/examples-docs/uploader.md
@@ -17,7 +17,7 @@ export default {
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -25,8 +25,8 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Uploader } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/uploader.css';
+import { Uploader } from 'vant';
+import 'vant/lib/vant-css/uploader.css';
 
 Vue.component(Uploader.name, Uploader);
 ```
@@ -36,11 +36,11 @@ Vue.component(Uploader.name, Uploader);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
 
 ```js
-import { Uploader } from '@youzan/zanui-vue';
+import { Uploader } from 'vant';
 
 export default {
   components: {
-    'zan-uploader': Uploader
+    'van-uploader': Uploader
   }
 };
 ```
@@ -52,9 +52,9 @@ export default {
 :::demo 基础用法
 ```html
 <div class="uploader-container">
-  <zan-uploader :after-read="logContent">
-    <zan-icon name="photograph"></zan-icon>
-  </zan-uploader>
+  <van-uploader :after-read="logContent">
+    <van-icon name="photograph"></van-icon>
+  </van-uploader>
 </div>
 ```
 :::
diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index 2155b2689..be6d5c87d 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -8,7 +8,7 @@
 
 ```js
 import Vue from 'vue';
-import { Waterfall } from '@youzan/zanui-vue';
+import { Waterfall } from 'vant';
 
 Waterfall.install(Vue);
 ```
@@ -18,7 +18,7 @@ Waterfall.install(Vue);
 如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
 
 ```js
-import { Waterfall } from '@youzan/zanui-vue';
+import { Waterfall } from 'vant';
 
 export default {
   directives: {
diff --git a/docs/src/components/footer-nav.vue b/docs/src/components/footer-nav.vue
index cdfcbdad7..ea28b11c8 100644
--- a/docs/src/components/footer-nav.vue
+++ b/docs/src/components/footer-nav.vue
@@ -5,7 +5,7 @@
       v-if="leftNav"
       class="footer-nav__link footer-nav__left"
       @click="handleNavClick('prev')">
-      <zan-icon name="arrow"></zan-icon>
+      <van-icon name="arrow"></van-icon>
       <span>{{ leftNav.title }}</span>
     </a>
     <a
@@ -13,7 +13,7 @@
       v-if="rightNav"
       class="footer-nav__link footer-nav__right"
       @click="handleNavClick('next')">
-      <zan-icon name="arrow"></zan-icon>
+      <van-icon name="arrow"></van-icon>
       <span>{{ rightNav.title }}</span>
     </a>
   </div>
diff --git a/docs/src/components/mobile-popup.vue b/docs/src/components/mobile-popup.vue
index b767556f5..cdd637d1f 100644
--- a/docs/src/components/mobile-popup.vue
+++ b/docs/src/components/mobile-popup.vue
@@ -1,9 +1,9 @@
 <template>
-  <zan-popup v-model="currentValue" :lock-on-scroll="true">
+  <van-popup v-model="currentValue" :lock-on-scroll="true">
     <div class="mobile-popup">
       <iframe :src="url" class="mobile-popup-iframe"></iframe>
     </div>
-  </zan-popup>
+  </van-popup>
 </template>
 
 <script>
diff --git a/docs/src/examples.js b/docs/src/examples.js
index ca3759936..843c23a9b 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -5,7 +5,7 @@ import navConfig from './nav.config.js';
 import routes from './router.config';
 import ZanUI from 'src/index';
 
-import 'packages/zanui-css/src/index.css';
+import 'packages/vant-css/src/index.css';
 
 import DemoList from './components/demo-list.vue';
 
diff --git a/docs/src/index.js b/docs/src/index.js
index f673a3261..ee3383740 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -13,7 +13,7 @@ const global = {
 window._global = global;
 
 import '../assets/docs.css';
-import 'packages/zanui-css/src/index.css';
+import 'packages/vant-css/src/index.css';
 
 function isMobile() {
   var platform = navigator.userAgent.toLowerCase();
diff --git a/docs/src/index.tpl b/docs/src/index.tpl
index 9fd48fd50..2e4cc0426 100644
--- a/docs/src/index.tpl
+++ b/docs/src/index.tpl
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <title>ZanUI</title>
+  <title>Vant - Vue mobile ui in Youzan</title>
 </head>
 <body>
 
diff --git a/package.json b/package.json
index f50c858ab..113923db1 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "@youzan/zanui-vue",
+  "name": "vant",
   "version": "0.1.2",
   "description": "有赞vue wap组件库",
-  "main": "lib/zanui.js",
-  "style": "lib/zanui-css/index.css",
+  "main": "lib/vant.js",
+  "style": "lib/vant-css/index.css",
   "files": [
     "lib",
     "src",
@@ -14,13 +14,13 @@
     "dev": "npm run build:file && webpack-dev-server --inline --history-api-fallback --hot --config build/webpack.config.js --content-base ./",
     "build:file": "node build/bin/build-entry.js",
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
-    "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
+    "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js && cp-cli packages/vant-css/lib lib/vant-css",
     "build:components": "webpack --progress --hide-modules --config build/webpack.components.js",
-    "build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
+    "build:vant": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
     "build:example": "node build/genExamples.js",
     "deploy": "npm run deploy:docs && gh-pages -d docs/dist && rimraf docs/dist",
     "deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
-    "dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:components && npm run build:utils && npm run build:zanui-css",
+    "dist": "npm run clean && npm run build:file && npm run lint && npm run build:vant && npm run build:components && npm run build:utils && npm run build:vant-css",
     "clean": "rimraf lib && rimraf packages/*/lib",
     "lint": "felint lint src/**/*.js packages/**/*.{js,vue} build/**/*.js",
     "test": "karma start test/unit/karma.conf.js --single-run; npm run coverage",
@@ -30,7 +30,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git@gitlab.qima-inc.com:fe/zanui-vue.git"
+    "url": "git@github.com:youzan/vant.git"
   },
   "keywords": [
     "youzan",
diff --git a/packages/actionsheet/src/actionsheet.vue b/packages/actionsheet/src/actionsheet.vue
index ea99cd0f1..6ee457a4b 100644
--- a/packages/actionsheet/src/actionsheet.vue
+++ b/packages/actionsheet/src/actionsheet.vue
@@ -1,30 +1,30 @@
 <template>
   <transition name="actionsheet-float">
-    <div class="zan-actionsheet" :class="[ title ? 'zan-actionsheet--withtitle' : '' ]" v-show="currentValue">
-      <div class="zan-actionsheet__header" v-if="title">
+    <div class="van-actionsheet" :class="[ title ? 'van-actionsheet--withtitle' : '' ]" v-show="currentValue">
+      <div class="van-actionsheet__header" v-if="title">
         <h3 v-text="title"></h3>
-        <zan-icon name="close" @click.stop="currentValue = false"></zan-icon>
+        <van-icon name="close" @click.stop="currentValue = false"></van-icon>
       </div>
       <template v-if="!title">
-        <ul class="zan-actionsheet__list">
+        <ul class="van-actionsheet__list">
           <li
             v-for="item in actions"
-            class="zan-actionsheet__item"
-            :class="[item.className, item.loading ? 'zan-actionsheet__item--loading' : '']"
+            class="van-actionsheet__item"
+            :class="[item.className, item.loading ? 'van-actionsheet__item--loading' : '']"
             @click.stop="handleItemClick(item)">
             <template v-if="!item.loading">
-              <span class="zan-actionsheet__name">{{ item.name }}</span>
-              <span class="zan-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
+              <span class="van-actionsheet__name">{{ item.name }}</span>
+              <span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
             </template>
             <template v-else>
-              <zan-loading class="zan-actionsheet__loading" type="circle" color="black"></zan-loading>
+              <van-loading class="van-actionsheet__loading" type="circle" color="black"></van-loading>
             </template>
           </li>
         </ul>
-        <a class="zan-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
+        <a class="van-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
       </template>
       <template v-else>
-        <div class="zan-actionsheet__content">
+        <div class="van-actionsheet__content">
           <slot></slot>
         </div>
       </template>
@@ -38,7 +38,7 @@ import ZanLoading from 'packages/loading';
 import ZanIcon from 'packages/icon';
 
 export default {
-  name: 'zan-actionsheet',
+  name: 'van-actionsheet',
 
   mixins: [Popup],
 
diff --git a/packages/badge/src/badge-group.vue b/packages/badge/src/badge-group.vue
index c9f5695b0..dc1009994 100644
--- a/packages/badge/src/badge-group.vue
+++ b/packages/badge/src/badge-group.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="zan-badge-group">
+  <div class="van-badge-group">
     <slot></slot>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'zan-badge-group',
+    name: 'van-badge-group',
 
     props: {
       // 当前激活 tab 面板的 key
diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue
index 749f48819..65cb72905 100644
--- a/packages/badge/src/badge.vue
+++ b/packages/badge/src/badge.vue
@@ -1,16 +1,16 @@
 <template>
-    <a class="zan-badge" :href="url" @click="handleClick" :class="{
-      'zan-badge--select': isSelect
+    <a class="van-badge" :href="url" @click="handleClick" :class="{
+      'van-badge--select': isSelect
     }">
-      <div class="zan-badge__active"></div>
-      <div v-if="info" class="zan-badge__info">{{info}}</div>
+      <div class="van-badge__active"></div>
+      <div v-if="info" class="van-badge__info">{{info}}</div>
       {{title}}
     </a>
 </template>
 
 <script>
 export default {
-  name: 'zan-badge',
+  name: 'van-badge',
 
   props: {
     title: {
diff --git a/packages/button/package.json b/packages/button/package.json
index f69339a6b..4f230384c 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-button",
+  "name": "@youzan/van-button",
   "version": "0.0.1",
   "description": "button component",
   "main": "./index.js",
diff --git a/packages/button/src/button.js b/packages/button/src/button.js
index 60a64d540..30316bf87 100644
--- a/packages/button/src/button.js
+++ b/packages/button/src/button.js
@@ -8,7 +8,7 @@
  * @param {slot} - 显示文本
  *
  * @example
- * <zan-button size="large" type="primary">按钮</zan-button>
+ * <van-button size="large" type="primary">按钮</van-button>
  */
 
 import ZanLoading from 'packages/loading';
@@ -17,10 +17,10 @@ const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
 const ALLOWED_TYPE = ['default', 'danger', 'primary'];
 
 export default {
-  name: 'zan-button',
+  name: 'van-button',
 
   components: {
-    'zan-loading': ZanLoading
+    'van-loading': ZanLoading
   },
 
   props: {
@@ -65,28 +65,28 @@ export default {
         type={nativeType}
         disabled={disabled}
         class={[
-          'zan-button',
-          'zan-button--' + type,
-          'zan-button--' + size,
+          'van-button',
+          'van-button--' + type,
+          'van-button--' + size,
           {
-            'zan-button--disabled': disabled,
-            'zan-button--loading': loading,
-            'zan-button--block': block,
-            'zan-button--bottom-action': bottomAction
+            'van-button--disabled': disabled,
+            'van-button--loading': loading,
+            'van-button--block': block,
+            'van-button--bottom-action': bottomAction
           }
         ]}
         onClick={this.handleClick}
       >
         {
           loading
-            ? <zan-loading
-                class="zan-button__icon-loading"
+            ? <van-loading
+                class="van-button__icon-loading"
                 type="circle"
                 color={type === 'default' ? 'black' : 'white'}>
-              </zan-loading>
+              </van-loading>
             : null
         }
-        <span class="zan-button__text">{this.$slots.default}</span>
+        <span class="van-button__text">{this.$slots.default}</span>
       </Tag>
     );
   }
diff --git a/packages/card/package.json b/packages/card/package.json
index 17af764ff..4e0bc7d28 100644
--- a/packages/card/package.json
+++ b/packages/card/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-card",
+  "name": "@youzan/van-card",
   "version": "0.0.1",
   "description": "card component",
   "main": "./index.js",
diff --git a/packages/card/src/card.vue b/packages/card/src/card.vue
index d42f10a6a..b51d5fdb1 100644
--- a/packages/card/src/card.vue
+++ b/packages/card/src/card.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="zan-card">
-    <img :src="thumb" alt="" class="zan-card__img">
-    <div class="zan-card__content" :class="{'zan-card__content--center': !this.$slots.footer}">
-      <div class="zan-card__info">
+  <div class="van-card">
+    <img :src="thumb" alt="" class="van-card__img">
+    <div class="van-card__content" :class="{'van-card__content--center': !this.$slots.footer}">
+      <div class="van-card__info">
         <slot name="title">
-          <h4 v-text="title" class="zan-card__title"></h4>
+          <h4 v-text="title" class="van-card__title"></h4>
         </slot>
         <slot name="desc">
-          <p v-if="desc" v-text="desc" class="zan-card__desc"></p>
+          <p v-if="desc" v-text="desc" class="van-card__desc"></p>
         </slot>
         <slot name="tags"></slot>
       </div>
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'zan-card',
+  name: 'van-card',
   props: {
     thumb: {
       type: String,
diff --git a/packages/cell/package.json b/packages/cell/package.json
index 789b15f79..0acbfd4e2 100644
--- a/packages/cell/package.json
+++ b/packages/cell/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-cell",
+  "name": "@youzan/van-cell",
   "version": "0.0.1",
   "description": "cell component",
   "main": "./index.js",
diff --git a/packages/cell/src/cell-group.vue b/packages/cell/src/cell-group.vue
index bcbf2ffa2..b4c6fb1ae 100644
--- a/packages/cell/src/cell-group.vue
+++ b/packages/cell/src/cell-group.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="zan-cell-group">
+  <div class="van-cell-group">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'zan-cell-group'
+  name: 'van-cell-group'
 };
 </script>
diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue
index e35e7404f..294c2979d 100644
--- a/packages/cell/src/cell.vue
+++ b/packages/cell/src/cell.vue
@@ -1,36 +1,36 @@
 <template>
-  <a :class="['zan-cell', { 'zan-cell--required': required }]" :href="url" @click="handleClick">
+  <a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="handleClick">
     <div
-      class="zan-cell__title"
+      class="van-cell__title"
       v-if="this.$slots.title || title"
     >
       <slot name="icon">
-        <i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
+        <i v-if="icon" class="van-icon" :class="'van-icon-' + icon"></i>
       </slot>
       <slot name="title">
-        <span class="zan-cell__text" v-text="title"></span>
-        <span class="zan-cell__label" v-if="label" v-text="label"></span>
+        <span class="van-cell__text" v-text="title"></span>
+        <span class="van-cell__label" v-if="label" v-text="label"></span>
       </slot>
     </div>
     <div
-      class="zan-cell__value"
+      class="van-cell__value"
       v-if="value || this.$slots.default"
       :class="{
-        'zan-cell__value--link': isLink,
-        'zan-cell__value--alone': !this.$slots.title && !title && !label
+        'van-cell__value--link': isLink,
+        'van-cell__value--alone': !this.$slots.title && !title && !label
       }"
     >
       <slot>
         <span v-text="value"></span>
       </slot>
     </div>
-    <i class="zan-icon zan-icon-arrow" v-if="isLink"></i>
+    <i class="van-icon van-icon-arrow" v-if="isLink"></i>
   </a>
 </template>
 
 <script>
 export default {
-  name: 'zan-cell',
+  name: 'van-cell',
 
   props: {
     icon: String,
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
index f15aa3a03..940851257 100644
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-checkbox",
+  "name": "@youzan/van-checkbox",
   "version": "0.0.1",
   "description": "checkbox component",
   "main": "./index.js",
diff --git a/packages/checkbox/src/checkbox-group.vue b/packages/checkbox/src/checkbox-group.vue
index 40439ce9e..db746f142 100644
--- a/packages/checkbox/src/checkbox-group.vue
+++ b/packages/checkbox/src/checkbox-group.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="zan-checkbox-group">
+  <div class="van-checkbox-group">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'zan-checkbox-group',
+  name: 'van-checkbox-group',
 
   props: {
     value: {},
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index 7f1fc385c..bf11bbf5d 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -1,22 +1,22 @@
 <template>
   <div
-    class="zan-checkbox"
+    class="van-checkbox"
     :class="{
-      'zan-checkbox--disabled': isDisabled
+      'van-checkbox--disabled': isDisabled
     }">
-    <span class="zan-checkbox__input">
+    <span class="van-checkbox__input">
       <input
         v-model="currentValue"
         type="checkbox"
-        class="zan-checkbox__control"
+        class="van-checkbox__control"
         :disabled="isDisabled">
-      <span class="zan-icon" :class="{
-        'zan-icon-checked': isChecked,
-        'zan-icon-check': !isChecked
+      <span class="van-icon" :class="{
+        'van-icon-checked': isChecked,
+        'van-icon-check': !isChecked
       }">
       </span>
     </span>
-    <span class="zan-checkbox__label" @click="handleLabelClick">
+    <span class="van-checkbox__label" @click="handleLabelClick">
       <slot></slot>
     </span>
   </div>
@@ -26,7 +26,7 @@
 import findParent from 'src/mixins/findParent';
 
 export default {
-  name: 'zan-checkbox',
+  name: 'van-checkbox',
 
   mixins: [findParent],
 
@@ -38,10 +38,10 @@ export default {
 
   computed: {
     /**
-     * `checkbox`是否在`zan-checkbox-group`中
+     * `checkbox`是否在`van-checkbox-group`中
      */
     isGroup() {
-      return !!this.findParentByComponentName('zan-checkbox-group');
+      return !!this.findParentByComponentName('van-checkbox-group');
     },
 
     /**
diff --git a/packages/col/src/col.vue b/packages/col/src/col.vue
index d6d7e6b09..3f8770a59 100644
--- a/packages/col/src/col.vue
+++ b/packages/col/src/col.vue
@@ -14,13 +14,13 @@
 
 <script>
   export default {
-    name: 'zan-col',
+    name: 'van-col',
     props: {
       span: [Number, String],
       offset: [Number, String],
       prefix: {
         type: String,
-        default: 'zan'
+        default: 'van'
       }
     },
     computed: {
diff --git a/packages/datetime-picker/package.json b/packages/datetime-picker/package.json
index e517e0566..7b747cbdf 100644
--- a/packages/datetime-picker/package.json
+++ b/packages/datetime-picker/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-datetime-picker",
+  "name": "@youzan/van-datetime-picker",
   "version": "0.0.1",
   "description": "datetime picker component",
   "main": "./index.js",
diff --git a/packages/datetime-picker/src/datetime-picker.vue b/packages/datetime-picker/src/datetime-picker.vue
index 973d4f2c6..2f3f2ed8b 100644
--- a/packages/datetime-picker/src/datetime-picker.vue
+++ b/packages/datetime-picker/src/datetime-picker.vue
@@ -1,12 +1,12 @@
 <template>
-  <zan-picker
+  <van-picker
     ref="picker"
     :columns="columns"
     :visible-item-count="visibleItemCount"
     @change="handlePickerChange"
     @confirm="handlePickerConfirm"
     showToolbar>
-  </zan-picker>
+  </van-picker>
 </template>
 
 <script>
@@ -15,7 +15,7 @@ import Picker from 'packages/picker';
 const allowedType = ['time', 'date', 'datetime'];
 
 export default {
-  name: 'zan-datetime-picker',
+  name: 'van-datetime-picker',
 
   components: {
     Picker
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index 7ebe9e408..dbbc335ff 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-dialog",
+  "name": "@youzan/van-dialog",
   "version": "0.0.1",
   "description": "dialog component",
   "main": "./index.js",
diff --git a/packages/dialog/src/dialog.vue b/packages/dialog/src/dialog.vue
index d8bb490c5..de3992ae0 100644
--- a/packages/dialog/src/dialog.vue
+++ b/packages/dialog/src/dialog.vue
@@ -1,16 +1,16 @@
 <template>
   <transition name="dialog-bounce">
-    <div class="zan-dialog-wrapper">
-      <div class="zan-dialog" v-show="value">
-        <div class="zan-dialog__header" v-if="title">
-          <div class="zan-dialog__title" v-text="title"></div>
+    <div class="van-dialog-wrapper">
+      <div class="van-dialog" v-show="value">
+        <div class="van-dialog__header" v-if="title">
+          <div class="van-dialog__title" v-text="title"></div>
         </div>
-        <div class="zan-dialog__content" v-if="message">
-          <div class="zan-dialog__message" :class="{ 'zan-dialog__message--notitle': !title }" v-html="message"></div>
+        <div class="van-dialog__content" v-if="message">
+          <div class="van-dialog__message" :class="{ 'van-dialog__message--notitle': !title }" v-html="message"></div>
         </div>
-        <div class="zan-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-          <button class="zan-dialog__btn zan-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
-          <button class="zan-dialog__btn zan-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+        <div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="van-dialog__btn van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="van-dialog__btn van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
         </div>
       </div>
     </div>
@@ -24,7 +24,7 @@ const CANCEL_TEXT = '取消';
 const CONFIRM_TEXT = '确认';
 
 export default {
-  name: 'zan-dialog',
+  name: 'van-dialog',
 
   mixins: [Popup],
 
diff --git a/packages/field/package.json b/packages/field/package.json
index e182578d5..85521ad45 100644
--- a/packages/field/package.json
+++ b/packages/field/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-field",
+  "name": "@youzan/van-field",
   "version": "0.0.1",
   "description": "form field component",
   "main": "./index.js",
diff --git a/packages/field/src/field.vue b/packages/field/src/field.vue
index 98ad5c1c7..000ca48f9 100644
--- a/packages/field/src/field.vue
+++ b/packages/field/src/field.vue
@@ -1,20 +1,20 @@
 <template>
-  <zan-cell
-    class="zan-field"
+  <van-cell
+    class="van-field"
     :title="label"
     :required="required"
     :class="{
-      'zan-field--hastextarea': type === 'textarea',
-      'zan-field--nolabel': !label,
-      'zan-field--disabled': disabled,
-      'zan-field--error': error,
-      'zan-field--border': border,
-      'zan-field--autosize': autosize
+      'van-field--hastextarea': type === 'textarea',
+      'van-field--nolabel': !label,
+      'van-field--disabled': disabled,
+      'van-field--error': error,
+      'van-field--border': border,
+      'van-field--autosize': autosize
     }">
     <textarea
       v-if="type === 'textarea'"
       ref="textareaElement"
-      class="zan-field__control"
+      class="van-field__control"
       v-model="currentValue"
       @focus="handleInputFocus"
       :placeholder="placeholder"
@@ -26,7 +26,7 @@
     </textarea>
     <input
       v-else
-      class="zan-field__control"
+      class="van-field__control"
       :value="currentValue"
       @input="handleInput"
       @focus="handleInputFocus"
@@ -35,7 +35,7 @@
       :maxlength="maxlength"
       :disabled="disabled"
       :readonly="readonly">
-  </zan-cell>
+  </van-cell>
 </template>
 
 <script>
@@ -43,7 +43,7 @@ const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'datetime'
 import zanCell from 'packages/cell';
 
 export default {
-  name: 'zan-field',
+  name: 'van-field',
 
   components: {
     zanCell
diff --git a/packages/icon/package.json b/packages/icon/package.json
index f36773fbe..28624a787 100644
--- a/packages/icon/package.json
+++ b/packages/icon/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@youzan/zan-icon",
+  "name": "@youzan/van-icon",
   "version": "0.0.1",
-  "description": "zan-icon",
+  "description": "van-icon",
   "main": "index.js",
   "author": "zhangmin <zhangmin@youzan.com>",
   "devDependencies": {},
diff --git a/packages/icon/src/icon.vue b/packages/icon/src/icon.vue
index cb4cc92e3..b7d1e4642 100644
--- a/packages/icon/src/icon.vue
+++ b/packages/icon/src/icon.vue
@@ -1,10 +1,10 @@
 <template>
-  <i class="zan-icon" :class="'zan-icon-' + name" @click="handleIconClick"></i>
+  <i class="van-icon" :class="'van-icon-' + name" @click="handleIconClick"></i>
 </template>
 
 <script>
   export default {
-    name: 'zan-icon',
+    name: 'van-icon',
 
     props: {
       name: {
diff --git a/packages/image-preview/package.json b/packages/image-preview/package.json
index 7a120620b..c0f6485ac 100644
--- a/packages/image-preview/package.json
+++ b/packages/image-preview/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-image-pewview",
+  "name": "@youzan/van-image-pewview",
   "version": "0.0.1",
   "description": "image preview component",
   "main": "./index.js",
diff --git a/packages/image-preview/src/image-preview.vue b/packages/image-preview/src/image-preview.vue
index 79b4c9107..df45af181 100644
--- a/packages/image-preview/src/image-preview.vue
+++ b/packages/image-preview/src/image-preview.vue
@@ -1,11 +1,11 @@
 <template>
   <transition name="image-fade">
-    <div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
-      <zan-swipe>
-        <zan-swipe-item v-for="item in images">
-          <img class="zan-image-preview__image" @load="handleLoad" :src="item" alt="">
-        </zan-swipe-item>
-      </zan-swipe>
+    <div class="van-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
+      <van-swipe>
+        <van-swipe-item v-for="item in images">
+          <img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
+        </van-swipe-item>
+      </van-swipe>
     </div>
   </transition>
 </template>
@@ -16,7 +16,7 @@ import ZanSwipe from 'packages/swipe';
 import ZanSwipeItem from 'packages/swipe-item';
 
 export default {
-  name: 'zan-image-preview',
+  name: 'van-image-preview',
 
   mixins: [Popup],
 
@@ -57,8 +57,8 @@ export default {
       const target = event.currentTarget;
       const targetRatio = target.width / target.height;
 
-      const centerClass = 'zan-image-preview__image--center';
-      const bigClass = 'zan-image-preview__image--big';
+      const centerClass = 'van-image-preview__image--center';
+      const bigClass = 'van-image-preview__image--big';
 
       if (targetRatio > ratio) {
         target.className += (' ' + centerClass);
diff --git a/packages/loading/package.json b/packages/loading/package.json
index 608f1ec75..3a392b555 100644
--- a/packages/loading/package.json
+++ b/packages/loading/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-loading",
+  "name": "@youzan/van-loading",
   "version": "0.0.1",
   "description": "loading component",
   "main": "./lib/index.js",
diff --git a/packages/loading/src/loading.vue b/packages/loading/src/loading.vue
index b9a755f13..ec5223ed0 100644
--- a/packages/loading/src/loading.vue
+++ b/packages/loading/src/loading.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="zan-loading">
-    <span class="zan-loading__spinner" :class="['zan-loading__spinner--' + type, 'zan-loading__spinner--' + color]"></span>
+  <div class="van-loading">
+    <span class="van-loading__spinner" :class="['van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
   </div>
 </template>
 
@@ -8,7 +8,7 @@
 const VALID_TYPES = ['gradient-circle', 'circle'];
 const VALID_COLORS = ['black', 'white'];
 export default {
-  name: 'zan-loading',
+  name: 'van-loading',
 
   props: {
     type: {
diff --git a/packages/panel/package.json b/packages/panel/package.json
index b04c76142..623429d21 100644
--- a/packages/panel/package.json
+++ b/packages/panel/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-panel",
+  "name": "@youzan/van-panel",
   "version": "0.0.1",
   "description": "panel component",
   "main": "./index.js",
diff --git a/packages/panel/src/panel.vue b/packages/panel/src/panel.vue
index 741342650..37003010c 100644
--- a/packages/panel/src/panel.vue
+++ b/packages/panel/src/panel.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="zan-panel">
-    <div class="zan-panel__header">
+  <div class="van-panel">
+    <div class="van-panel__header">
       <slot name="header">
-        <h4 class="zan-panel__title" v-text="title"></h4>
-        <span class="zan-panel__desc" v-if="desc" v-text="desc"></span>
-        <span class="zan-panel__status" v-if="status" v-text="status"></span>
+        <h4 class="van-panel__title" v-text="title"></h4>
+        <span class="van-panel__desc" v-if="desc" v-text="desc"></span>
+        <span class="van-panel__status" v-if="status" v-text="status"></span>
       </slot>
     </div>
-    <div class="zan-panel__content">
+    <div class="van-panel__content">
       <slot></slot>
     </div>
-    <div class="zan-panel__footer" v-if="this.$slots.footer">
+    <div class="van-panel__footer" v-if="this.$slots.footer">
       <slot name="footer"></slot>
     </div>
   </div>
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'zan-panel',
+  name: 'van-panel',
   props: {
     title: String,
     desc: String,
diff --git a/packages/picker/package.json b/packages/picker/package.json
index 666316070..d5e6c27a3 100644
--- a/packages/picker/package.json
+++ b/packages/picker/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-picker",
+  "name": "@youzan/van-picker",
   "version": "0.0.1",
   "description": "picker component",
   "main": "./index.js",
diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue
index fcaf64290..876b9bb9e 100644
--- a/packages/picker/src/picker-column.vue
+++ b/packages/picker/src/picker-column.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="zan-picker-column" :class="classNames">
-    <div class="zan-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
+  <div class="van-picker-column" :class="classNames">
+    <div class="van-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
       <div
         v-for="item in currentValues"
-        class="zan-picker-column__item"
-        :class="{ 'zan-picker-column__item--selected': item === currentValue }"
+        class="van-picker-column__item"
+        :class="{ 'van-picker-column__item--selected': item === currentValue }"
         :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
         {{ typeof item === 'object' && item[valueKey] ? item[valueKey] : item }}
       </div>
@@ -19,7 +19,7 @@ import draggable from './draggable';
 const DEFAULT_ITEM_HEIGHT = 44;
 
 export default {
-  name: 'zan-picker-column',
+  name: 'van-picker-column',
 
   props: {
     /**
@@ -168,7 +168,7 @@ export default {
             startTop: event.pageY,
             startTranslateTop: translateUtil.getElementTranslate(el).top
           };
-          pickerItems = el.querySelectorAll('.zan-picker-item'); // eslint-disable-line
+          pickerItems = el.querySelectorAll('.van-picker-item'); // eslint-disable-line
         },
 
         drag: (event) => {
diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue
index c4e475380..36e6198b7 100644
--- a/packages/picker/src/picker.vue
+++ b/packages/picker/src/picker.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="zan-picker">
-    <div class="zan-picker__toolbar" v-show="showToolbar">
+  <div class="van-picker">
+    <div class="van-picker__toolbar" v-show="showToolbar">
       <slot>
-        <a href="javascript:void(0)" class="zan-picker__cancel" @click="handlePickerCancel">取消</a>
-        <a href="javascript:void(0)" class="zan-picker__confirm" @click="handlePickerConfirm">完成</a>
+        <a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
+        <a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>
       </slot>
     </div>
-    <div class="zan-picker__columns" :class="['zan-picker__columns--' + columns.length]">
+    <div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
       <picker-column
         v-for="(item, index) in columns"
         v-model="values[index]"
@@ -17,7 +17,7 @@
         :value-key="valueKey"
         @columnChange="columnValueChange(index)">
       </picker-column>
-      <div class="zan-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
+      <div class="van-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
     </div>
   </div>
 </template>
@@ -28,7 +28,7 @@ import PickerColumn from './picker-column';
 const DEFAULT_ITEM_HEIGHT = 44;
 
 export default {
-  name: 'zan-picker',
+  name: 'van-picker',
 
   components: {
     PickerColumn
@@ -99,7 +99,7 @@ export default {
      * 获取对应索引的列的实例
      */
     getColumn(index) {
-      const children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
+      const children = this.$children.filter(child => child.$options.name === 'van-picker-column');
       return children[index];
     },
 
diff --git a/packages/popup/package.json b/packages/popup/package.json
index 34c950297..f923cd5be 100644
--- a/packages/popup/package.json
+++ b/packages/popup/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-popup",
+  "name": "@youzan/van-popup",
   "version": "0.0.1",
   "description": "popup component",
   "main": "./index.js",
diff --git a/packages/popup/src/popup.vue b/packages/popup/src/popup.vue
index 602b45cef..0cc7d6ddf 100644
--- a/packages/popup/src/popup.vue
+++ b/packages/popup/src/popup.vue
@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-show="currentValue" class="zan-popup" :class="[position ? 'zan-popup--' + position : '']">
+    <div v-show="currentValue" class="van-popup" :class="[position ? 'van-popup--' + position : '']">
       <slot></slot>
     </div>
   </transition>
@@ -10,7 +10,7 @@
 import Popup from 'src/mixins/popup';
 
 export default {
-  name: 'zan-popup',
+  name: 'van-popup',
 
   mixins: [Popup],
 
diff --git a/packages/progress/package.json b/packages/progress/package.json
index 1b4f9ec78..e723ee514 100644
--- a/packages/progress/package.json
+++ b/packages/progress/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-progress",
+  "name": "@youzan/van-progress",
   "version": "0.0.1",
   "description": "progress component",
   "main": "./index.js",
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index a98ceabfe..4e89cfd58 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="zan-progress">
-    <div class="zan-progress__bar">
-      <span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="zan-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
+  <div class="van-progress">
+    <div class="van-progress__bar">
+      <span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
+      <span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
     </div>
   </div>
 </template>
 
 <script>
 /**
- * zan-progress
+ * van-progress
  * @module components/progress
  * @desc 开关
  * @param {boolean} [inactive=false] - 是否置灰
@@ -19,7 +19,7 @@
  * @param {string} [textColor='#fff'] - 进度条文字颜色
  *
  * @example
- * <zan-switch checked="true" disabled="false"></zan-switch>
+ * <van-switch checked="true" disabled="false"></van-switch>
  */
 
 const DEFAULT_COLOR = '#38f';
@@ -27,7 +27,7 @@ const DEFAULT_TEXT_COLOR = '#fff';
 const INACTIVE_COLOR = '#cacaca';
 
 export default {
-  name: 'zan-progress',
+  name: 'van-progress',
 
   props: {
     percentage: {
diff --git a/packages/quantity/src/quantity.vue b/packages/quantity/src/quantity.vue
index 1e64b74d0..b1ae1c4a6 100644
--- a/packages/quantity/src/quantity.vue
+++ b/packages/quantity/src/quantity.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="zan-quantity">
+  <div class="van-quantity">
     <button
       @click="handleChange('minus')"
-      class="zan-quantity__stepper zan-quantity__minus"
+      class="van-quantity__stepper van-quantity__minus"
       :class="{
-        'zan-quantity__minus--disabled': isMinusDisabled
+        'van-quantity__minus--disabled': isMinusDisabled
       }">
     </button>
     <input
       type="text"
-      class="zan-quantity__input"
+      class="van-quantity__input"
       :value="currentValue"
       @input="handleInputChange"
       :disabled="disabled">
     <button
       @click="handleChange('plus')"
-      class="zan-quantity__stepper zan-quantity__plus"
+      class="van-quantity__stepper van-quantity__plus"
       :class="{
-        'zan-quantity__plus--disabled': isPlusDisabled
+        'van-quantity__plus--disabled': isPlusDisabled
       }">
     </button>
   </div>
@@ -25,7 +25,7 @@
 
 <script>
 export default {
-  name: 'zan-quantity',
+  name: 'van-quantity',
 
   props: {
     min: {
diff --git a/packages/radio/package.json b/packages/radio/package.json
index 1b9071190..20bb1d44a 100644
--- a/packages/radio/package.json
+++ b/packages/radio/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-radio",
+  "name": "@youzan/van-radio",
   "version": "0.0.1",
   "description": "radio component",
   "main": "./index.js",
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index 66ee3b549..c35ea4065 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="zan-radio-group">
+  <div class="van-radio-group">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'zan-radio-group',
+  name: 'van-radio-group',
 
   props: {
     value: {},
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index 459fd6d35..41a0a4d6d 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -1,24 +1,24 @@
 <template>
   <div
     @click="handleRadioClick"
-    class="zan-radio"
+    class="van-radio"
     :class="{
-      'zan-radio--disabled': isDisabled
+      'van-radio--disabled': isDisabled
     }">
-    <span class="zan-radio__input">
+    <span class="van-radio__input">
       <input
         :value="name"
         v-model="currentValue"
         type="radio"
-        class="zan-radio__control"
+        class="van-radio__control"
         :disabled="isDisabled">
-      <span class="zan-icon" :class="{
-        'zan-icon-checked': currentValue === name,
-        'zan-icon-check': currentValue !== name
+      <span class="van-icon" :class="{
+        'van-icon-checked': currentValue === name,
+        'van-icon-check': currentValue !== name
       }">
       </span>
     </span>
-    <span class="zan-radio__label" @click="handleLabelClick">
+    <span class="van-radio__label" @click="handleLabelClick">
       <slot></slot>
     </span>
   </div>
@@ -28,7 +28,7 @@
 import findParent from 'src/mixins/findParent';
 
 export default {
-  name: 'zan-radio',
+  name: 'van-radio',
 
   mixins: [findParent],
 
@@ -40,7 +40,7 @@ export default {
 
   computed: {
     isGroup() {
-      return !!this.findParentByComponentName('zan-radio-group');
+      return !!this.findParentByComponentName('van-radio-group');
     },
 
     currentValue: {
diff --git a/packages/row/src/row.vue b/packages/row/src/row.vue
index 72e468b42..04601521c 100644
--- a/packages/row/src/row.vue
+++ b/packages/row/src/row.vue
@@ -8,11 +8,11 @@
 
 <script>
   export default {
-    name: 'zan-row',
+    name: 'van-row',
     props: {
       prefix: {
         type: String,
-        default: 'zan'
+        default: 'van'
       },
       gutter: [Number, String]
     },
diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue
index b5696b096..d75db3720 100644
--- a/packages/search/src/search.vue
+++ b/packages/search/src/search.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="zan-search" :class="{ 'zan-search--focus' : isFocus }">
-    <div class="zan-search__input-wrap">
-      <zan-icon name="search"></zan-icon>
+  <div class="van-search" :class="{ 'van-search--focus' : isFocus }">
+    <div class="van-search__input-wrap">
+      <van-icon name="search"></van-icon>
       <input
         type="text"
         :placeholder="placeholder"
-        class="zan-search__input"
+        class="van-search__input"
         v-model="value"
         v-refocus="focusStatus"
         @focus="handleFocus"
         @keyup.enter="handleSearch">
-      <zan-icon name="clear" @click="handleClean" v-show="isFocus"></zan-icon>
+      <van-icon name="clear" @click="handleClean" v-show="isFocus"></van-icon>
     </div>
-    <div class="zan-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
+    <div class="van-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
   </div>
 </template>
 
@@ -20,7 +20,7 @@
   import ZanIcon from 'packages/icon';
 
   export default {
-    name: 'zan-search',
+    name: 'van-search',
 
     components: {
       ZanIcon
diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue
index c33ecd56c..5dd205e3d 100644
--- a/packages/steps/src/step.vue
+++ b/packages/steps/src/step.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="zan-step" :class="statusClass">
-    <div class="zan-step__circle-container">
-      <i class="zan-step__circle" v-if="status !== 'process'"></i>
-      <i class="zan-icon zan-icon-checked" v-else></i>
+  <div class="van-step" :class="statusClass">
+    <div class="van-step__circle-container">
+      <i class="van-step__circle" v-if="status !== 'process'"></i>
+      <i class="van-icon van-icon-checked" v-else></i>
     </div>
-    <p class="zan-step__title">
+    <p class="van-step__title">
       <slot></slot>
     </p>
-    <div class="zan-step__line"></div>
+    <div class="van-step__line"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'zan-step',
+  name: 'van-step',
 
   beforeCreate() {
     this.$parent.steps.push(this);
@@ -32,7 +32,7 @@ export default {
     },
     statusClass() {
       const status = this.status;
-      return status ? 'zan-step--' + status : '';
+      return status ? 'van-step--' + status : '';
     }
   }
 };
diff --git a/packages/steps/src/steps.vue b/packages/steps/src/steps.vue
index 50607528a..ac5f790fa 100644
--- a/packages/steps/src/steps.vue
+++ b/packages/steps/src/steps.vue
@@ -1,22 +1,22 @@
 <template>
-  <div class="zan-steps" :class="`zan-steps--${steps.length}`">
-    <div class="zan-steps__status" v-if="title || description">
-      <div class="zan-steps__icon" v-if="icon || $slot.icon">
+  <div class="van-steps" :class="`van-steps--${steps.length}`">
+    <div class="van-steps__status" v-if="title || description">
+      <div class="van-steps__icon" v-if="icon || $slot.icon">
         <slot name="icon">
-          <zan-icon :name="icon" :class="iconClass"></zan-icon>
+          <van-icon :name="icon" :class="iconClass"></van-icon>
         </slot>
       </div>
-      <div class="zan-steps__message">
-        <div class="zan-steps__message-wrapper">
-          <h4 class="zan-steps__title" v-text="title"></h4>
-          <p class="zan-steps__desc" v-text="description"></p>
+      <div class="van-steps__message">
+        <div class="van-steps__message-wrapper">
+          <h4 class="van-steps__title" v-text="title"></h4>
+          <p class="van-steps__desc" v-text="description"></p>
         </div>
       </div>
       <slot name="message-extra">
       </slot>
     </div>
-    <div class="zan-steps__items" :class="{
-      'zan-steps__items--alone': !title && !description
+    <div class="van-steps__items" :class="{
+      'van-steps__items--alone': !title && !description
     }">
       <slot></slot>
     </div>
@@ -27,10 +27,10 @@
 import Icon from 'packages/icon';
 
 export default {
-  name: 'zan-steps',
+  name: 'van-steps',
 
   components: {
-    'zan-icon': Icon
+    'van-icon': Icon
   },
 
   props: {
diff --git a/packages/swipe/src/scroll.js b/packages/swipe/src/scroll.js
index b42e60398..8d6b46a15 100755
--- a/packages/swipe/src/scroll.js
+++ b/packages/swipe/src/scroll.js
@@ -34,7 +34,7 @@ extend(Scroll.prototype, {
 
   update: function() {
     const oldPages = this.pages;
-    this.pages = this.wrapElem.querySelectorAll('.zan-swipe-item');
+    this.pages = this.wrapElem.querySelectorAll('.van-swipe-item');
     if (oldPages && oldPages.length === this.pages.length) {
       const isSame = Array.prototype.every.call(this.pages, (elem, index) => {
         return this.pages[index] === oldPages[index];
diff --git a/packages/swipe/src/swipe-item.vue b/packages/swipe/src/swipe-item.vue
index be2dd955a..ba4489474 100644
--- a/packages/swipe/src/swipe-item.vue
+++ b/packages/swipe/src/swipe-item.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="zan-swipe-item">
+  <div class="van-swipe-item">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'zan-swipe-item',
+  name: 'van-swipe-item',
 
   beforeCreate() {
     this.$parent.swipes.push(this);
diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue
index 0c335da0e..e206d8827 100644
--- a/packages/swipe/src/swipe.vue
+++ b/packages/swipe/src/swipe.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="zan-swipe">
-    <div class="zan-swipe__items">
+  <div class="van-swipe">
+    <div class="van-swipe__items">
       <slot></slot>
     </div>
-    <div class="zan-swipe__indicators" v-if="showIndicators">
-      <span class="zan-swipe__indicator" v-for="i in swipes.length" :class="{
-        'zan-swipe__indicator--active': currIndex === i -1
+    <div class="van-swipe__indicators" v-if="showIndicators">
+      <span class="van-swipe__indicator" v-for="i in swipes.length" :class="{
+        'van-swipe__indicator--active': currIndex === i -1
       }">
       </span>
     </div>
@@ -18,7 +18,7 @@ import Scroll from './scroll';
 import SpringDummy from './spring_dummy';
 
 export default {
-  name: 'zan-swipe',
+  name: 'van-swipe',
 
   props: {
     autoPlay: Boolean,
diff --git a/packages/switch/package.json b/packages/switch/package.json
index eb5900ca3..919856cd8 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-switch",
+  "name": "@youzan/van-switch",
   "version": "0.0.1",
   "description": "switch component",
   "main": "./index.js",
diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index f935e1fda..80aa93649 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="zan-switch" :class="switchStates" @click="toggleState">
-    <div class="zan-switch__node">
-      <zan-loading v-if="loading" class="zan-switch__loading"></zan-loading>
+  <div class="van-switch" :class="switchStates" @click="toggleState">
+    <div class="van-switch__node">
+      <van-loading v-if="loading" class="van-switch__loading"></van-loading>
     </div>
-    <div class="zan-switch__bg"></div>
+    <div class="van-switch__bg"></div>
   </div>
 </template>
 
 <script>
-import ZanLoading from 'packages/loading';
+import VanLoading from 'packages/loading';
 /**
- * zan-switch
+ * van-switch
  * @module components/switch
  * @desc 开关
  * @param {boolean} [value=false] - 开关状态
@@ -18,12 +18,12 @@ import ZanLoading from 'packages/loading';
  * @param {boolean} [loading=false] - loading状态
  *
  * @example
- * <zan-switch :checked="true" :disabled="false"></zan-switch>
+ * <van-switch :checked="true" :disabled="false"></van-switch>
  */
 export default {
-  name: 'zan-switch',
+  name: 'van-switch',
   components: {
-    'zan-loading': ZanLoading
+    'van-loading': VanLoading
   },
   props: {
     value: Boolean,
@@ -47,10 +47,10 @@ export default {
   },
   computed: {
     switchStates: function() {
-      const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off')];
+      const switchStates = ['van-switch--' + (this.checked ? 'on' : 'off')];
 
       if (this.disabled) {
-        switchStates.push('zan-switch--disabled');
+        switchStates.push('van-switch--disabled');
       }
 
       return switchStates;
diff --git a/packages/tab/src/tab.vue b/packages/tab/src/tab.vue
index 3ad6ec7c5..97108461c 100644
--- a/packages/tab/src/tab.vue
+++ b/packages/tab/src/tab.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="zan-tab__pane" :class="classNames">
+  <div class="van-tab__pane" :class="classNames">
     <slot></slot>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'zan-tab',
+    name: 'van-tab',
     props: {
       // 选项卡头显示文字
       title: {
@@ -20,7 +20,7 @@
     },
     computed: {
       classNames() {
-        return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.curActive };
+        return { 'van-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.curActive };
       }
     }
   };
diff --git a/packages/tab/src/tabs.vue b/packages/tab/src/tabs.vue
index f22481d6a..f4c03c6fb 100644
--- a/packages/tab/src/tabs.vue
+++ b/packages/tab/src/tabs.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="zan-tabs" :class="[`zan-tabs--${type}`]">
+  <div class="van-tabs" :class="[`van-tabs--${type}`]">
     <div
-      class="zan-tabs__nav"
-      :class="[`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`]"
+      class="van-tabs__nav"
+      :class="[`van-tabs__nav--${this.type}`, `van-tabs--col-${this.tabs.length}`]"
     >
-      <div class="zan-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
+      <div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
       <div
         v-for="(tab, index) in tabs"
-        class="zan-tab"
-        :class="{'zan-tab--active': index === curActive}"
+        class="van-tab"
+        :class="{'van-tab--active': index === curActive}"
         ref="tabkey"
         @click="handleTabClick(index, tab)"
       >
         {{ tab.title }}
       </div>
     </div>
-    <div class="zan-tabs__content">
+    <div class="van-tabs__content">
       <slot></slot>
     </div>
   </div>
@@ -23,7 +23,7 @@
 
 <script>
   export default {
-    name: 'zan-tabs',
+    name: 'van-tabs',
 
     props: {
       // 外部传入的激活的tab标签
diff --git a/packages/tag/src/main.vue b/packages/tag/src/main.vue
index 9b6ffbe78..5e8801b0a 100644
--- a/packages/tag/src/main.vue
+++ b/packages/tag/src/main.vue
@@ -1,12 +1,12 @@
 <template>
-  <span class="zan-tag" :class="[type ? `zan-tag--${type}`: '', { 'is-plain': plain, 'is-mark': mark }]">
+  <span class="van-tag" :class="[type ? `van-tag--${type}`: '', { 'is-plain': plain, 'is-mark': mark }]">
     <slot></slot>
   </span>
 </template>
 
 <script>
   export default {
-    name: 'zan-tag',
+    name: 'van-tag',
     props: {
       type: String,
       mark: Boolean,
diff --git a/packages/toast/package.json b/packages/toast/package.json
index 7d06997d3..d3843cd90 100644
--- a/packages/toast/package.json
+++ b/packages/toast/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/zan-toast",
+  "name": "@youzan/van-toast",
   "version": "0.0.1",
   "description": "toast component",
   "main": "./index.js",
diff --git a/packages/toast/src/toast.vue b/packages/toast/src/toast.vue
index 535dc60e7..9e540b949 100644
--- a/packages/toast/src/toast.vue
+++ b/packages/toast/src/toast.vue
@@ -1,26 +1,26 @@
 <template>
-  <transition name="zan-toast-fade">
-    <div class="zan-toast-wrapper" v-show="visible">
-      <div class="zan-toast" :class="['zan-toast--' + displayStyle]">
+  <transition name="van-toast-fade">
+    <div class="van-toast-wrapper" v-show="visible">
+      <div class="van-toast" :class="['van-toast--' + displayStyle]">
         <!-- 只显示文字 -->
         <template v-if="displayStyle === 'text'" >
-          <div class="zan-toast__text">{{message}}</div>
+          <div class="van-toast__text">{{message}}</div>
         </template>
         <!-- 加载中 -->
         <template v-if="displayStyle === 'loading'">
-            <zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
+            <van-loading v-if="type === 'loading'" type="gradient-circle" color="white"></van-loading>
         </template>
         <!-- 图案加文字 -->
         <template v-if="displayStyle === 'default'">
-          <zan-icon class="zan-toast__icon" :name="type"></zan-icon>
-          <div class="zan-toast__text">{{message}}</div>
+          <van-icon class="van-toast__icon" :name="type"></van-icon>
+          <div class="van-toast__text">{{message}}</div>
         </template>
         <!-- 传入html -->
         <template v-if="displayStyle === 'html'">
-          <div class="zan-toast__text" v-html="message"></div>
+          <div class="van-toast__text" v-html="message"></div>
         </template>
       </div>
-      <div class="zan-toast__overlay" v-if="forbidClick"></div>
+      <div class="van-toast__overlay" v-if="forbidClick"></div>
     </div>
   </transition>
 </template>
@@ -32,7 +32,7 @@ import zanIcon from 'packages/icon';
 const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
 const DEFAULT_STYLE_LIST = ['success', 'fail'];
 /**
- * zan-toast
+ * van-toast
  * @module components/toast
  * @desc toast
  * @param {string} [type=false] - 类型
@@ -40,11 +40,11 @@ const DEFAULT_STYLE_LIST = ['success', 'fail'];
  *
  */
 export default {
-  name: 'zan-toast',
+  name: 'van-toast',
 
   components: {
-    'zan-loading': zanLoading,
-    'zan-icon': zanIcon
+    'van-loading': zanLoading,
+    'van-icon': zanIcon
   },
   props: {
     type: {
diff --git a/packages/uploader/src/main.vue b/packages/uploader/src/main.vue
index 6b0a65851..882f8408e 100644
--- a/packages/uploader/src/main.vue
+++ b/packages/uploader/src/main.vue
@@ -1,20 +1,20 @@
 <template>
-    <div class="zan-uploader">
-        <slot>
+  <div class="van-uploader">
+    <slot>
 
-        </slot>
-        <template v-if="disabled">
-          <input type="file" @change="onValueChange" disabled="disabled" class="zan-uploader__input" />
-        </template>
-        <template v-else>
-          <input type="file" @change="onValueChange"  class="zan-uploader__input" ref="input" />
-        </template>
-    </div>
+    </slot>
+    <template v-if="disabled">
+      <input type="file" @change="onValueChange" disabled="disabled" class="van-uploader__input" />
+    </template>
+    <template v-else>
+      <input type="file" @change="onValueChange"  class="van-uploader__input" ref="input" />
+    </template>
+  </div>
 </template>
 
 <script>
   export default {
-    name: 'zan-uploader',
+    name: 'van-uploader',
     props: {
       disabled: {
         type: Boolean,
diff --git a/src/mixins/popup/popup-manager.js b/src/mixins/popup/popup-manager.js
index eb33ecab9..b28a36db0 100644
--- a/src/mixins/popup/popup-manager.js
+++ b/src/mixins/popup/popup-manager.js
@@ -77,7 +77,7 @@ const PopupManager = {
 
     const modalDom = getModal();
 
-    addClass(modalDom, 'zan-modal');
+    addClass(modalDom, 'van-modal');
 
     if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
       dom.parentNode.appendChild(modalDom);
diff --git a/test/unit/components/badge.vue b/test/unit/components/badge.vue
index 8dd3bbdfd..05c3a6ade 100644
--- a/test/unit/components/badge.vue
+++ b/test/unit/components/badge.vue
@@ -1,8 +1,8 @@
 <template>
-  <zan-badge-group>
-    <zan-badge title="热销榜" info="8" @click="onItemClick"></zan-badge>
-    <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
-  </zan-badge-group>
+  <van-badge-group>
+    <van-badge title="热销榜" info="8" @click="onItemClick"></van-badge>
+    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
+  </van-badge-group>
 </template>
 
 <script>
@@ -11,8 +11,8 @@ import BadgeGroup from 'packages/badge-group';
 
 export default {
   components: {
-    'zan-badge': Badge,
-    'zan-badge-group': BadgeGroup
+    'van-badge': Badge,
+    'van-badge-group': BadgeGroup
   },
 
   methods: {
diff --git a/test/unit/components/checkbox.vue b/test/unit/components/checkbox.vue
index f43904b6a..f74a62a12 100644
--- a/test/unit/components/checkbox.vue
+++ b/test/unit/components/checkbox.vue
@@ -1,7 +1,7 @@
 <template>
-  <zan-checkbox-group v-model="result">
-    <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-  </zan-checkbox-group>
+  <van-checkbox-group v-model="result">
+    <van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
+  </van-checkbox-group>
 </template>
 
 <script>
@@ -10,8 +10,8 @@ import CheckboxGroup from 'packages/checkbox-group';
 
 export default {
   components: {
-    'zan-checkbox': Checkbox,
-    'zan-checkbox-group': CheckboxGroup
+    'van-checkbox': Checkbox,
+    'van-checkbox-group': CheckboxGroup
   },
 
   data() {
diff --git a/test/unit/components/radio.vue b/test/unit/components/radio.vue
index 780ac52fa..9b22e700d 100644
--- a/test/unit/components/radio.vue
+++ b/test/unit/components/radio.vue
@@ -1,8 +1,8 @@
 <template>
-  <zan-radio-group v-model="radio">
-    <zan-radio name="1">单选框1</zan-radio>
-    <zan-radio name="2">单选框2</zan-radio>
-  </zan-radio-group>
+  <van-radio-group v-model="radio">
+    <van-radio name="1">单选框1</van-radio>
+    <van-radio name="2">单选框2</van-radio>
+  </van-radio-group>
 </template>
   
 <script>
@@ -11,8 +11,8 @@ import RadioGroup from 'packages/radio-group';
 
 export default {
   components: {
-    'zan-radio': Radio,
-    'zan-radio-group': RadioGroup
+    'van-radio': Radio,
+    'van-radio-group': RadioGroup
   },
 
   data() {
diff --git a/test/unit/components/steps.vue b/test/unit/components/steps.vue
index 5b0ae519d..917ae2235 100644
--- a/test/unit/components/steps.vue
+++ b/test/unit/components/steps.vue
@@ -1,10 +1,10 @@
 <template>
-  <zan-steps :active="active">
-    <zan-step>买家下单</zan-step>
-    <zan-step>商家接单</zan-step>
-    <zan-step>买家提货</zan-step>
-    <zan-step>交易完成</zan-step>
-  </zan-steps>
+  <van-steps :active="active">
+    <van-step>买家下单</van-step>
+    <van-step>商家接单</van-step>
+    <van-step>买家提货</van-step>
+    <van-step>交易完成</van-step>
+  </van-steps>
 </template>
 
 <script>
@@ -13,8 +13,8 @@ import Step from 'packages/step';
 
 export default {
   components: {
-    'zan-step': Step,
-    'zan-steps': Steps
+    'van-step': Step,
+    'van-steps': Steps
   },
 
   data() {
diff --git a/test/unit/components/tabs.vue b/test/unit/components/tabs.vue
index 78f9dbe2e..fcff87ad3 100644
--- a/test/unit/components/tabs.vue
+++ b/test/unit/components/tabs.vue
@@ -1,11 +1,11 @@
 <template>
-  <zan-tabs>
-    <zan-tab title="选项一">内容一</zan-tab>
-    <zan-tab title="选项二" disabled>内容二</zan-tab>
-    <zan-tab title="选项三">内容三</zan-tab>
-    <zan-tab title="选项四">内容四</zan-tab>
-    <zan-tab title="选项五">内容五</zan-tab>
-  </zan-tabs>
+  <van-tabs>
+    <van-tab title="选项一">内容一</van-tab>
+    <van-tab title="选项二" disabled>内容二</van-tab>
+    <van-tab title="选项三">内容三</van-tab>
+    <van-tab title="选项四">内容四</van-tab>
+    <van-tab title="选项五">内容五</van-tab>
+  </van-tabs>
 </template>
 
 <script>
@@ -14,8 +14,8 @@ import Tabs from 'packages/tabs';
 
 export default {
   components: {
-    'zan-tab': Tab,
-    'zan-tabs': Tabs
+    'van-tab': Tab,
+    'van-tabs': Tabs
   }
 };
 </script>
diff --git a/test/unit/index.js b/test/unit/index.js
index 2ec49224c..3a8c88393 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,4 +1,4 @@
-require('packages/zanui-css/src/index.css');
+require('packages/vant-css/src/index.css');
 
 // require all test files (files that ends with .spec.js)
 const testsReq = require.context('./specs', true, /\.spec$/);
diff --git a/test/unit/specs/actionsheet.spec.js b/test/unit/specs/actionsheet.spec.js
index d8394208e..182a9ee86 100644
--- a/test/unit/specs/actionsheet.spec.js
+++ b/test/unit/specs/actionsheet.spec.js
@@ -12,8 +12,8 @@ describe('ActionSheet', () => {
       propsData: {}
     });
 
-    expect(wrapper.hasClass('zan-actionsheet')).to.be.true;
-    expect(wrapper.contains('.zan-actionsheet__list')).to.be.true;
+    expect(wrapper.hasClass('van-actionsheet')).to.be.true;
+    expect(wrapper.contains('.van-actionsheet__list')).to.be.true;
     expect(wrapper.instance().actions.length).to.equal(0);
     expect(wrapper.instance().overlay).to.be.true;
     expect(wrapper.instance().closeOnClickOverlay).to.be.true;
@@ -36,9 +36,9 @@ describe('ActionSheet', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-actionsheet--withtitle')).to.be.true;
-    expect(wrapper.contains('.zan-actionsheet__header')).to.be.true;
-    expect(wrapper.contains('.zan-actionsheet__content')).to.be.true;
+    expect(wrapper.hasClass('van-actionsheet--withtitle')).to.be.true;
+    expect(wrapper.contains('.van-actionsheet__header')).to.be.true;
+    expect(wrapper.contains('.van-actionsheet__content')).to.be.true;
   });
 
   it('create actions actionsheet', () => {
@@ -57,12 +57,12 @@ describe('ActionSheet', () => {
       }
     });
 
-    const actionItems = wrapper.find('.zan-actionsheet__item');
+    const actionItems = wrapper.find('.van-actionsheet__item');
 
     expect(actionItems.length).to.equal(2);
-    expect(actionItems[0].contains('.zan-actionsheet__name')).to.be.true;
-    expect(actionItems[0].contains('.zan-actionsheet__subname')).to.be.true;
-    expect(actionItems[1].contains('.zan-actionsheet__loading')).to.be.true;
+    expect(actionItems[0].contains('.van-actionsheet__name')).to.be.true;
+    expect(actionItems[0].contains('.van-actionsheet__subname')).to.be.true;
+    expect(actionItems[1].contains('.van-actionsheet__loading')).to.be.true;
   });
 
   it('handle actionsheet item click with callback', () => {
@@ -80,7 +80,7 @@ describe('ActionSheet', () => {
       }
     });
 
-    const actionItem = wrapper.find('.zan-actionsheet__item')[0];
+    const actionItem = wrapper.find('.van-actionsheet__item')[0];
     actionItem.simulate('click');
     expect(called).to.be.true;
   });
@@ -92,8 +92,8 @@ describe('ActionSheet', () => {
       }
     });
 
-    const cancelButton = wrapper.find('.zan-actionsheet__button')[0];
-    expect(wrapper.contains('.zan-actionsheet__button')).to.be.true;
+    const cancelButton = wrapper.find('.van-actionsheet__button')[0];
+    expect(wrapper.contains('.van-actionsheet__button')).to.be.true;
     expect(cancelButton.text()).to.equal('cancel');
   });
 
diff --git a/test/unit/specs/badge.spec.js b/test/unit/specs/badge.spec.js
index b5fe1c579..f34f226d3 100644
--- a/test/unit/specs/badge.spec.js
+++ b/test/unit/specs/badge.spec.js
@@ -10,7 +10,7 @@ describe('BadgeGroup', () => {
   it('create a badge-group', () => {
     wrapper = mount(BadgeTestComponent);
 
-    expect(wrapper.hasClass('zan-badge-group')).to.be.true;
+    expect(wrapper.hasClass('van-badge-group')).to.be.true;
 
     expect(wrapper.vNode.child.activeKey).to.equal(0);
     expect(wrapper.vNode.child.badges.length).to.equal(2);
@@ -19,7 +19,7 @@ describe('BadgeGroup', () => {
   it('emit a click event when click badge', () => {
     wrapper = mount(BadgeTestComponent);
 
-    const badge = wrapper.find('.zan-badge')[0];
+    const badge = wrapper.find('.van-badge')[0];
     const eventStub = sinon.stub(badge.vNode.child, '$emit');
     badge.simulate('click');
 
diff --git a/test/unit/specs/button.spec.js b/test/unit/specs/button.spec.js
index 22c12521c..ddea0e72a 100644
--- a/test/unit/specs/button.spec.js
+++ b/test/unit/specs/button.spec.js
@@ -12,9 +12,9 @@ describe('Button', () => {
   it('create a simple button', () => {
     wrapper = mount(Button);
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
-    expect(wrapper.hasClass('zan-button--default')).to.be.true;
-    expect(wrapper.hasClass('zan-button--normal')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--default')).to.be.true;
+    expect(wrapper.hasClass('van-button--normal')).to.be.true;
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     wrapper.simulate('click');
@@ -30,8 +30,8 @@ describe('Button', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
-    expect(wrapper.hasClass('zan-button--primary')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--primary')).to.be.true;
   });
 
   it('create a danger button', () => {
@@ -41,8 +41,8 @@ describe('Button', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
-    expect(wrapper.hasClass('zan-button--danger')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--danger')).to.be.true;
   });
 
   it('create a large button', () => {
@@ -52,8 +52,8 @@ describe('Button', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
-    expect(wrapper.hasClass('zan-button--large')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--large')).to.be.true;
   });
 
   it('create a small button', () => {
@@ -63,8 +63,8 @@ describe('Button', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
-    expect(wrapper.hasClass('zan-button--small')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--small')).to.be.true;
   });
 
   it('create a mini button', () => {
@@ -74,8 +74,8 @@ describe('Button', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
-    expect(wrapper.hasClass('zan-button--mini')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--mini')).to.be.true;
   });
 
   it('create a block button', () => {
@@ -85,8 +85,8 @@ describe('Button', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
-    expect(wrapper.hasClass('zan-button--block')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--block')).to.be.true;
   });
 
   it('create a bottom action button', () => {
@@ -96,8 +96,8 @@ describe('Button', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
-    expect(wrapper.hasClass('zan-button--bottom-action')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--bottom-action')).to.be.true;
   });
 
   it('create a disabled button', () => {
@@ -107,8 +107,8 @@ describe('Button', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
-    expect(wrapper.hasClass('zan-button--disabled')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--disabled')).to.be.true;
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     wrapper.simulate('click');
@@ -124,7 +124,7 @@ describe('Button', () => {
     });
     const loading = wrapper.find(ZanLoading)[0];
 
-    expect(wrapper.hasClass('zan-button')).to.be.true;
+    expect(wrapper.hasClass('van-button')).to.be.true;
     expect(loading.isVueComponent).to.be.true;
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
diff --git a/test/unit/specs/card.spec.js b/test/unit/specs/card.spec.js
index 8249dde09..45f51d1ca 100644
--- a/test/unit/specs/card.spec.js
+++ b/test/unit/specs/card.spec.js
@@ -14,6 +14,6 @@ describe('Card', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-card')).to.be.true;
+    expect(wrapper.hasClass('van-card')).to.be.true;
   });
 });
diff --git a/test/unit/specs/cell.spec.js b/test/unit/specs/cell.spec.js
index 2324f806c..ec333641e 100644
--- a/test/unit/specs/cell.spec.js
+++ b/test/unit/specs/cell.spec.js
@@ -13,7 +13,7 @@ describe('CellGroup', () => {
       propsData: {}
     });
 
-    expect(wrapper.hasClass('zan-cell-group')).to.be.true;
+    expect(wrapper.hasClass('van-cell-group')).to.be.true;
   });
 });
 
@@ -26,7 +26,7 @@ describe('Cell', () => {
   it('create', () => {
     wrapper = mount(Cell);
 
-    expect(wrapper.hasClass('zan-cell')).to.be.true;
+    expect(wrapper.hasClass('van-cell')).to.be.true;
   });
 
   it('create a required cell', () => {
@@ -36,8 +36,8 @@ describe('Cell', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-cell')).to.be.true;
-    expect(wrapper.hasClass('zan-cell--required')).to.be.true;
+    expect(wrapper.hasClass('van-cell')).to.be.true;
+    expect(wrapper.hasClass('van-cell--required')).to.be.true;
   });
 
   it('emit a click event', () => {
diff --git a/test/unit/specs/checkbox.spec.js b/test/unit/specs/checkbox.spec.js
index 455b0935d..70d2ef69d 100644
--- a/test/unit/specs/checkbox.spec.js
+++ b/test/unit/specs/checkbox.spec.js
@@ -11,7 +11,7 @@ describe('CheckboxGroup', () => {
   it('create a checkbox-group', () => {
     wrapper = mount(CheckboxTestComponent);
 
-    expect(wrapper.hasClass('zan-checkbox-group')).to.be.true;
+    expect(wrapper.hasClass('van-checkbox-group')).to.be.true;
 
     expect(wrapper.vNode.child.value.length).to.equal(2);
     expect(wrapper.vNode.child.disabled).to.be.false;
@@ -40,7 +40,7 @@ describe('CheckboxGroup', () => {
 
     const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
 
-    const firstCheckboxLabel = wrapper.find('.zan-checkbox')[0].find('.zan-checkbox__label')[0];
+    const firstCheckboxLabel = wrapper.find('.van-checkbox')[0].find('.van-checkbox__label')[0];
     firstCheckboxLabel.simulate('click');
 
     wrapper.update();
@@ -56,7 +56,7 @@ describe('CheckboxGroup', () => {
 
     const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
 
-    const lastCheckboxLabel = wrapper.find('.zan-checkbox')[3].find('.zan-checkbox__label')[0];
+    const lastCheckboxLabel = wrapper.find('.van-checkbox')[3].find('.van-checkbox__label')[0];
     lastCheckboxLabel.simulate('click');
 
     wrapper.update();
@@ -82,7 +82,7 @@ describe('Checkbox', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-checkbox')).to.be.true;
+    expect(wrapper.hasClass('van-checkbox')).to.be.true;
     expect(wrapper.instance().currentValue).to.be.false;
     expect(wrapper.instance().isDisabled).to.be.false;
     expect(wrapper.instance().isChecked).to.be.false;
@@ -96,10 +96,10 @@ describe('Checkbox', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-checkbox')).to.be.true;
+    expect(wrapper.hasClass('van-checkbox')).to.be.true;
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
-    const checkboxLabel = wrapper.find('.zan-checkbox__label')[0];
+    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
     checkboxLabel.simulate('click');
 
     wrapper.update();
@@ -118,12 +118,12 @@ describe('Checkbox', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-checkbox')).to.be.true;
-    expect(wrapper.hasClass('zan-checkbox--disabled')).to.be.true;
+    expect(wrapper.hasClass('van-checkbox')).to.be.true;
+    expect(wrapper.hasClass('van-checkbox--disabled')).to.be.true;
     expect(wrapper.instance().currentValue).to.be.false;
     expect(wrapper.instance().isDisabled).to.be.true;
 
-    const checkboxLabel = wrapper.find('.zan-checkbox__label')[0];
+    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
     checkboxLabel.simulate('click');
 
     expect(wrapper.instance().currentValue).to.be.false;
diff --git a/test/unit/specs/field.spec.js b/test/unit/specs/field.spec.js
index a41a2f2fc..428eaccb6 100644
--- a/test/unit/specs/field.spec.js
+++ b/test/unit/specs/field.spec.js
@@ -15,7 +15,7 @@ describe('Field', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-field')).to.be.true;
+    expect(wrapper.hasClass('van-field')).to.be.true;
     expect(wrapper.propsData().type).to.equal('text');
   });
 
@@ -26,7 +26,7 @@ describe('Field', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-field')).to.be.true;
+    expect(wrapper.hasClass('van-field')).to.be.true;
     expect(wrapper.data().currentValue).to.equal('test');
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
@@ -48,7 +48,7 @@ describe('Field', () => {
     });
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
-    const input = wrapper.find('.zan-field__control')[0];
+    const input = wrapper.find('.van-field__control')[0];
     input.simulate('focus');
 
     wrapper.update();
@@ -65,7 +65,7 @@ describe('Field', () => {
       }
     });
 
-    const input = wrapper.find('.zan-field__control')[0];
+    const input = wrapper.find('.van-field__control')[0];
 
     input.element.value = 'test';
     input.simulate('input');
@@ -85,8 +85,8 @@ describe('Field', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-field')).to.be.true;
-    expect(wrapper.hasClass('zan-field--hastextarea')).to.be.true;
+    expect(wrapper.hasClass('van-field')).to.be.true;
+    expect(wrapper.hasClass('van-field--hastextarea')).to.be.true;
   });
 
   it('create a autosize textarea field', (done) => {
@@ -97,10 +97,10 @@ describe('Field', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-field')).to.be.true;
-    expect(wrapper.hasClass('zan-field--autosize')).to.be.true;
+    expect(wrapper.hasClass('van-field')).to.be.true;
+    expect(wrapper.hasClass('van-field--autosize')).to.be.true;
 
-    const textarea = wrapper.find('.zan-field__control')[0];
+    const textarea = wrapper.find('.van-field__control')[0];
     const textareaElement = textarea.element;
     const textAreaDiff = (parseInt(textareaElement.style.paddingBottom, 10) +
           parseInt(textareaElement.style.paddingTop, 10)) || 0;
diff --git a/test/unit/specs/icon.spec.js b/test/unit/specs/icon.spec.js
index e479e3614..c7fa06b4c 100644
--- a/test/unit/specs/icon.spec.js
+++ b/test/unit/specs/icon.spec.js
@@ -15,8 +15,8 @@ describe('Icon', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-icon')).to.be.true;
-    expect(wrapper.hasClass('zan-icon-arrow')).to.be.true;
+    expect(wrapper.hasClass('van-icon')).to.be.true;
+    expect(wrapper.hasClass('van-icon-arrow')).to.be.true;
   });
 
   it('emit a click event', () => {
diff --git a/test/unit/specs/loading.spec.js b/test/unit/specs/loading.spec.js
index dfd4bb407..0c496be9d 100644
--- a/test/unit/specs/loading.spec.js
+++ b/test/unit/specs/loading.spec.js
@@ -10,7 +10,7 @@ describe('Loading', () => {
   it('create default', () => {
     wrapper = mount(Loading);
 
-    expect(wrapper.hasClass('zan-loading')).to.be.true;
+    expect(wrapper.hasClass('van-loading')).to.be.true;
   });
 
   it('create gradient-circle black', () => {
@@ -20,10 +20,10 @@ describe('Loading', () => {
         color: 'black'
       }
     });
-    const spinner = wrapper.find('.zan-loading__spinner')[0];
+    const spinner = wrapper.find('.van-loading__spinner')[0];
 
-    expect(spinner.hasClass('zan-loading__spinner--gradient-circle')).to.be.true;
-    expect(spinner.hasClass('zan-loading__spinner--black')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--gradient-circle')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--black')).to.be.true;
   });
 
   it('create gradient-circle white', () => {
@@ -33,10 +33,10 @@ describe('Loading', () => {
         color: 'white'
       }
     });
-    const spinner = wrapper.find('.zan-loading__spinner')[0];
+    const spinner = wrapper.find('.van-loading__spinner')[0];
 
-    expect(spinner.hasClass('zan-loading__spinner--gradient-circle')).to.be.true;
-    expect(spinner.hasClass('zan-loading__spinner--white')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--gradient-circle')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--white')).to.be.true;
   });
 
   it('create circle black', () => {
@@ -46,10 +46,10 @@ describe('Loading', () => {
         color: 'black'
       }
     });
-    const spinner = wrapper.find('.zan-loading__spinner')[0];
+    const spinner = wrapper.find('.van-loading__spinner')[0];
 
-    expect(spinner.hasClass('zan-loading__spinner--circle')).to.be.true;
-    expect(spinner.hasClass('zan-loading__spinner--black')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--circle')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--black')).to.be.true;
   });
 
   it('create circle white', () => {
@@ -59,9 +59,9 @@ describe('Loading', () => {
         color: 'white'
       }
     });
-    const spinner = wrapper.find('.zan-loading__spinner')[0];
+    const spinner = wrapper.find('.van-loading__spinner')[0];
 
-    expect(spinner.hasClass('zan-loading__spinner--circle')).to.be.true;
-    expect(spinner.hasClass('zan-loading__spinner--white')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--circle')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--white')).to.be.true;
   });
 });
diff --git a/test/unit/specs/popup.spec.js b/test/unit/specs/popup.spec.js
index ff5bd5347..07b23b0e1 100644
--- a/test/unit/specs/popup.spec.js
+++ b/test/unit/specs/popup.spec.js
@@ -14,7 +14,7 @@ describe('Popup', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-popup')).to.be.true;
+    expect(wrapper.hasClass('van-popup')).to.be.true;
     expect(wrapper.instance().currentTransition).to.equal('popup-slide-bottom');
   });
 
diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js
index a6c897d6f..69b6cf763 100644
--- a/test/unit/specs/progress.spec.js
+++ b/test/unit/specs/progress.spec.js
@@ -9,8 +9,8 @@ describe('Progress', () => {
     wrapper = mount(Progress, {
       propsData: propsData
     });
-    bar = wrapper.find('.zan-progress__bar__finished-portion')[0];
-    pivot = wrapper.find('.zan-progress__bar__pivot')[0];
+    bar = wrapper.find('.van-progress__bar__finished-portion')[0];
+    pivot = wrapper.find('.van-progress__bar__pivot')[0];
   };
 
   afterEach(() => {
@@ -20,7 +20,7 @@ describe('Progress', () => {
   it('create active 3% progress bar', () => {
     initProgressBar({ percentage: 3 });
 
-    expect(wrapper.hasClass('zan-progress')).to.be.true;
+    expect(wrapper.hasClass('van-progress')).to.be.true;
     expect(bar.is('span')).to.be.true;
     expect(bar.hasStyle('width', '3%'));
 
@@ -33,7 +33,7 @@ describe('Progress', () => {
   it('create active 35% progress bar', () => {
     initProgressBar({ percentage: 35 });
 
-    expect(wrapper.hasClass('zan-progress')).to.be.true;
+    expect(wrapper.hasClass('van-progress')).to.be.true;
     expect(bar.is('span')).to.be.true;
     expect(bar.hasStyle('width', '35%'));
 
@@ -46,7 +46,7 @@ describe('Progress', () => {
   it('create active 98% progress bar', () => {
     initProgressBar({ percentage: 98 });
 
-    expect(wrapper.hasClass('zan-progress')).to.be.true;
+    expect(wrapper.hasClass('van-progress')).to.be.true;
     expect(bar.is('span')).to.be.true;
     expect(bar.hasStyle('width', '98%'));
 
diff --git a/test/unit/specs/quantity.spec.js b/test/unit/specs/quantity.spec.js
index 43168f6d9..a573dedc8 100644
--- a/test/unit/specs/quantity.spec.js
+++ b/test/unit/specs/quantity.spec.js
@@ -15,15 +15,15 @@ describe('Quantity', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-quantity')).to.be.true;
+    expect(wrapper.hasClass('van-quantity')).to.be.true;
     expect(wrapper.data().currentValue).to.equal(1);
 
-    const plusButton = wrapper.find('.zan-quantity__plus')[0];
+    const plusButton = wrapper.find('.van-quantity__plus')[0];
     plusButton.simulate('click');
 
     expect(wrapper.data().currentValue).to.equal(2);
 
-    const minusButton = wrapper.find('.zan-quantity__minus')[0];
+    const minusButton = wrapper.find('.van-quantity__minus')[0];
     minusButton.simulate('click');
     expect(wrapper.data().currentValue).to.equal(1);
   });
@@ -35,9 +35,9 @@ describe('Quantity', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-quantity')).to.be.true;
-    const minusButton = wrapper.find('.zan-quantity__minus')[0];
-    expect(minusButton.hasClass('zan-quantity__minus--disabled')).to.be.true;
+    expect(wrapper.hasClass('van-quantity')).to.be.true;
+    const minusButton = wrapper.find('.van-quantity__minus')[0];
+    expect(minusButton.hasClass('van-quantity__minus--disabled')).to.be.true;
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     minusButton.simulate('click');
@@ -48,8 +48,8 @@ describe('Quantity', () => {
       done();
     });
 
-    const plusButton = wrapper.find('.zan-quantity__plus')[0];
-    expect(plusButton.hasClass('zan-quantity__plus--disabled')).to.be.true;
+    const plusButton = wrapper.find('.van-quantity__plus')[0];
+    expect(plusButton.hasClass('van-quantity__plus--disabled')).to.be.true;
 
     plusButton.simulate('click');
 
@@ -67,7 +67,7 @@ describe('Quantity', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-quantity')).to.be.true;
+    expect(wrapper.hasClass('van-quantity')).to.be.true;
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
     wrapper.vm.value = 2;
@@ -87,7 +87,7 @@ describe('Quantity', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-quantity')).to.be.true;
+    expect(wrapper.hasClass('van-quantity')).to.be.true;
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     wrapper.update();
     wrapper.vm.$nextTick(() => {
@@ -103,7 +103,7 @@ describe('Quantity', () => {
       }
     });
 
-    const input = wrapper.find('.zan-quantity__input')[0];
+    const input = wrapper.find('.van-quantity__input')[0];
     input.element.value = 2;
     input.simulate('input');
 
diff --git a/test/unit/specs/radio.spec.js b/test/unit/specs/radio.spec.js
index 0e926c2a0..dba53bc75 100644
--- a/test/unit/specs/radio.spec.js
+++ b/test/unit/specs/radio.spec.js
@@ -11,7 +11,7 @@ describe('RadioGroup', () => {
   it('create a radio-group', () => {
     wrapper = mount(RadioTestComponent);
 
-    expect(wrapper.hasClass('zan-radio-group')).to.be.true;
+    expect(wrapper.hasClass('van-radio-group')).to.be.true;
 
     expect(wrapper.vNode.child.value).to.equal('1');
     expect(wrapper.vNode.child.disabled).to.be.false;
@@ -40,7 +40,7 @@ describe('RadioGroup', () => {
 
     const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
 
-    const uncheckedRadioLabel = wrapper.find('.zan-radio')[1].find('.zan-radio__label')[0];
+    const uncheckedRadioLabel = wrapper.find('.van-radio')[1].find('.van-radio__label')[0];
     uncheckedRadioLabel.simulate('click');
 
     wrapper.update();
@@ -67,8 +67,8 @@ describe('Radio', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-radio')).to.be.true;
-    expect(wrapper.hasClass('zan-radio--disabled')).to.be.false;
+    expect(wrapper.hasClass('van-radio')).to.be.true;
+    expect(wrapper.hasClass('van-radio--disabled')).to.be.false;
     expect(wrapper.instance().currentValue).to.equal('1');
     expect(wrapper.instance().isDisabled).to.be.false;
   });
@@ -82,7 +82,7 @@ describe('Radio', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-radio')).to.be.true;
+    expect(wrapper.hasClass('van-radio')).to.be.true;
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
     wrapper.simulate('click');
@@ -103,10 +103,10 @@ describe('Radio', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-radio')).to.be.true;
+    expect(wrapper.hasClass('van-radio')).to.be.true;
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
-    const checkboxLabel = wrapper.find('.zan-radio__label')[0];
+    const checkboxLabel = wrapper.find('.van-radio__label')[0];
     checkboxLabel.simulate('click');
 
     wrapper.update();
@@ -126,12 +126,12 @@ describe('Radio', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-radio')).to.be.true;
-    expect(wrapper.hasClass('zan-radio--disabled')).to.be.true;
+    expect(wrapper.hasClass('van-radio')).to.be.true;
+    expect(wrapper.hasClass('van-radio--disabled')).to.be.true;
     expect(wrapper.instance().currentValue).to.equal('1');
     expect(wrapper.instance().isDisabled).to.be.true;
 
-    const checkboxLabel = wrapper.find('.zan-radio__label')[0];
+    const checkboxLabel = wrapper.find('.van-radio__label')[0];
     checkboxLabel.simulate('click');
 
     expect(wrapper.instance().currentValue).to.equal('1');
diff --git a/test/unit/specs/search.spec.js b/test/unit/specs/search.spec.js
index de0faf5f2..4a4103eb5 100644
--- a/test/unit/specs/search.spec.js
+++ b/test/unit/specs/search.spec.js
@@ -11,7 +11,7 @@ describe('Search', () => {
   it('create a quantity', () => {
     wrapper = mount(Search);
 
-    expect(wrapper.hasClass('zan-search')).to.be.true;
+    expect(wrapper.hasClass('van-search')).to.be.true;
     expect(wrapper.data().focusStatus).to.be.false;
     expect(wrapper.data().isFocus).to.be.false;
   });
@@ -19,7 +19,7 @@ describe('Search', () => {
   it('focus on input', () => {
     wrapper = mount(Search);
 
-    const input = wrapper.find('.zan-search__input')[0];
+    const input = wrapper.find('.van-search__input')[0];
     input.simulate('focus');
 
     expect(wrapper.data().isFocus).to.be.true;
@@ -45,10 +45,10 @@ describe('Search', () => {
     wrapper.setData({ value: 'test' });
     expect(wrapper.data().value).to.be.equal('test');
 
-    const input = wrapper.find('.zan-search__input')[0];
+    const input = wrapper.find('.van-search__input')[0];
     input.simulate('focus');
 
-    const cleanBtn = wrapper.find('.zan-icon-clear')[0];
+    const cleanBtn = wrapper.find('.van-icon-clear')[0];
     cleanBtn.simulate('click');
     expect(wrapper.data().value).to.equal('');
     expect(wrapper.data().focusStatus).to.be.true;
@@ -62,10 +62,10 @@ describe('Search', () => {
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
-    const input = wrapper.find('.zan-search__input')[0];
+    const input = wrapper.find('.van-search__input')[0];
     input.simulate('focus');
 
-    const cancelBtn = wrapper.find('.zan-search__cancel')[0];
+    const cancelBtn = wrapper.find('.van-search__cancel')[0];
     cancelBtn.simulate('click');
 
     wrapper.vm.$nextTick(() => {
@@ -83,7 +83,7 @@ describe('Search', () => {
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
-    const input = wrapper.find('.zan-search__input')[0];
+    const input = wrapper.find('.van-search__input')[0];
     input.simulate('keyup.enter');
 
     wrapper.vm.$nextTick(() => {
diff --git a/test/unit/specs/steps.spec.js b/test/unit/specs/steps.spec.js
index da0172432..905971554 100644
--- a/test/unit/specs/steps.spec.js
+++ b/test/unit/specs/steps.spec.js
@@ -12,17 +12,17 @@ describe('Steps', () => {
   it('create a steps', () => {
     wrapper = mount(Steps);
 
-    expect(wrapper.hasClass('zan-steps')).to.be.true;
+    expect(wrapper.hasClass('van-steps')).to.be.true;
     expect(wrapper.data().steps.length).to.equal(0);
   });
 
   it('create a steps with step', () => {
     wrapper = mount(StepsTestComponent);
 
-    const finishStep = wrapper.find('.zan-step')[0];
-    expect(finishStep.hasClass('zan-step--finish')).to.be.true;
+    const finishStep = wrapper.find('.van-step')[0];
+    expect(finishStep.hasClass('van-step--finish')).to.be.true;
 
-    const proccessStep = wrapper.find('.zan-step')[1];
-    expect(proccessStep.hasClass('zan-step--process')).to.be.true;
+    const proccessStep = wrapper.find('.van-step')[1];
+    expect(proccessStep.hasClass('van-step--process')).to.be.true;
   });
 });
diff --git a/test/unit/specs/switch.spec.js b/test/unit/specs/switch.spec.js
index 8477da46b..6dacf6900 100644
--- a/test/unit/specs/switch.spec.js
+++ b/test/unit/specs/switch.spec.js
@@ -17,8 +17,8 @@ describe('Switch', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-switch')).to.be.true;
-    expect(wrapper.hasClass('zan-switch--on')).to.be.true;
+    expect(wrapper.hasClass('van-switch')).to.be.true;
+    expect(wrapper.hasClass('van-switch--on')).to.be.true;
   });
 
   it('create off switch', () => {
@@ -28,8 +28,8 @@ describe('Switch', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-switch')).to.be.true;
-    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch')).to.be.true;
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
   });
 
   it('create loading switch', () => {
@@ -40,7 +40,7 @@ describe('Switch', () => {
     });
     const loading = wrapper.find(ZanLoading)[0];
 
-    expect(wrapper.hasClass('zan-switch')).to.be.true;
+    expect(wrapper.hasClass('van-switch')).to.be.true;
     expect(loading.isVueComponent).to.be.true;
   });
 
@@ -52,9 +52,9 @@ describe('Switch', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-switch--on')).to.be.true;
+    expect(wrapper.hasClass('van-switch--on')).to.be.true;
     wrapper.simulate('click');
-    expect(wrapper.hasClass('zan-switch--on')).to.be.true;
+    expect(wrapper.hasClass('van-switch--on')).to.be.true;
   });
 
   it('create disabled switch', () => {
@@ -64,8 +64,8 @@ describe('Switch', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-switch')).to.be.true;
-    expect(wrapper.hasClass('zan-switch--disabled')).to.be.true;
+    expect(wrapper.hasClass('van-switch')).to.be.true;
+    expect(wrapper.hasClass('van-switch--disabled')).to.be.true;
   });
 
   it('disabled switch should be unclickable', () => {
@@ -76,9 +76,9 @@ describe('Switch', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
     wrapper.simulate('click');
-    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
   });
 
   it('click should toggle the switch', () => {
@@ -88,9 +88,9 @@ describe('Switch', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
     wrapper.simulate('click');
-    expect(wrapper.hasClass('zan-switch--on')).to.be.true;
+    expect(wrapper.hasClass('van-switch--on')).to.be.true;
   });
 
   it('click should call callback function', () => {
@@ -102,9 +102,9 @@ describe('Switch', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
     wrapper.simulate('click');
-    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
     expect(stub.calledOnce).to.be.true;
     expect(stub.calledWith(true));
   });
@@ -117,11 +117,11 @@ describe('Switch', () => {
     });
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
-    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
     wrapper.vm.value = true;
     wrapper.update();
     Vue.nextTick(() => {
-      expect(wrapper.hasClass('zan-switch--on')).to.be.true;
+      expect(wrapper.hasClass('van-switch--on')).to.be.true;
       expect(eventStub.calledOnce).to.be.true;
       expect(eventStub.calledWith('input'));
       done();
diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js
index a8e6bf431..9175158a6 100644
--- a/test/unit/specs/tabs.spec.js
+++ b/test/unit/specs/tabs.spec.js
@@ -16,19 +16,19 @@ describe('Tabs', () => {
       }
     });
 
-    expect(wrapper.hasClass('zan-tabs')).to.be.true;
-    expect(wrapper.hasClass('zan-tabs--card')).to.be.true;
+    expect(wrapper.hasClass('van-tabs')).to.be.true;
+    expect(wrapper.hasClass('van-tabs--card')).to.be.true;
   });
 
   it('create a tabs with four tab', () => {
     // wrapper = mount(TabsTestComponent);
 
-    // expect(wrapper.hasClass('zan-tabs')).to.be.true;
-    // expect(wrapper.hasClass('zan-tabs--line')).to.be.true;
+    // expect(wrapper.hasClass('van-tabs')).to.be.true;
+    // expect(wrapper.hasClass('van-tabs--line')).to.be.true;
 
     // const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
 
-    // const tabTitle = wrapper.find('.zan-tab__pane')[2];
+    // const tabTitle = wrapper.find('.van-tab__pane')[2];
     // tabTitle.simulate('click');
 
     // wrapper.vm.$nextTick(() => {
diff --git a/test/unit/specs/toast.spec.js b/test/unit/specs/toast.spec.js
index 4233d141e..c4c906f78 100644
--- a/test/unit/specs/toast.spec.js
+++ b/test/unit/specs/toast.spec.js
@@ -4,7 +4,7 @@
 // describe('Toast', () => {
 //   // it('create simple toast', () => {
 //   //   Toast('a message');
-//   //   var toast = document.querySelector('.zan-toast');
+//   //   var toast = document.querySelector('.van-toast');
 
 //   //   expect(toast).not.to.be.underfined;
 
@@ -15,7 +15,7 @@
 
 //   // it('create loading toast', () => {
 //   //   Toast.loading('');
-//   //   var toast = document.querySelector('.zan-toast');
+//   //   var toast = document.querySelector('.van-toast');
 
 //   //   expect(toast).not.to.be.underfined;
 
@@ -25,7 +25,7 @@
 //   // });
 //   // it('create loading toast', () => {
 //   //   Toast.success('');
-//   //   var toast = document.querySelector('.zan-toast');
+//   //   var toast = document.querySelector('.van-toast');
 
 //   //   expect(toast).not.to.be.underfined;