From d8b6ad7d543c599874b84148b5911889544a775e Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 15 Nov 2017 20:08:51 -0600
Subject: [PATCH] [new feature] add i18n support (#310)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [new feature] add i18n support

* feat: Extract demos from markdown

* feat: Base components demos

* [new feature] complete demo extract & translate

* [fix] text cases

* fix: add deepAssign test cases

* fix: changelog detail

* [new feature] AddressEdit support i18n
---
 .github/CONTRIBUTING.zh-CN.md                 |   8 +-
 .github/MARKDOWN.md                           |  38 +-
 build/bin/build-entry.js                      | 137 ++++---
 build/webpack.config.dev.js                   |  19 +-
 docs/demos/common.js                          |  72 ++++
 docs/demos/index.js                           |  57 +++
 docs/{ => demos}/mock/area.json               |   0
 docs/{ => demos}/mock/sku.js                  |   0
 docs/demos/views/actionsheet.vue              |  81 +++++
 docs/demos/views/address-edit.vue             |  69 ++++
 docs/demos/views/address-list.vue             |  60 ++++
 docs/demos/views/area.vue                     |  38 ++
 docs/demos/views/badge.vue                    |  54 +++
 docs/demos/views/button.vue                   |  92 +++++
 docs/demos/views/card.vue                     |  38 ++
 docs/demos/views/cell-swipe.vue               |  51 +++
 docs/demos/views/cell.vue                     |  86 +++++
 docs/demos/views/checkbox.vue                 |  77 ++++
 docs/demos/views/contact.vue                  | 116 ++++++
 docs/demos/views/coupon.vue                   |  96 +++++
 docs/demos/views/datetime-picker.vue          |  61 ++++
 docs/demos/views/dialog.vue                   |  60 ++++
 docs/demos/views/field.vue                    | 105 ++++++
 docs/demos/views/goods-action.vue             |  52 +++
 .../en-US/icon.md => demos/views/icon.vue}    |  90 +++--
 docs/demos/views/image-preview.vue            |  51 +++
 docs/demos/views/layout.vue                   |  65 ++++
 docs/demos/views/lazyload.vue                 |  82 +++++
 docs/demos/views/loading.vue                  |  44 +++
 docs/demos/views/nav-bar.vue                  |  18 +
 docs/demos/views/notice-bar.vue               |  44 +++
 docs/demos/views/number-keyboard.vue          |  59 +++
 docs/demos/views/panel.vue                    |  35 ++
 docs/demos/views/password-input.vue           |  47 +++
 docs/demos/views/picker.vue                   |  74 ++++
 docs/demos/views/popup.vue                    | 112 ++++++
 docs/demos/views/progress.vue                 |  48 +++
 docs/demos/views/pull-refresh.vue             |  49 +++
 docs/demos/views/radio.vue                    |  77 ++++
 docs/demos/views/search.vue                   |  68 ++++
 docs/demos/views/sku.vue                      | 115 ++++++
 docs/demos/views/stepper.vue                  |  34 ++
 docs/demos/views/steps.vue                    | 113 ++++++
 docs/demos/views/submit-bar.vue               |  76 ++++
 docs/demos/views/swipe.vue                    |  80 +++++
 docs/demos/views/switch-cell.vue              |  45 +++
 docs/demos/views/switch.vue                   |  61 ++++
 docs/demos/views/tab.vue                      | 112 ++++++
 docs/demos/views/tabbar.vue                   |  60 ++++
 docs/demos/views/tag.vue                      |  53 +++
 docs/demos/views/toast.vue                    |  95 +++++
 docs/demos/views/tree-select.vue              | 119 ++++++
 docs/demos/views/uploader.vue                 |  31 ++
 docs/demos/views/waterfall.vue                |  77 ++++
 docs/examples-docs/en-US/dialog.md            | 126 -------
 docs/examples-docs/en-US/image-preview.md     |  52 ---
 docs/examples-docs/en-US/popup.md             | 119 ------
 docs/examples-docs/en-US/tab.md               | 339 ------------------
 docs/examples-docs/en-US/toast.md             | 160 ---------
 docs/examples-docs/en-US/uploader.md          |  57 ---
 docs/examples-docs/zh-CN/actionsheet.md       | 181 ----------
 docs/examples-docs/zh-CN/dialog.md            | 132 -------
 docs/examples-docs/zh-CN/icon.md              | 172 ---------
 docs/examples-docs/zh-CN/image-preview.md     |  89 -----
 docs/examples-docs/zh-CN/lazyload.md          | 153 --------
 docs/examples-docs/zh-CN/loading.md           |  53 ---
 docs/examples-docs/zh-CN/popup.md             | 154 --------
 docs/examples-docs/zh-CN/tab.md               | 257 -------------
 docs/examples-docs/zh-CN/toast.md             | 168 ---------
 .../en-US/actionsheet.md                      |  42 +--
 .../en-US/address-edit.md                     |  52 +--
 .../en-US/address-list.md                     |  43 ---
 .../{examples-docs => markdown}/en-US/area.md |  43 +--
 .../en-US/badge.md                            |  23 +-
 .../en-US/button.md                           |  18 +-
 .../{examples-docs => markdown}/en-US/card.md |  14 -
 .../en-US/cell-swipe.md                       |   2 -
 .../{examples-docs => markdown}/en-US/cell.md |  40 +--
 .../en-US/changelog.md                        |   6 +-
 .../en-US/checkbox.md                         |  52 +--
 .../en-US/contact.md                          |  78 +---
 .../en-US/coupon.md                           |  72 +---
 .../en-US/datetime-picker.md                  |  37 +-
 docs/markdown/en-US/dialog.md                 |  63 ++++
 .../en-US/field.md                            |  27 +-
 .../en-US/goods-action.md                     |  18 +-
 docs/markdown/en-US/icon.md                   |  23 ++
 docs/markdown/en-US/image-preview.md          |  32 ++
 .../en-US/layout.md                           |   8 +-
 .../en-US/lazyload.md                         |  38 +-
 .../en-US/loading.md                          |  18 +-
 .../en-US/nav-bar.md                          |  18 +-
 .../en-US/notice-bar.md                       |   8 +-
 .../en-US/number-keyboard.md                  |  28 +-
 .../en-US/panel.md                            |   8 +-
 .../en-US/password-input.md                   |   8 +-
 .../en-US/picker.md                           |  65 +---
 docs/markdown/en-US/popup.md                  |  48 +++
 .../en-US/progress.md                         |  26 +-
 .../en-US/pull-refresh.md                     |  32 --
 .../en-US/quickstart.md                       |   0
 .../en-US/radio.md                            |  81 +----
 .../en-US/search.md                           |  31 +-
 docs/{examples-docs => markdown}/en-US/sku.md | 144 +++-----
 .../en-US/stepper.md                          |  25 +-
 .../en-US/steps.md                            |  48 +--
 .../en-US/submit-bar.md                       |  26 +-
 .../en-US/swipe.md                            |  19 -
 .../en-US/switch-cell.md                      |  25 +-
 .../en-US/switch.md                           |  42 +--
 docs/markdown/en-US/tab.md                    | 125 +++++++
 .../en-US/tabbar.md                           |  25 +-
 docs/{examples-docs => markdown}/en-US/tag.md |   6 -
 docs/markdown/en-US/theme.md                  |  55 +++
 docs/markdown/en-US/toast.md                  |  73 ++++
 .../en-US/tree-select.md                      |  87 +----
 docs/markdown/en-US/uploader.md               |  45 +++
 .../en-US/waterfall.md                        |  32 --
 docs/markdown/index.js                        | 116 ++++++
 docs/markdown/zh-CN/actionsheet.md            |  86 +++++
 .../zh-CN/address-edit.md                     |  50 +--
 .../zh-CN/address-list.md                     |  44 +--
 .../{examples-docs => markdown}/zh-CN/area.md |  40 +--
 .../zh-CN/badge.md                            |  38 --
 .../zh-CN/button.md                           |  46 +--
 .../{examples-docs => markdown}/zh-CN/card.md |  26 +-
 .../zh-CN/cell-swipe.md                       |  22 +-
 .../{examples-docs => markdown}/zh-CN/cell.md |  57 +--
 .../zh-CN/changelog-generated.md              |   0
 .../zh-CN/changelog.md                        |   6 +-
 .../zh-CN/checkbox.md                         |  57 +--
 .../zh-CN/contact.md                          |  85 +----
 .../zh-CN/coupon.md                           |  81 +----
 .../zh-CN/datetime-picker.md                  |  51 +--
 docs/markdown/zh-CN/dialog.md                 |  63 ++++
 .../zh-CN/field.md                            |  29 --
 .../zh-CN/goods-action.md                     |  25 --
 docs/markdown/zh-CN/icon.md                   |  23 ++
 docs/markdown/zh-CN/image-preview.md          |  36 ++
 .../zh-CN/layout.md                           |  28 --
 docs/markdown/zh-CN/lazyload.md               |  67 ++++
 docs/markdown/zh-CN/loading.md                |  38 ++
 .../zh-CN/nav-bar.md                          |  18 +-
 .../zh-CN/notice-bar.md                       |  17 +-
 .../zh-CN/number-keyboard.md                  |  32 --
 .../zh-CN/panel.md                            |  33 +-
 .../zh-CN/password-input.md                   |  28 +-
 .../zh-CN/picker.md                           |  84 +----
 docs/markdown/zh-CN/popup.md                  |  48 +++
 .../zh-CN/progress.md                         |  34 +-
 .../zh-CN/pull-refresh.md                     |  54 ---
 .../zh-CN/quickstart.md                       |   0
 .../zh-CN/radio.md                            |  95 +----
 .../zh-CN/search.md                           |  41 +--
 docs/{examples-docs => markdown}/zh-CN/sku.md | 151 +++-----
 .../zh-CN/stepper.md                          |  31 +-
 .../zh-CN/steps.md                            |  78 +---
 .../zh-CN/submit-bar.md                       |  52 +--
 .../zh-CN/swipe.md                            |  55 ---
 .../zh-CN/switch-cell.md                      |  21 +-
 .../zh-CN/switch.md                           |  48 +--
 docs/markdown/zh-CN/tab.md                    | 129 +++++++
 .../zh-CN/tabbar.md                           |  41 +--
 docs/{examples-docs => markdown}/zh-CN/tag.md |  21 +-
 .../zh-CN/theme.md                            |   0
 docs/markdown/zh-CN/toast.md                  |  74 ++++
 .../zh-CN/tree-select.md                      |  88 +----
 .../zh-CN/uploader.md                         |  28 +-
 .../zh-CN/waterfall.md                        |  56 +--
 docs/src/DocsApp.vue                          |  21 +-
 docs/src/WapApp.vue                           |   1 -
 docs/src/components/demo-list.vue             |  18 +-
 docs/src/components/demo.vue                  |  99 -----
 docs/src/doc.config.js                        |  27 +-
 docs/src/examples.js                          |  15 +-
 docs/src/index.js                             |   4 +-
 docs/src/router.config.js                     |  17 +-
 docs/src/utils/iframe-router.js               |  17 +-
 docs/src/utils/lang.js                        |  18 +-
 package.json                                  |   9 +-
 packages/address-edit/Detail.vue              |  11 +-
 packages/address-edit/index.vue               |  62 ++--
 packages/address-edit/theme.md                |  55 +++
 packages/area/index.vue                       |   4 +-
 packages/badge-group/index.vue                |   1 -
 packages/cell-swipe/index.vue                 |   4 +-
 packages/checkbox/index.vue                   |   2 +-
 packages/contact-card/index.vue               |  14 +-
 packages/contact-edit/index.vue               |  25 +-
 packages/contact-list/index.vue               |  14 +-
 packages/dialog/dialog.vue                    |  17 +-
 packages/dialog/index.js                      |   4 +-
 packages/index.js                             |   9 +-
 packages/locale/index.js                      |  45 +++
 packages/locale/lang/en-US.js                 |  68 ++++
 packages/locale/lang/zh-CN.js                 |  72 ++++
 .../{picker-column.vue => PickerColumn.vue}   |   0
 packages/picker/index.vue                     |   9 +-
 packages/pull-refresh/index.vue               |  24 +-
 packages/search/index.vue                     |  51 ++-
 packages/utils/camelize.js                    |   4 +
 packages/utils/deep-assign.js                 |  34 ++
 packages/utils/get.js                         |   9 +
 packages/vant-css/src/contact-card.css        |   1 +
 packages/vant-css/src/progress.css            |   4 +-
 test/unit/specs/address-edit.spec.js          |   2 +-
 test/unit/specs/deep-assign.spec.js           |  96 +++++
 test/unit/specs/picker.spec.js                |   2 +-
 test/unit/specs/popup.spec.js                 |   2 +-
 yarn.lock                                     | 139 ++++---
 210 files changed, 5563 insertions(+), 5530 deletions(-)
 create mode 100644 docs/demos/common.js
 create mode 100644 docs/demos/index.js
 rename docs/{ => demos}/mock/area.json (100%)
 rename docs/{ => demos}/mock/sku.js (100%)
 create mode 100644 docs/demos/views/actionsheet.vue
 create mode 100644 docs/demos/views/address-edit.vue
 create mode 100644 docs/demos/views/address-list.vue
 create mode 100644 docs/demos/views/area.vue
 create mode 100644 docs/demos/views/badge.vue
 create mode 100644 docs/demos/views/button.vue
 create mode 100644 docs/demos/views/card.vue
 create mode 100644 docs/demos/views/cell-swipe.vue
 create mode 100644 docs/demos/views/cell.vue
 create mode 100644 docs/demos/views/checkbox.vue
 create mode 100644 docs/demos/views/contact.vue
 create mode 100644 docs/demos/views/coupon.vue
 create mode 100644 docs/demos/views/datetime-picker.vue
 create mode 100644 docs/demos/views/dialog.vue
 create mode 100644 docs/demos/views/field.vue
 create mode 100644 docs/demos/views/goods-action.vue
 rename docs/{examples-docs/en-US/icon.md => demos/views/icon.vue} (57%)
 create mode 100644 docs/demos/views/image-preview.vue
 create mode 100644 docs/demos/views/layout.vue
 create mode 100644 docs/demos/views/lazyload.vue
 create mode 100644 docs/demos/views/loading.vue
 create mode 100644 docs/demos/views/nav-bar.vue
 create mode 100644 docs/demos/views/notice-bar.vue
 create mode 100644 docs/demos/views/number-keyboard.vue
 create mode 100644 docs/demos/views/panel.vue
 create mode 100644 docs/demos/views/password-input.vue
 create mode 100644 docs/demos/views/picker.vue
 create mode 100644 docs/demos/views/popup.vue
 create mode 100644 docs/demos/views/progress.vue
 create mode 100644 docs/demos/views/pull-refresh.vue
 create mode 100644 docs/demos/views/radio.vue
 create mode 100644 docs/demos/views/search.vue
 create mode 100644 docs/demos/views/sku.vue
 create mode 100644 docs/demos/views/stepper.vue
 create mode 100644 docs/demos/views/steps.vue
 create mode 100644 docs/demos/views/submit-bar.vue
 create mode 100644 docs/demos/views/swipe.vue
 create mode 100644 docs/demos/views/switch-cell.vue
 create mode 100644 docs/demos/views/switch.vue
 create mode 100644 docs/demos/views/tab.vue
 create mode 100644 docs/demos/views/tabbar.vue
 create mode 100644 docs/demos/views/tag.vue
 create mode 100644 docs/demos/views/toast.vue
 create mode 100644 docs/demos/views/tree-select.vue
 create mode 100644 docs/demos/views/uploader.vue
 create mode 100644 docs/demos/views/waterfall.vue
 delete mode 100644 docs/examples-docs/en-US/dialog.md
 delete mode 100644 docs/examples-docs/en-US/image-preview.md
 delete mode 100644 docs/examples-docs/en-US/popup.md
 delete mode 100644 docs/examples-docs/en-US/tab.md
 delete mode 100644 docs/examples-docs/en-US/toast.md
 delete mode 100644 docs/examples-docs/en-US/uploader.md
 delete mode 100644 docs/examples-docs/zh-CN/actionsheet.md
 delete mode 100644 docs/examples-docs/zh-CN/dialog.md
 delete mode 100644 docs/examples-docs/zh-CN/icon.md
 delete mode 100644 docs/examples-docs/zh-CN/image-preview.md
 delete mode 100644 docs/examples-docs/zh-CN/lazyload.md
 delete mode 100644 docs/examples-docs/zh-CN/loading.md
 delete mode 100644 docs/examples-docs/zh-CN/popup.md
 delete mode 100644 docs/examples-docs/zh-CN/tab.md
 delete mode 100644 docs/examples-docs/zh-CN/toast.md
 rename docs/{examples-docs => markdown}/en-US/actionsheet.md (59%)
 rename docs/{examples-docs => markdown}/en-US/address-edit.md (75%)
 rename docs/{examples-docs => markdown}/en-US/address-list.md (67%)
 rename docs/{examples-docs => markdown}/en-US/area.md (81%)
 rename docs/{examples-docs => markdown}/en-US/badge.md (74%)
 rename docs/{examples-docs => markdown}/en-US/button.md (84%)
 rename docs/{examples-docs => markdown}/en-US/card.md (84%)
 rename docs/{examples-docs => markdown}/en-US/cell-swipe.md (97%)
 rename docs/{examples-docs => markdown}/en-US/cell.md (68%)
 rename docs/{examples-docs => markdown}/en-US/changelog.md (99%)
 rename docs/{examples-docs => markdown}/en-US/checkbox.md (71%)
 rename docs/{examples-docs => markdown}/en-US/contact.md (74%)
 rename docs/{examples-docs => markdown}/en-US/coupon.md (72%)
 rename docs/{examples-docs => markdown}/en-US/datetime-picker.md (74%)
 create mode 100644 docs/markdown/en-US/dialog.md
 rename docs/{examples-docs => markdown}/en-US/field.md (87%)
 rename docs/{examples-docs => markdown}/en-US/goods-action.md (87%)
 create mode 100644 docs/markdown/en-US/icon.md
 create mode 100644 docs/markdown/en-US/image-preview.md
 rename docs/{examples-docs => markdown}/en-US/layout.md (97%)
 rename docs/{examples-docs => markdown}/en-US/lazyload.md (79%)
 rename docs/{examples-docs => markdown}/en-US/loading.md (52%)
 rename docs/{examples-docs => markdown}/en-US/nav-bar.md (67%)
 rename docs/{examples-docs => markdown}/en-US/notice-bar.md (90%)
 rename docs/{examples-docs => markdown}/en-US/number-keyboard.md (82%)
 rename docs/{examples-docs => markdown}/en-US/panel.md (89%)
 rename docs/{examples-docs => markdown}/en-US/password-input.md (95%)
 rename docs/{examples-docs => markdown}/en-US/picker.md (68%)
 create mode 100644 docs/markdown/en-US/popup.md
 rename docs/{examples-docs => markdown}/en-US/progress.md (51%)
 rename docs/{examples-docs => markdown}/en-US/pull-refresh.md (73%)
 rename docs/{examples-docs => markdown}/en-US/quickstart.md (100%)
 rename docs/{examples-docs => markdown}/en-US/radio.md (53%)
 rename docs/{examples-docs => markdown}/en-US/search.md (81%)
 rename docs/{examples-docs => markdown}/en-US/sku.md (66%)
 rename docs/{examples-docs => markdown}/en-US/stepper.md (78%)
 rename docs/{examples-docs => markdown}/en-US/steps.md (66%)
 rename docs/{examples-docs => markdown}/en-US/submit-bar.md (78%)
 rename docs/{examples-docs => markdown}/en-US/swipe.md (73%)
 rename docs/{examples-docs => markdown}/en-US/switch-cell.md (75%)
 rename docs/{examples-docs => markdown}/en-US/switch.md (65%)
 create mode 100644 docs/markdown/en-US/tab.md
 rename docs/{examples-docs => markdown}/en-US/tabbar.md (79%)
 rename docs/{examples-docs => markdown}/en-US/tag.md (93%)
 create mode 100644 docs/markdown/en-US/theme.md
 create mode 100644 docs/markdown/en-US/toast.md
 rename docs/{examples-docs => markdown}/en-US/tree-select.md (53%)
 create mode 100644 docs/markdown/en-US/uploader.md
 rename docs/{examples-docs => markdown}/en-US/waterfall.md (72%)
 create mode 100644 docs/markdown/index.js
 create mode 100644 docs/markdown/zh-CN/actionsheet.md
 rename docs/{examples-docs => markdown}/zh-CN/address-edit.md (75%)
 rename docs/{examples-docs => markdown}/zh-CN/address-list.md (67%)
 rename docs/{examples-docs => markdown}/zh-CN/area.md (82%)
 rename docs/{examples-docs => markdown}/zh-CN/badge.md (73%)
 rename docs/{examples-docs => markdown}/zh-CN/button.md (73%)
 rename docs/{examples-docs => markdown}/zh-CN/card.md (71%)
 rename docs/{examples-docs => markdown}/zh-CN/cell-swipe.md (64%)
 rename docs/{examples-docs => markdown}/zh-CN/cell.md (65%)
 rename docs/{examples-docs => markdown}/zh-CN/changelog-generated.md (100%)
 rename docs/{examples-docs => markdown}/zh-CN/changelog.md (99%)
 rename docs/{examples-docs => markdown}/zh-CN/checkbox.md (72%)
 rename docs/{examples-docs => markdown}/zh-CN/contact.md (73%)
 rename docs/{examples-docs => markdown}/zh-CN/coupon.md (72%)
 rename docs/{examples-docs => markdown}/zh-CN/datetime-picker.md (74%)
 create mode 100644 docs/markdown/zh-CN/dialog.md
 rename docs/{examples-docs => markdown}/zh-CN/field.md (87%)
 rename docs/{examples-docs => markdown}/zh-CN/goods-action.md (83%)
 create mode 100644 docs/markdown/zh-CN/icon.md
 create mode 100644 docs/markdown/zh-CN/image-preview.md
 rename docs/{examples-docs => markdown}/zh-CN/layout.md (79%)
 create mode 100644 docs/markdown/zh-CN/lazyload.md
 create mode 100644 docs/markdown/zh-CN/loading.md
 rename docs/{examples-docs => markdown}/zh-CN/nav-bar.md (67%)
 rename docs/{examples-docs => markdown}/zh-CN/notice-bar.md (84%)
 rename docs/{examples-docs => markdown}/zh-CN/number-keyboard.md (80%)
 rename docs/{examples-docs => markdown}/zh-CN/panel.md (58%)
 rename docs/{examples-docs => markdown}/zh-CN/password-input.md (78%)
 rename docs/{examples-docs => markdown}/zh-CN/picker.md (53%)
 create mode 100644 docs/markdown/zh-CN/popup.md
 rename docs/{examples-docs => markdown}/zh-CN/progress.md (50%)
 rename docs/{examples-docs => markdown}/zh-CN/pull-refresh.md (61%)
 rename docs/{examples-docs => markdown}/zh-CN/quickstart.md (100%)
 rename docs/{examples-docs => markdown}/zh-CN/radio.md (50%)
 rename docs/{examples-docs => markdown}/zh-CN/search.md (76%)
 rename docs/{examples-docs => markdown}/zh-CN/sku.md (65%)
 rename docs/{examples-docs => markdown}/zh-CN/stepper.md (74%)
 rename docs/{examples-docs => markdown}/zh-CN/steps.md (60%)
 rename docs/{examples-docs => markdown}/zh-CN/submit-bar.md (62%)
 rename docs/{examples-docs => markdown}/zh-CN/swipe.md (57%)
 rename docs/{examples-docs => markdown}/zh-CN/switch-cell.md (79%)
 rename docs/{examples-docs => markdown}/zh-CN/switch.md (64%)
 create mode 100644 docs/markdown/zh-CN/tab.md
 rename docs/{examples-docs => markdown}/zh-CN/tabbar.md (76%)
 rename docs/{examples-docs => markdown}/zh-CN/tag.md (84%)
 rename docs/{examples-docs => markdown}/zh-CN/theme.md (100%)
 create mode 100644 docs/markdown/zh-CN/toast.md
 rename docs/{examples-docs => markdown}/zh-CN/tree-select.md (55%)
 rename docs/{examples-docs => markdown}/zh-CN/uploader.md (74%)
 rename docs/{examples-docs => markdown}/zh-CN/waterfall.md (67%)
 delete mode 100644 docs/src/components/demo.vue
 create mode 100644 packages/address-edit/theme.md
 create mode 100644 packages/locale/index.js
 create mode 100644 packages/locale/lang/en-US.js
 create mode 100644 packages/locale/lang/zh-CN.js
 rename packages/picker/{picker-column.vue => PickerColumn.vue} (100%)
 create mode 100644 packages/utils/camelize.js
 create mode 100644 packages/utils/deep-assign.js
 create mode 100644 packages/utils/get.js
 create mode 100644 test/unit/specs/deep-assign.spec.js

diff --git a/.github/CONTRIBUTING.zh-CN.md b/.github/CONTRIBUTING.zh-CN.md
index 6d481cdd78a..b10f3e3a0a6 100644
--- a/.github/CONTRIBUTING.zh-CN.md
+++ b/.github/CONTRIBUTING.zh-CN.md
@@ -30,7 +30,7 @@ npm run dev
 
 - 仓库的组件代码都位于 `packages` 下，每个组件一个文件夹
 - 所有的组件样式代码都位于 `packages/vant-css/src` 下，`vant-css` 也会在发布时单独发包
-- `docs/examples-docs` 目录下是文档网站的代码，根据语言划分为 zh-CN 和 en-US，本地开发时可以在根目录下运行 `npm run dev` 开启文档网站。
+- `docs/markdown` 目录下是文档网站的代码，根据语言划分为 zh-CN 和 en-US，本地开发时可以在根目录下运行 `npm run dev` 开启文档网站。
 
 项目目录大致如下：
 
@@ -58,7 +58,7 @@ vant
 
 - 添加文档
 
-新组件的文档编写，需要在 `docs/examples-docs` 下各个语言中新建对应同名文档 `button.md`，并在 `docs/src/doc.config.js` 中进行文档路径配置
+新组件的文档编写，需要在 `docs/markdown` 下各个语言中新建对应同名文档 `button.md`，在 `docs/demos` 下创建组件示例，并在 `docs/src/doc.config.js` 中进行配置组件名称
 
 - 添加测试代码
 
@@ -67,7 +67,7 @@ vant
 
 ## 组件文档如何编写
 
-`docs/examples-docs` 下根据语言划分了组件文档，每个组件需要在各语言中编辑对应的文档。组件文档采用 markdown 格式，内容包括使用示例以及 `API` 等。具体书写规范请参考 [组件文档书写规范](./MARKDOWN.md)。
+`docs/markdown` 下根据语言划分了组件文档，每个组件需要在各语言中编辑对应的文档。组件文档采用 markdown 格式，内容包括使用示例以及 `API` 等。具体书写规范请参考 [组件文档书写规范](./MARKDOWN.md)。
 
 #### API 说明
 
@@ -106,5 +106,5 @@ vant
 `z-index` 优先级（从高到低）：
 
 * 特殊组件：Toast 永远在最上面，[3000, +∞)
-* ‘用完就关’ 的组件：Dialog, Pop, Actionsheet, image-preview 等 [2000, 3000)
+* ‘用完就关’ 的组件：Dialog, Pop, Actionsheet, ImagePreview 等 [2000, 3000)
 * 其他：组件内部用来控制层次的 z-index 的区间 [-10, 10]，尽可能写小，一般1，2，3这种就够了。
diff --git a/.github/MARKDOWN.md b/.github/MARKDOWN.md
index 96ded0eb44b..ade817155cb 100644
--- a/.github/MARKDOWN.md
+++ b/.github/MARKDOWN.md
@@ -18,28 +18,24 @@
 
 #### 代码演示
 
-另起一个二级标题，正文可以是 markdown 和示例的混合。示例的结构如下:
-
-    // 在 demo 端之外放置的 script 会直接运行
-    // 在 script 中声明的 vue 变量，在 demo 中都可以直接使用
-    <script>
-      export default {
-        data() {
-          return {
-            size: 'large'
-          };
-        }
-      };
-    </script>
+另起一个二级标题，示例的结构如下:
+
+  ```javascript
+    export default {
+      data() {
+        return {
+          size: 'large'
+        };
+      }
+    };
+  ```
+
+  ```html
+    <van-button :size="size">
+      Large
+    </van-button>
+  ```
     
-    :::demo 基础用法（必须以:::demo开头，后面的描述可选，如果有的话控制在一两句话，不要过长）
-    ```html                             // :::demo后面必须接代码段，否则不会识别为示例
-      <van-button :size="size">         // 在内容区直接写 vue 中 template 段代码即可
-        Large
-      </van-button>
-    ```
-    :::                                 // 示例结束的标记，必须接在代码段之后，否则不会识别为示例
-
 代码演示的几个书写原则：
 
 - 从简单用法开始介绍，不要上来就同时使用一大堆 API，会让人觉得难以上手
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 27c7b9e96e4..9877586a093 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -1,28 +1,37 @@
-var Components = require('./get-components')();
-var fs = require('fs');
-var render = require('json-templater/string');
-var uppercamelcase = require('uppercamelcase');
-var path = require('path');
-
-var OUTPUT_PATH = path.join(__dirname, '../../packages/index.js');
-var IMPORT_TEMPLATE = 'import {{name}} from \'./{{package}}\';';
-var ISNTALL_COMPONENT_TEMPLATE = '  {{name}}';
-var MAIN_TEMPLATE = `{{include}}
-
-const version = '{{version}}';
+const Components = require('./get-components')();
+const fs = require('fs');
+const path = require('path');
+const uppercamelize = require('uppercamelcase');
+const version = process.env.VERSION || require('../../package.json').version;
+const tips = '// This file is auto gererated by build/bin/build-entry.js';
+
+function buildVantEntry() {
+  const uninstallComponents = [
+    'Lazyload',
+    'Waterfall',
+    'Dialog',
+    'Toast',
+    'ImagePreview',
+    'Locale'
+  ];
+
+  const importList = Components.map(name => `import ${uppercamelize(name)} from './${name}';`);
+  const exportList = Components.map(name => `${uppercamelize(name)}`);
+  const intallList = exportList.filter(name => !~uninstallComponents.indexOf(uppercamelize(name)));
+  const content = `${tips}
+${importList.join('\n')}
+
+const version = '${version}';
 const components = [
-{{components}}
+  ${intallList.join(',\n  ')}
 ];
 
-const install = function(Vue) {
-  if (install.installed) return;
-
+const install = Vue => {
   components.forEach(component => {
     Vue.component(component.name, component);
   });
 };
 
-/* istanbul ignore if */
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
@@ -30,54 +39,72 @@ if (typeof window !== 'undefined' && window.Vue) {
 export {
   install,
   version,
-{{list}}
+  ${exportList.join(',\n  ')}
 };
+
 export default {
   install,
   version
 };
 `;
 
-delete Components.font;
+  fs.writeFileSync(path.join(__dirname, '../../packages/index.js'), content);
+}
 
-var includeComponentTemplate = [];
-var installTemplate = [];
-var listTemplate = [];
+function buildDemoEntry() {
+  const dir = path.join(__dirname, '../../docs/demos/views');
+  const demos = fs.readdirSync(dir)
+    .filter(name => ~name.indexOf('.vue'))
+    .map(name => name.replace('.vue', ''))
+    .map(name => `'${name}': r => require.ensure([], () => r(wrapper(require('./views/${name}'), '${name}')), '${name}')`);
 
-Components.forEach(name => {
-  var componentName = uppercamelcase(name);
+  const content = `${tips}
+import './common';
 
-  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
-    name: componentName,
-    package: name
-  }));
+function wrapper(component, name) {
+  component = component.default;
+  component.name = 'demo-' + name;
+  return component;
+}
 
-  if ([
-    // directives
-    'Lazyload',
-    'Waterfall',
+export default {
+  ${demos.join(',\n  ')}
+};
+`;
+  fs.writeFileSync(path.join(dir, '../index.js'), content);
+}
 
-    // services
-    'Dialog',
-    'Toast',
-    'ImagePreview'
-  ].indexOf(componentName) === -1) {
-    installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
-      name: componentName,
-      component: name
-    }));
-  }
-
-  listTemplate.push(`  ${componentName}`);
-});
-
-var template = render(MAIN_TEMPLATE, {
-  include: includeComponentTemplate.join('\n'),
-  list: listTemplate.join(',\n'),
-  components: installTemplate.join(',\n') || ' ',
-  version: process.env.VERSION || require('../../package.json').version
-});
-
-fs.writeFileSync(OUTPUT_PATH, template);
-console.log('[build entry] DONE:' + OUTPUT_PATH);
+function buildDocsEntry() {
+  const dir = path.join(__dirname, '../../docs/markdown');
+  const cnDocs = fs.readdirSync(path.join(dir, 'zh-CN')).map(name => 'zh-CN/' + name);
+  const enDocs = fs.readdirSync(path.join(dir, 'en-US')).map(name => 'en-US/' + name);
+  const docs = [...cnDocs, ...enDocs]
+    .filter(name => name.indexOf('.md') !== -1)
+    .map(name => name.replace('.md', ''))
+    .map(name => `'${name}': wrapper(r => require.ensure([], () => r(require('./${name}.md')), '${name}'))`);
+
+  const content = `${tips}
+import progress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+function wrapper(component) {
+  return function(r) {
+    progress.start();
+    component(r).then(() => {
+      progress.done();
+    }).catch(() => {
+      progress.done();
+    });
+  };
+}
+
+export default {
+  ${docs.join(',\n  ')}
+};
+`;
+  fs.writeFileSync(path.join(dir, './index.js'), content);
+}
 
+buildVantEntry();
+buildDemoEntry();
+buildDocsEntry();
diff --git a/build/webpack.config.dev.js b/build/webpack.config.dev.js
index 1ecb1ab437c..9d344221b1c 100644
--- a/build/webpack.config.dev.js
+++ b/build/webpack.config.dev.js
@@ -6,20 +6,11 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
 const docConfig = require('../docs/src/doc.config');
-const { extractExample } = require('zan-doc/src/helper');
 const styleLoaders = [
   { loader: 'css-loader' },
   { loader: 'postcss-loader', options: { sourceMap: true } }
 ];
 
-// extract [components].vue from [components].md
-extractExample({
-  src: path.resolve(__dirname, '../docs/examples-docs'),
-  dist: path.resolve(__dirname, '../docs/examples-dist'),
-  nav: docConfig,
-  watch: !isProduction
-});
-
 module.exports = {
   entry: {
     vendor: ['packages'],
@@ -89,15 +80,7 @@ module.exports = {
         test: /\.md/,
         loader: 'vue-markdown-loader',
         options: {
-          preventExtract: true,
-          use: [[require('markdown-it-container'), 'demo']],
-          preprocess(MarkdownIt, source) {
-            const styleRegexp = /<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/i;
-            const scriptRegexp = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/i;
-            MarkdownIt.renderer.rules.table_open = () =>
-              '<table class="zan-doc-table">';
-            return source.replace(styleRegexp, '').replace(scriptRegexp, '');
-          }
+          preventExtract: true
         }
       },
       {
diff --git a/docs/demos/common.js b/docs/demos/common.js
new file mode 100644
index 00000000000..a3446c2a2e5
--- /dev/null
+++ b/docs/demos/common.js
@@ -0,0 +1,72 @@
+/**
+ * Demo Common Mixin && i18n
+ */
+
+import Vue from 'vue';
+import { Locale, Toast, Dialog } from 'packages';
+import { DemoBlock, DemoSection } from 'vant-doc';
+import camelize from 'packages/utils/camelize';
+
+const demoBaseMixin = {
+  beforeCreate() {
+    const { name, i18n } = this.$options;
+    if (name && i18n) {
+      const formattedI18n = {};
+      const camelizedName = camelize(name);
+      Object.keys(i18n).forEach(key => {
+        formattedI18n[key] = { [camelizedName]: i18n[key] };
+      });
+      Locale.add(formattedI18n);
+    }
+  }
+};
+
+window.Toast = Toast;
+window.Dialog = Dialog;
+Vue.mixin(Locale.i18n);
+Vue.mixin(demoBaseMixin);
+Vue.component('demo-block', DemoBlock);
+Vue.component('demo-section', DemoSection);
+
+Locale.add({
+  'zh-CN': {
+    red: '红色',
+    orange: '橙色',
+    yellow: '黄色',
+    tab: '标签',
+    tag: '标签',
+    desc: '描述信息',
+    back: '返回',
+    title: '标题',
+    status: '状态',
+    button: '按钮',
+    option: '选项',
+    search: '搜索',
+    content: '内容',
+    custom: '自定义',
+    loading: '加载状态',
+    disabled: '禁用状态',
+    basicUsage: '基础用法',
+    advancedUsage: '高级用法'
+  },
+  'en-US': {
+    red: 'Red',
+    orange: 'Orange',
+    yellow: 'Yellow',
+    tab: 'Tab',
+    tag: 'Tag',
+    desc: 'Description',
+    back: 'Back',
+    title: 'Title',
+    status: 'Status',
+    button: 'Button',
+    option: 'Option',
+    search: 'Search',
+    content: 'Content',
+    custom: 'Custom',
+    loading: 'Loading',
+    disabled: 'Disabled',
+    basicUsage: 'Basic Usage',
+    advancedUsage: 'Advanced Usage'
+  }
+});
diff --git a/docs/demos/index.js b/docs/demos/index.js
new file mode 100644
index 00000000000..c4fdad34567
--- /dev/null
+++ b/docs/demos/index.js
@@ -0,0 +1,57 @@
+// This file is auto gererated by build/bin/build-entry.js
+import './common';
+
+function wrapper(component, name) {
+  component = component.default;
+  component.name = 'demo-' + name;
+  return component;
+}
+
+export default {
+  'actionsheet': r => require.ensure([], () => r(wrapper(require('./views/actionsheet'), 'actionsheet')), 'actionsheet'),
+  'address-edit': r => require.ensure([], () => r(wrapper(require('./views/address-edit'), 'address-edit')), 'address-edit'),
+  'address-list': r => require.ensure([], () => r(wrapper(require('./views/address-list'), 'address-list')), 'address-list'),
+  'area': r => require.ensure([], () => r(wrapper(require('./views/area'), 'area')), 'area'),
+  'badge': r => require.ensure([], () => r(wrapper(require('./views/badge'), 'badge')), 'badge'),
+  'button': r => require.ensure([], () => r(wrapper(require('./views/button'), 'button')), 'button'),
+  'card': r => require.ensure([], () => r(wrapper(require('./views/card'), 'card')), 'card'),
+  'cell-swipe': r => require.ensure([], () => r(wrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe'),
+  'cell': r => require.ensure([], () => r(wrapper(require('./views/cell'), 'cell')), 'cell'),
+  'checkbox': r => require.ensure([], () => r(wrapper(require('./views/checkbox'), 'checkbox')), 'checkbox'),
+  'contact': r => require.ensure([], () => r(wrapper(require('./views/contact'), 'contact')), 'contact'),
+  'coupon': r => require.ensure([], () => r(wrapper(require('./views/coupon'), 'coupon')), 'coupon'),
+  'datetime-picker': r => require.ensure([], () => r(wrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker'),
+  'dialog': r => require.ensure([], () => r(wrapper(require('./views/dialog'), 'dialog')), 'dialog'),
+  'field': r => require.ensure([], () => r(wrapper(require('./views/field'), 'field')), 'field'),
+  'goods-action': r => require.ensure([], () => r(wrapper(require('./views/goods-action'), 'goods-action')), 'goods-action'),
+  'icon': r => require.ensure([], () => r(wrapper(require('./views/icon'), 'icon')), 'icon'),
+  'image-preview': r => require.ensure([], () => r(wrapper(require('./views/image-preview'), 'image-preview')), 'image-preview'),
+  'layout': r => require.ensure([], () => r(wrapper(require('./views/layout'), 'layout')), 'layout'),
+  'lazyload': r => require.ensure([], () => r(wrapper(require('./views/lazyload'), 'lazyload')), 'lazyload'),
+  'loading': r => require.ensure([], () => r(wrapper(require('./views/loading'), 'loading')), 'loading'),
+  'nav-bar': r => require.ensure([], () => r(wrapper(require('./views/nav-bar'), 'nav-bar')), 'nav-bar'),
+  'notice-bar': r => require.ensure([], () => r(wrapper(require('./views/notice-bar'), 'notice-bar')), 'notice-bar'),
+  'number-keyboard': r => require.ensure([], () => r(wrapper(require('./views/number-keyboard'), 'number-keyboard')), 'number-keyboard'),
+  'panel': r => require.ensure([], () => r(wrapper(require('./views/panel'), 'panel')), 'panel'),
+  'password-input': r => require.ensure([], () => r(wrapper(require('./views/password-input'), 'password-input')), 'password-input'),
+  'picker': r => require.ensure([], () => r(wrapper(require('./views/picker'), 'picker')), 'picker'),
+  'popup': r => require.ensure([], () => r(wrapper(require('./views/popup'), 'popup')), 'popup'),
+  'progress': r => require.ensure([], () => r(wrapper(require('./views/progress'), 'progress')), 'progress'),
+  'pull-refresh': r => require.ensure([], () => r(wrapper(require('./views/pull-refresh'), 'pull-refresh')), 'pull-refresh'),
+  'radio': r => require.ensure([], () => r(wrapper(require('./views/radio'), 'radio')), 'radio'),
+  'search': r => require.ensure([], () => r(wrapper(require('./views/search'), 'search')), 'search'),
+  'sku': r => require.ensure([], () => r(wrapper(require('./views/sku'), 'sku')), 'sku'),
+  'stepper': r => require.ensure([], () => r(wrapper(require('./views/stepper'), 'stepper')), 'stepper'),
+  'steps': r => require.ensure([], () => r(wrapper(require('./views/steps'), 'steps')), 'steps'),
+  'submit-bar': r => require.ensure([], () => r(wrapper(require('./views/submit-bar'), 'submit-bar')), 'submit-bar'),
+  'swipe': r => require.ensure([], () => r(wrapper(require('./views/swipe'), 'swipe')), 'swipe'),
+  'switch-cell': r => require.ensure([], () => r(wrapper(require('./views/switch-cell'), 'switch-cell')), 'switch-cell'),
+  'switch': r => require.ensure([], () => r(wrapper(require('./views/switch'), 'switch')), 'switch'),
+  'tab': r => require.ensure([], () => r(wrapper(require('./views/tab'), 'tab')), 'tab'),
+  'tabbar': r => require.ensure([], () => r(wrapper(require('./views/tabbar'), 'tabbar')), 'tabbar'),
+  'tag': r => require.ensure([], () => r(wrapper(require('./views/tag'), 'tag')), 'tag'),
+  'toast': r => require.ensure([], () => r(wrapper(require('./views/toast'), 'toast')), 'toast'),
+  'tree-select': r => require.ensure([], () => r(wrapper(require('./views/tree-select'), 'tree-select')), 'tree-select'),
+  'uploader': r => require.ensure([], () => r(wrapper(require('./views/uploader'), 'uploader')), 'uploader'),
+  'waterfall': r => require.ensure([], () => r(wrapper(require('./views/waterfall'), 'waterfall')), 'waterfall')
+};
diff --git a/docs/mock/area.json b/docs/demos/mock/area.json
similarity index 100%
rename from docs/mock/area.json
rename to docs/demos/mock/area.json
diff --git a/docs/mock/sku.js b/docs/demos/mock/sku.js
similarity index 100%
rename from docs/mock/sku.js
rename to docs/demos/mock/sku.js
diff --git a/docs/demos/views/actionsheet.vue b/docs/demos/views/actionsheet.vue
new file mode 100644
index 00000000000..46e9aabf408
--- /dev/null
+++ b/docs/demos/views/actionsheet.vue
@@ -0,0 +1,81 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
+      <van-actionsheet v-model="show1" :actions="actions" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-button @click="show2 = true">{{ $t('button2') }}</van-button>
+      <van-actionsheet v-model="show2" :actions="actions" :cancelText="$t('cancel')" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-button @click="show3 = true">{{ $t('button3') }}</van-button>
+      <van-actionsheet v-model="show3" :title="$t('title')">
+        <p>{{ $t('content') }}</p>
+      </van-actionsheet>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      button1: '弹出 Actionsheet',
+      button2: '弹出带取消按钮的 Actionsheet',
+      button3: '弹出带标题的 Actionsheet',
+      title2: '带取消按钮的 Actionsheet',
+      title3: '带标题的 Actionsheet'
+    },
+    'en-US': {
+      button1: 'Show Actionsheet',
+      button2: 'Show Actionsheet with cancel button',
+      button3: 'Show Actionsheet with title',
+      title2: 'Actionsheet with cancel button',
+      title3: 'Actionsheet with title'
+    }
+  },
+
+  data() {
+    return {
+      show1: false,
+      show2: false,
+      show3: false
+    };
+  },
+
+  computed: {
+    actions() {
+      return [
+        { name: this.$t('option'), callback: this.onClick },
+        { name: this.$t('option') },
+        { name: this.$t('option'), loading: true }
+      ];
+    }
+  },
+
+  methods: {
+    onClick(item) {
+      Toast(item.name);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-actionsheet {
+  .actionsheet-wx {
+    color: #06bf04;
+  }
+
+  .van-button {
+    margin-left: 15px;
+  }
+
+  p {
+    padding: 20px;
+  }
+}
+</style>
diff --git a/docs/demos/views/address-edit.vue b/docs/demos/views/address-edit.vue
new file mode 100644
index 00000000000..0e2e9e55c72
--- /dev/null
+++ b/docs/demos/views/address-edit.vue
@@ -0,0 +1,69 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-address-edit
+        :areaList="areaList"
+        :showPostal="true"
+        :showSetDefault="true"
+        :showSearchResult="true"
+        :searchResult="searchResult"
+        @save="onSave"
+        @delete="onDelete"
+        @change-detail="onChangeDetail"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import areaList from '../mock/area.json';
+
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      areaList,
+      searchResult: []
+    };
+  },
+
+  methods: {
+    onSave() {
+      Toast('save');
+    },
+
+    onDelete() {
+      Toast('delete');
+    },
+
+    onChangeDetail(val) {
+      if (val) {
+        this.searchResult = [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }, {
+          name: '黄龙万科中心H座'
+        }, {
+          name: '黄龙万科中心H座',
+          address: '杭州市西湖区'
+        }];
+      } else {
+        this.searchResult = [];
+      }
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+
+</style>
diff --git a/docs/demos/views/address-list.vue b/docs/demos/views/address-list.vue
new file mode 100644
index 00000000000..c6d56deb5e8
--- /dev/null
+++ b/docs/demos/views/address-list.vue
@@ -0,0 +1,60 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-address-list
+        v-model="chosenAddressId"
+        :list="list"
+        @add="onAdd"
+        @edit="onEdit"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      chosenAddressId: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+          address: '浙江省杭州市拱墅区莫干山路 50 号'
+        },
+        {
+          id: '3',
+          name: '王五',
+          tel: '1320000000',
+          address: '浙江省杭州市滨江区江南大道 15 号'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    onAdd() {
+      Toast('新增收货地址');
+    },
+    onEdit(item, index) {
+      Toast('编辑收货地址:' + index);
+    }
+  }
+};
+</script>
diff --git a/docs/demos/views/area.vue b/docs/demos/views/area.vue
new file mode 100644
index 00000000000..35bd296d96d
--- /dev/null
+++ b/docs/demos/views/area.vue
@@ -0,0 +1,38 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-area :areaList="areaList" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-area :areaList="areaList" value="110101" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-area :areaList="areaList" :columnsNum="2" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import AreaList from '../mock/area.json';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '选中省市县',
+      title3: '配置显示列'
+    },
+    'en-US': {
+      title2: 'Initial Value',
+      title3: 'Columns Number'
+    }
+  },
+
+  data() {
+    return {
+      areaList: AreaList
+    };
+  }
+};
+</script>
diff --git a/docs/demos/views/badge.vue b/docs/demos/views/badge.vue
new file mode 100644
index 00000000000..308c35e1a67
--- /dev/null
+++ b/docs/demos/views/badge.vue
@@ -0,0 +1,54 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-badge-group :activeKey="activeKey">
+        <van-badge :title="$t('title')" @click="onClick"></van-badge>
+        <van-badge :title="$t('title')" @click="onClick" info="8"></van-badge>
+        <van-badge :title="$t('title')" @click="onClick" info="99"></van-badge>
+        <van-badge :title="$t('title')" @click="onClick" info="199"></van-badge>
+      </van-badge-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title: '标签名称'
+    }
+  },
+
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+
+  methods: {
+    onClick(key) {
+      this.activeKey = key;
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-badge {
+  .van-badge-group {
+    width: auto;
+    margin: 0 15px;
+    padding: 20px 0;
+    background-color: #fff;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .van-badge {
+    width: 85px;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/docs/demos/views/button.vue b/docs/demos/views/button.vue
new file mode 100644
index 00000000000..7705533396b
--- /dev/null
+++ b/docs/demos/views/button.vue
@@ -0,0 +1,92 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('title1')">
+      <van-button type="default">Default</van-button>
+      <van-button type="primary">Primary</van-button>
+      <van-button type="danger">Danger</van-button>
+    </demo-block>
+    
+    <demo-block :title="$t('title2')">
+      <van-button size="large">Large</van-button>
+      <van-button size="normal">Normal</van-button>
+      <van-button size="small">Small</van-button>
+      <van-button size="mini">Mini</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-button disabled>Diabled</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-button loading></van-button>
+      <van-button loading type="primary"></van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-button tag="a" href="https://www.youzan.com" target="_blank">
+        {{ $t('button') }}
+      </van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title5')">
+      <van-button type="primary" bottomAction>{{ $t('button') }}</van-button>
+
+      <van-row>
+        <van-col span="12">
+          <van-button bottomAction>{{ $t('button') }}</van-button>
+        </van-col>
+        <van-col span="12">
+          <van-button type="primary" bottomAction>{{ $t('button') }}</van-button>
+        </van-col>
+      </van-row>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title1: '按钮类型',
+      title2: '按钮尺寸',
+      title3: '加载状态',
+      title4: '自定义按钮标签',
+      title5: '页面底部操作按钮'
+    },
+    'en-US': {
+      title1: 'Type',
+      title2: 'Size',
+      title3: 'Loading',
+      title4: 'Custom Tag',
+      title5: 'Action Button'
+    }
+  }
+}
+</script>
+
+
+<style lang="postcss">
+.demo-button {
+  .van-button {
+    user-select: none;
+
+    &--large,
+    &--bottom-action {
+      margin-bottom: 15px;
+    }
+
+    &--small,
+    &--normal {
+      margin-right: 10px;
+    }
+  }
+
+  .van-doc-demo-block {
+    padding: 0 15px;
+  }
+
+  .van-doc-demo-block__title {
+    padding-left: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/card.vue b/docs/demos/views/card.vue
new file mode 100644
index 00000000000..09892340ce5
--- /dev/null
+++ b/docs/demos/views/card.vue
@@ -0,0 +1,38 @@
+<template>
+  <demo-section background="#fff">
+    <demo-block :title="$t('basicUsage')">
+      <van-card
+        :title="$t('title')"
+        :desc="$t('desc')"
+        num="2"
+        price="2.00"
+        :thumb="imageURL"
+      />
+    </demo-block> 
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-card
+        :title="$t('title')"
+        :desc="$t('desc')"
+        num="2"
+        price="2.00"
+        :thumb="imageURL"
+      >
+        <div slot="footer">
+          <van-button size="mini">{{ $t('button') }}</van-button>
+          <van-button size="mini">{{ $t('button') }}</van-button>
+        </div>
+      </van-card>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
+    }
+  }
+}
+</script>
diff --git a/docs/demos/views/cell-swipe.vue b/docs/demos/views/cell-swipe.vue
new file mode 100644
index 00000000000..c12a759ef8c
--- /dev/null
+++ b/docs/demos/views/cell-swipe.vue
@@ -0,0 +1,51 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-cell-swipe :right-width="65" :left-width="65">
+        <span slot="left">{{ $t('button1') }}</span>
+        <van-cell-group>
+          <van-cell :title="$t('title')" :value="$t('content')"></van-cell>
+        </van-cell-group>
+        <span slot="right">{{ $t('button2') }}</span>
+      </van-cell-swipe>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      button1: '选择',
+      button2: '删除',
+      title: '单元格'
+    },
+    'en-US': {
+      button1: 'Select',
+      button2: 'Delete',
+      title: 'Cell'
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-cell-swipe {
+  .van-cell-swipe__left,
+  .van-cell-swipe__right {
+      color: #FFFFFF;
+      font-size: 16px;
+      width: 65px;
+      height: 44px;
+      display: inline-block;
+      text-align: center;
+      line-height: 44px;
+  }
+  .van-cell-swipe__left {
+    background-color: #FF4444;  
+  }
+  .van-cell-swipe__right {
+    background-color: #84c483;
+  }
+}
+</style>
diff --git a/docs/demos/views/cell.vue b/docs/demos/views/cell.vue
new file mode 100644
index 00000000000..8e4a3c9b893
--- /dev/null
+++ b/docs/demos/views/cell.vue
@@ -0,0 +1,86 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-cell-group>
+        <van-cell :title="$t('cell')" :value="$t('content')" />
+        <van-cell :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-cell-group>
+        <van-cell :value="$t('content')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-cell-group>
+        <van-cell :title="$t('cell')" icon="location" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-cell-group>
+        <van-cell :title="$t('cell')" is-link />
+        <van-cell :title="$t('cell')" is-link :value="$t('content')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-cell-group>
+        <van-cell :value="$t('content')" icon="shop" is-link>
+          <template slot="title">
+            <span class="van-cell-text">{{ $t('cell') }}</span>
+            <van-tag type="danger">{{ $t('tag') }}</van-tag>
+          </template>
+        </van-cell>
+        <van-cell :title="$t('cell')" icon="location" is-link />
+        <van-cell :title="$t('cell')">
+          <template slot="right-icon">
+            <van-icon name="search" class="van-cell__right-icon"></van-icon>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </demo-block>
+  </demo-section>  
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      cell: '单元格',
+      title2: '只设置 value',
+      title3: '展示图标',
+      title4: '展示箭头'
+    },
+    'en-US': {
+      cell: 'Cell title',
+      title2: 'Value only',
+      title3: 'Left Icon',
+      title4: 'Link'
+    }
+  },
+
+  methods: {
+    handleClick() {
+      console.log('cell click');
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-cell {
+  .van-cell-text {
+    margin-right: 5px;
+  }
+  .van-cell__right-icon {
+    font-size: 16px;
+  }
+  .van-cell-text,
+  .van-tag--danger {
+    vertical-align: middle;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/checkbox.vue b/docs/demos/views/checkbox.vue
new file mode 100644
index 00000000000..8ad87952af3
--- /dev/null
+++ b/docs/demos/views/checkbox.vue
@@ -0,0 +1,77 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-checkbox v-model="checkbox1">{{ $t('checkbox') }} 1</van-checkbox>
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-checkbox v-model="checkbox2" disabled>{{ $t('checkbox') }} 2</van-checkbox>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-checkbox-group v-model="result">
+        <van-checkbox
+          v-for="(item, index) in list"
+          :key="index"
+          :name="item"
+        >
+          {{ $t('checkbox') }} {{ item }}
+        </van-checkbox>
+      </van-checkbox-group>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-checkbox-group v-model="result">
+        <van-cell-group>
+          <van-cell v-for="(item, index) in list" :key="index">
+            <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
+          </van-cell>
+        </van-cell-group>
+      </van-checkbox-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      checkbox: '复选框',
+      title3: 'Checkbox 组',
+      title4: '与 Cell 组件一起使用'
+    },
+    'en-US': {
+      checkbox: 'Checkbox',
+      title3: 'Checkbox Group',
+      title4: 'Inside a Cell'
+    }
+  },
+
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-checkbox {
+  .van-checkbox {
+    margin: 10px 0 0 20px;
+  }
+
+  .van-cell {
+    .van-checkbox {
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/docs/demos/views/contact.vue b/docs/demos/views/contact.vue
new file mode 100644
index 00000000000..0c17b6a0da2
--- /dev/null
+++ b/docs/demos/views/contact.vue
@@ -0,0 +1,116 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-contact-card
+        :type="cardType"
+        :name="currentContact.name"
+        :tel="currentContact.tel"
+        @click="showList = true"
+      />
+
+      <van-popup v-model="showList" position="bottom">
+        <van-contact-list
+          v-model="chosenContactId"
+          :list="list"
+          @add="onAdd"
+          @edit="onEdit"
+          @select="onSelect"
+        />
+      </van-popup>
+
+      <van-popup v-model="showEdit" position="bottom">
+        <van-contact-edit
+          :contactInfo="editingContact"
+          :isEdit="isEdit"
+          @save="onSave"
+          @delete="onDelete"
+        />
+      </van-popup>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      chosenContactId: null,
+      editingContact: {},
+      showList: false,
+      showEdit: false,
+      isEdit: false,
+      list: [{
+        name: '张三',
+        tel: '13000000000',
+        id: 0
+      }]
+    };
+  },
+
+  computed: {
+    cardType() {
+      return this.chosenContactId !== null ? 'edit' : 'add';
+    },
+
+    currentContact() {
+      const id = this.chosenContactId;
+      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
+    }
+  },
+
+  methods: {
+    onAdd() {
+      this.editingContact = { id: this.list.length };
+      this.isEdit = false;
+      this.showEdit = true;
+    },
+
+    onEdit(item) {
+      this.isEdit = true;
+      this.showEdit = true;
+      this.editingContact = item;
+    },
+
+    onSelect() {
+      this.showList = false;
+    },
+
+    onSave(info) {
+      this.showEdit = false;
+      this.showList = false;
+
+      if (this.isEdit) {
+        this.list = this.list.map(item => item.id === info.id ? info : item);
+      } else {
+        this.list.push(info);
+      }
+      this.chosenContactId = info.id;
+    },
+
+    onDelete(info) {
+      this.showEdit = false;
+      this.list = this.list.filter(item => item.id !== info.id);
+      if (this.chosenContactId === info.id) {
+        this.chosenContactId = null;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-contact {
+  .van-popup {
+    height: 100%;
+  }
+}
+</style>
diff --git a/docs/demos/views/coupon.vue b/docs/demos/views/coupon.vue
new file mode 100644
index 00000000000..698d06e4a5d
--- /dev/null
+++ b/docs/demos/views/coupon.vue
@@ -0,0 +1,96 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-coupon-cell
+        :coupons="coupons"
+        :chosenCoupon="chosenCoupon"
+        @click="showList = true"
+      />
+
+      <van-popup v-model="showList" position="bottom">
+        <van-coupon-list
+          :coupons="coupons"
+          :chosenCoupon="chosenCoupon"
+          :disabledCoupons="disabledCoupons"
+          @change="onChange"
+          @exchange="onExchange"
+        />
+      </van-popup>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+const coupon = {
+  available: 1,
+  discount: 0,
+  denominations: 150,
+  origin_condition: 0,
+  reason: '',
+  value: 150,
+  condition: '下单立减 1.50 元',
+  name: '新手专用优惠券',
+  start_at: 1489104000,
+  end_at: 1514592000
+};
+
+const discountCoupon = {
+  ...coupon,
+  discount: 88,
+  denominations: 0,
+  origin_condition: 50,
+  value: 12,
+  condition: '下单即享 8.8 折'
+};
+
+const disabledCoupon = {
+  ...coupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+const disabledDiscountCoupon = {
+  ...discountCoupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      showList: false,
+      chosenCoupon: -1,
+      coupons: [coupon, discountCoupon],
+      disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+    };
+  },
+
+  methods: {
+    onChange(index) {
+      this.showList = false;      
+      this.chosenCoupon = index;
+    },
+    onExchange(code) {
+      Toast('兑换成功');
+      this.coupons.push(coupon);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-coupon {
+  .van-popup {
+    height: 100%;
+  }
+}
+</style>
diff --git a/docs/demos/views/datetime-picker.vue b/docs/demos/views/datetime-picker.vue
new file mode 100644
index 00000000000..8cbe3b61f6e
--- /dev/null
+++ b/docs/demos/views/datetime-picker.vue
@@ -0,0 +1,61 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-datetime-picker
+        v-model="currentDate1"
+        type="datetime"
+        :minHour="minHour"
+        :maxHour="maxHour"
+        :minDate="minDate"
+        :maxDate="maxDate"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-datetime-picker
+        v-model="currentDate2"
+        type="date"
+        :minHour="minHour"
+        :maxHour="maxHour"
+        :minDate="minDate"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-datetime-picker
+        v-model="currentDate3"
+        type="time"
+        :minHour="minHour"
+        :maxHour="maxHour"
+        :minDate="minDate"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '选择日期',
+      title3: '选择时间'
+    },
+    'en-US': {
+      title2: 'Date Picker',
+      title3: 'Time Picker'
+    }
+  },
+
+  data() {
+    return {
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date(),
+      maxDate: new Date(2019, 10, 1),
+      currentDate1: new Date(2018, 0, 1),
+      currentDate2: null,
+      currentDate3: null
+    };
+  }
+};
+</script>
diff --git a/docs/demos/views/dialog.vue b/docs/demos/views/dialog.vue
new file mode 100644
index 00000000000..2f16fafe0ea
--- /dev/null
+++ b/docs/demos/views/dialog.vue
@@ -0,0 +1,60 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('title1')">
+      <van-button @click="onClickAlert">Alert</van-button>
+      <van-button @click="onClickAlert2">{{ $t('alert2') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-button @click="onClickConfirm">Confirm</van-button>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title1: '消息提示',
+      title2: '消息确认',
+      alert2: '无标题 Alert'
+    },
+    'en-US': {
+      title1: 'Alert dialog',
+      title2: 'Confirm dialog',
+      alert2: 'Alert without title'
+    }
+  },
+
+  methods: {
+    onClickAlert() {
+      Dialog.alert({
+        title: this.$t('title'),
+        message: this.$t('content')
+      });
+    },
+
+    onClickAlert2() {
+      Dialog.alert({
+        message: this.$t('content')
+      });
+    },
+
+    onClickConfirm() {
+      Dialog.confirm({
+        title: this.$t('title'),
+        message: this.$t('content')
+      })
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-dialog {
+  .van-button {
+    margin: 15px;
+  }
+}
+</style>
diff --git a/docs/demos/views/field.vue b/docs/demos/views/field.vue
new file mode 100644
index 00000000000..f0c78ea4627
--- /dev/null
+++ b/docs/demos/views/field.vue
@@ -0,0 +1,105 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-cell-group>
+        <van-field v-model="value" :placeholder="$t('usernamePlaceholder')"></van-field>
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-cell-group>
+        <van-field
+          v-model="username"
+          :label="$t('username')"
+          icon="clear"
+          :placeholder="$t('usernamePlaceholder')"
+          required
+          @clickIcon="username = ''"
+        >
+        </van-field>
+
+        <van-field
+          v-model="password"
+          type="password"
+          :label="$t('password')"
+          :placeholder="$t('passwordPlaceholder')"
+          required>
+        </van-field>
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-cell-group>
+        <van-field :value="$t('inputDisabled')" :label="$t('username')" disabled></van-field>
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-cell-group>
+        <van-field :label="$t('username')" :placeholder="$t('usernamePlaceholder')" error></van-field>
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('title5')">
+      <van-cell-group>
+        <van-field
+          v-model="message"
+          :label="$t('message')"
+          type="textarea"
+          :placeholder="$t('messagePlaceholder')"
+          rows="1"
+          autosize
+        >
+        </van-field>
+      </van-cell-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '自定义类型',
+      title3: '禁用输入框',
+      title4: '错误提示',
+      title5: '高度自适应',
+      username: '用户名',
+      password: '密码',
+      message: '留言',
+      usernamePlaceholder: '请输入用户名',
+      passwordPlaceholder: '请输入密码',
+      messagePlaceholder: '请输入留言',
+      inputDisabled: '输入框已禁用'
+    },
+    'en-US': {
+      title2: 'Custom type',
+      title3: 'Disabled',
+      title4: 'Error info',
+      title5: 'Auto resize',
+      username: 'Username',
+      password: 'Password',
+      message: 'Message',
+      usernamePlaceholder: 'Username',
+      passwordPlaceholder: 'Password',
+      messagePlaceholder: 'Message',
+      inputDisabled: 'Disabled'
+    }
+  },
+
+  data() {
+    return {
+      value: '',
+      password: '',
+      username: '',
+      message: ''
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-field {
+  padding-bottom: 30px;
+}
+</style>
diff --git a/docs/demos/views/goods-action.vue b/docs/demos/views/goods-action.vue
new file mode 100644
index 00000000000..c8a35efd377
--- /dev/null
+++ b/docs/demos/views/goods-action.vue
@@ -0,0 +1,52 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-goods-action>
+        <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
+          客服
+        </van-goods-action-mini-btn>
+        <van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
+          购物车
+        </van-goods-action-mini-btn>
+        <van-goods-action-big-btn @click="onClickBigBtn">
+          加入购物车
+        </van-goods-action-big-btn>
+        <van-goods-action-big-btn @click="onClickBigBtn" primary>
+          立即购买
+        </van-goods-action-big-btn>
+      </van-goods-action>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  methods: {
+    onClickMiniBtn() {
+      Toast('点击图标');
+    },
+
+    onClickBigBtn() {
+      Toast('点击按钮');
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-goods-action {
+  .van-goods-action {
+    position: relative;
+  }
+}
+</style>
diff --git a/docs/examples-docs/en-US/icon.md b/docs/demos/views/icon.vue
similarity index 57%
rename from docs/examples-docs/en-US/icon.md
rename to docs/demos/views/icon.vue
index de385509371..77e460683f3 100644
--- a/docs/examples-docs/en-US/icon.md
+++ b/docs/demos/views/icon.vue
@@ -1,6 +1,15 @@
-<script>
-import Vue from 'vue';
+<template>
+  <demo-section>
+    <demo-block :title="$t('title')">
+      <van-col span="8" v-for="icon in icons" :key="icon">
+        <van-icon :name="icon"></van-icon>
+        <span>{{ icon }}</span>
+      </van-col>
+    </demo-block>
+  </demo-section>
+</template>
 
+<script>
 const icons = [
   'close',
   'location',
@@ -86,56 +95,43 @@ const icons = [
   'phone'
 ];
 
-const IconListConstructor = Vue.extend({
-  render(h) {
-    return (
-      <div>
-        {icons.map(icon => (
-          <van-col span="8">
-            <van-icon name={icon}></van-icon>
-            <span>{icon}</span>
-          </van-col>
-        ))}
-      </div>
-    )
-  }
-});
-
 export default {
-  mounted() {
-    const IconList = new IconListConstructor({
-      el: document.createElement('div')  
-    });
-    const block = document.querySelector('.zan-doc-demo-block');
-    if (block) {
-      block.appendChild(IconList.$el);
+  i18n: {
+    'zh-CN': {
+      title: '图标列表'
+    },
+    'en-US': {
+      title: 'Icon List'
     }
+  },
+
+  data() {
+    this.icons = icons;
+    return {};
   }
-};
+}
 </script>
 
-## Icon
-
-### Install
-``` javascript
-import { Icon } from 'vant';
+<style lang="postcss">
+.demo-icon {
+  font-size: 0;
 
-Vue.component(Icon.name, Icon);
-```
-
-### Usage
-
-#### Basic Usage
-View all usable icons on the right.
-
-:::demo Icon List
-```html
-<van-icon name="success" />
-```
-:::
+  .van-col {
+    text-align: center;
+    height: 100px;
+    float: none;
+    display: inline-block;
+  }
 
-### API
+  .van-icon {
+    display: block;
+    font-size: 32px;
+    margin: 15px 0;
+    color: rgba(69, 90, 100, .8);
+  }
 
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| name | Icon name | `String` | `''` | - |
+  span {
+    font-size: 14px;
+  }
+} 
+</style>
diff --git a/docs/demos/views/image-preview.vue b/docs/demos/views/image-preview.vue
new file mode 100644
index 00000000000..7e81eed84e3
--- /dev/null
+++ b/docs/demos/views/image-preview.vue
@@ -0,0 +1,51 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button @click="showImagePreview">{{ $t('button1') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('button2')">
+      <van-button @click="showImagePreview(1)">{{ $t('button2') }}</van-button>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import { ImagePreview } from 'packages';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      button1: '预览图片',
+      button2: '指定初始位置'
+    },
+    'en-US': {
+      button1: 'Show Images',
+      button2: 'Custom Start Position'
+    }
+  },
+
+  methods: {
+    showImagePreview(position) {
+      ImagePreview([
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+      ], typeof position === 'number' ? position : 0);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-image-preview {
+  .van-button {
+    margin-left: 15px;
+  }
+}
+.van-image-preview {
+  img {
+    pointer-events: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/layout.vue b/docs/demos/views/layout.vue
new file mode 100644
index 00000000000..ad45033744b
--- /dev/null
+++ b/docs/demos/views/layout.vue
@@ -0,0 +1,65 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-row>
+        <van-col span="8">span: 8</van-col>
+        <van-col span="8">span: 8</van-col>
+        <van-col span="8">span: 8</van-col>
+      </van-row>
+
+      <van-row>
+        <van-col span="4">span: 4</van-col>
+        <van-col span="10" offset="4">offset: 4, span: 10</van-col>
+      </van-row>
+
+      <van-row>
+        <van-col offset="12" span="12">offset: 12, span: 12</van-col>
+      </van-row>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-row gutter="20">
+        <van-col span="8">span: 8</van-col>
+        <van-col span="8">span: 8</van-col>
+        <van-col span="8">span: 8</van-col>
+      </van-row>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '在列元素之间增加间距'
+    },
+    'en-US': {
+      title2: 'Column Spacing'
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-layout {
+  .van-row {
+    padding: 0 15px;
+  }
+  .van-col {
+    color: #fff;
+    font-size: 13px;
+    line-height: 30px;
+    text-align: center;
+    margin-bottom: 10px;
+    background-clip: content-box;
+
+    &:nth-child(odd) {
+      background-color: #39a9ed;
+    }
+
+    &:nth-child(even) {
+      background-color: #66c6f2;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/lazyload.vue b/docs/demos/views/lazyload.vue
new file mode 100644
index 00000000000..9a8a96fb7c1
--- /dev/null
+++ b/docs/demos/views/lazyload.vue
@@ -0,0 +1,82 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <img v-for="img in imageList" v-lazy="img" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <div v-for="img in backgroundImageList" v-lazy:background-image="img" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <lazy-component>
+        <img v-for="img in componentImageList" v-lazy="img" />
+      </lazy-component>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '背景图懒加载',
+      title3: '懒加载模块'
+    },
+    'en-US': {
+      title2: 'Lazyload Background Image',
+      title3: 'Lazyload Component'
+    }
+  },
+
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
+      ],
+      backgroundImageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
+      ],
+      componentImageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
+      ]
+    };
+  },
+
+  methods: {
+    handleComponentShow() {
+      console.log('component show');
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-lazyload {
+  padding: 0 15px;
+
+  img,
+  div[lazy] {
+    padding: 15px;
+    width: 100%;
+    height: 250px;
+    margin: 10px 0 0;
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    background-size: 315px 250px;
+    background-position: 15px;
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+  }
+
+  .van-doc-demo-block__title,
+  .van-doc-demo-section__title {
+    padding-left: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/loading.vue b/docs/demos/views/loading.vue
new file mode 100644
index 00000000000..2ce588f235d
--- /dev/null
+++ b/docs/demos/views/loading.vue
@@ -0,0 +1,44 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('title1')">
+      <van-loading type="circle" color="black" />
+      <van-loading type="circle" color="white" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-loading type="gradient-circle" color="black" />
+      <van-loading type="gradient-circle" color="white" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-loading type="spinner" color="black" />
+      <van-loading type="spinner" color="white" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title1: '单色圆环',
+      title2: '渐变色圆环',
+      title3: 'Spinner'
+    },
+    'en-US': {
+      title1: 'Solid Circle',
+      title2: 'Gradient Circle',
+      title3: 'Spinner'
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-loading {
+  .van-loading {
+    display: inline-block;
+    margin: 10px 0 10px 20px;
+  }
+}
+</style>
diff --git a/docs/demos/views/nav-bar.vue b/docs/demos/views/nav-bar.vue
new file mode 100644
index 00000000000..adc2f58f5ff
--- /dev/null
+++ b/docs/demos/views/nav-bar.vue
@@ -0,0 +1,18 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-nav-bar
+        :title="$t('title')"
+        :leftText="$t('back')"
+        :rightText="$t('button')"
+        leftArrow
+      />
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-nav-bar :title="$t('title')" :leftText="$t('back')" leftArrow>
+        <van-icon name="search" slot="right" />
+      </van-nav-bar>
+    </demo-block>
+  </demo-section>
+</template>
diff --git a/docs/demos/views/notice-bar.vue b/docs/demos/views/notice-bar.vue
new file mode 100644
index 00000000000..e37e3da34e0
--- /dev/null
+++ b/docs/demos/views/notice-bar.vue
@@ -0,0 +1,44 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-notice-bar
+        :text="$t('text')"
+        leftIcon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-notice-bar :scrollable="false" :text="$t('text')" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-notice-bar mode="closeable" :text="$t('text')" />
+      <van-notice-bar mode="link" :text="$t('text')" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '禁用滚动',
+      title3: '通告栏模式',
+      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
+    },
+    'en-US': {
+      title2: 'Disable scroll',
+      title3: 'Mode',
+      text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.'
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-notice-bar {
+  .van-notice-bar:not(:first-of-type) {
+    margin-top: 15px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/number-keyboard.vue b/docs/demos/views/number-keyboard.vue
new file mode 100644
index 00000000000..ed050986978
--- /dev/null
+++ b/docs/demos/views/number-keyboard.vue
@@ -0,0 +1,59 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button @touchstart.native.stop="showKeyboard = true">
+        {{ $t('button1') }}
+      </van-button>
+
+      <van-button @touchstart.native.stop="showKeyboard = false">
+        {{ $t('button2') }}
+      </van-button>
+
+      <van-number-keyboard
+        :show="showKeyboard"
+        @blur="showKeyboard = false"
+        @input="onInput"
+        @delete="onDelete"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      button1: '弹出键盘',
+      button2: '收起键盘'
+    },
+    'en-US': {
+      button1: 'Show Keyboard',
+      button2: 'Hide Keyboard'
+    }
+  },
+
+  data() {
+    return {
+      showKeyboard: true
+    };
+  },
+
+  methods: {
+    onInput(value) {
+      Toast('Input: ' + value);
+    },
+    onDelete() {
+      Toast('Delete');
+    }
+  }
+}
+</script>
+
+
+<style lang="postcss">
+.demo-number-keyboard {
+  .van-button {
+    margin-left: 15px;
+  }
+}
+</style>
diff --git a/docs/demos/views/panel.vue b/docs/demos/views/panel.vue
new file mode 100644
index 00000000000..86cbdea15c4
--- /dev/null
+++ b/docs/demos/views/panel.vue
@@ -0,0 +1,35 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
+        <div>{{ $t('content') }}</div>
+      </van-panel>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
+        <div>{{ $t('content') }}</div>
+        <div slot="footer">
+          <van-button size="small">{{ $t('button') }}</van-button>
+          <van-button size="small" type="danger">{{ $t('button') }}</van-button>
+        </div>
+      </van-panel>
+    </demo-block>
+  </demo-section>
+</template>
+
+<style lang="postcss">
+.demo-panel {
+  .van-panel__footer {
+    text-align: right;
+
+    .van-button {
+      margin-left: 5px;
+    }
+  }
+
+  .van-panel__content {
+    padding: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/password-input.vue b/docs/demos/views/password-input.vue
new file mode 100644
index 00000000000..e5781f42480
--- /dev/null
+++ b/docs/demos/views/password-input.vue
@@ -0,0 +1,47 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-password-input
+        :value="value"
+        :info="$t('info')"
+        @focus="showKeyboard = true"
+      />
+
+      <van-number-keyboard
+        :show="showKeyboard"
+        @input="onInput"
+        @delete="onDelete"
+        @blur="showKeyboard = false"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      info: '密码为 6 位数字'
+    },
+    'en-US': {
+      info: 'Some tips'
+    }
+  },
+
+  data() {
+    return {
+      value: '',
+      showKeyboard: true
+    };
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+};
+</script>
diff --git a/docs/demos/views/picker.vue b/docs/demos/views/picker.vue
new file mode 100644
index 00000000000..e9006595a82
--- /dev/null
+++ b/docs/demos/views/picker.vue
@@ -0,0 +1,74 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-picker :columns="columns" @change="onChange" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-picker
+        showToolbar
+        :title="$t('area')"
+        :columns="columns"
+        @change="onChange"
+        @cancel="onCancel"
+        @confirm="onConfirm"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      area: '地区选择',
+      title2: '带 toolbar 的 Picker',
+      column: {
+        '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
+        '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
+      }
+    },
+    'en-US': {
+      area: 'Title',
+      title2: 'Picker with toolbar',
+      column: {
+        'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+        'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
+      }
+    }
+  },
+
+  computed: {
+    columns() {
+      const column = this.$t('column');
+      return [
+        {
+          values: Object.keys(column),
+          className: 'column1'
+        },
+        {
+          values: column[Object.keys(column)[0]],
+          className: 'column2'
+        }
+      ];
+    }
+  },
+
+  methods: {
+    onChange(picker, values) {
+      picker.setColumnValues(1, this.$t('column')[values[0]]);
+    },
+    onCancel() {
+      Toast('picker cancel');
+    },
+    onConfirm() {
+      Toast('picker confirm');
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+
+</style>
diff --git a/docs/demos/views/popup.vue b/docs/demos/views/popup.vue
new file mode 100644
index 00000000000..25ca51d8925
--- /dev/null
+++ b/docs/demos/views/popup.vue
@@ -0,0 +1,112 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
+      <van-popup v-model="show1">{{ $t('content') }}</van-popup>
+    </demo-block>
+
+    <demo-block :title="$t('position')">
+      <van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
+      <van-popup v-model="show2" position="bottom">
+        <van-button @click="showDialog">{{ $t('button3') }}</van-button>
+      </van-popup>
+
+      <van-button @click="show3 = true">{{ $t('button4') }}</van-button>
+      <van-popup v-model="show3" position="top" :overlay="false">
+        {{ $t('content') }}
+      </van-popup>
+
+      <van-button @click="show4 = true">{{ $t('button5') }}</van-button>
+      <van-popup v-model="show4" position="right" :overlay="false">
+        <van-button @click="show4 = false">{{ $t('button6') }}</van-button>
+      </van-popup>
+    </demo-block>
+  </demo-section> 
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      position: '弹出位置',
+      button1: '弹出 Popup',
+      button2: '底部弹出',
+      button3: '弹出 Dialog',
+      button4: '顶部弹出',
+      button5: '右侧弹出',
+      button6: '关闭弹层'
+    },
+    'en-US': {
+      position: 'Position',
+      button1: 'Show Popup',
+      button2: 'From Bottom',
+      button3: 'Show Dialog',
+      button4: 'From Top',
+      button5: 'From Right',
+      button6: 'Close Popup'
+    }
+  },
+
+  data() {
+    return {
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: false
+    }
+  },
+
+  watch: {
+    show3(val) {
+      if (val) {
+        setTimeout(() => {
+          this.show3 = false;
+        }, 2000);
+      }
+    }
+  },
+
+  methods: {
+    showDialog() {
+      Dialog.confirm({
+        title: 'confirm标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      })
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-popup {
+  .van-button {
+    margin: 10px 0 10px 15px;
+  }
+
+  .van-popup {
+    width: 60%;
+    padding: 20px;
+    border-radius: 5px;
+    box-sizing: border-box;
+
+    &--bottom {
+      width: 100%;
+      height: 200px;
+    }
+
+    &--top {
+      color: #fff;
+      width: 100%;
+      border-radius: 0;
+      line-height: 20px;
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    &--left,
+    &--right {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/progress.vue b/docs/demos/views/progress.vue
new file mode 100644
index 00000000000..5ab05dd8d58
--- /dev/null
+++ b/docs/demos/views/progress.vue
@@ -0,0 +1,48 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-progress :percentage="0" />
+      <van-progress :percentage="46" />
+      <van-progress :percentage="100" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-progress inactive :percentage="0" />
+      <van-progress inactive :percentage="46" />
+      <van-progress inactive :percentage="100" />
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-progress :pivotText="$t('red')" color="#ed5050" :percentage="26" />
+      <van-progress :pivotText="$t('orange')" color="#f60" :percentage="46" />
+      <van-progress :pivotText="$t('yellow')" color="#f09000" :percentage="66" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '进度条置灰',
+      title3: '样式定制'
+    },
+    'en-US': {
+      title2: 'Inactive',
+      title3: 'Custom Style'
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-progress {
+  .van-progress {
+    margin: 20px 10px;
+
+    &:first-of-type {
+      margin-top: 10px;
+    }
+  }
+} 
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/pull-refresh.vue b/docs/demos/views/pull-refresh.vue
new file mode 100644
index 00000000000..0b3084eade5
--- /dev/null
+++ b/docs/demos/views/pull-refresh.vue
@@ -0,0 +1,49 @@
+<template>
+  <van-pull-refresh v-model="isLoading">
+    <demo-section name="pull-refresh" background="#fff">
+      <demo-block :title="$t('basicUsage')">
+        <p>{{ $t('text') }}: {{ count }}</p>
+      </demo-block>
+    </demo-section>
+  </van-pull-refresh>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '刷新次数'
+    },
+    'en-US': {
+      text: 'Refresh Count'
+    }
+  },
+
+  data() {
+    return {
+      count: 0,
+      isLoading: false
+    };
+  },
+
+  watch: {
+    isLoading() {
+      if (this.isLoading) {
+        setTimeout(() => {
+          Toast('刷新成功');
+          this.isLoading = false;
+          this.count++;
+        }, 500);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-pull-refresh {
+  p {
+    margin: 10px 0 0 15px;
+  }
+}
+</style>
diff --git a/docs/demos/views/radio.vue b/docs/demos/views/radio.vue
new file mode 100644
index 00000000000..00e242c85b6
--- /dev/null
+++ b/docs/demos/views/radio.vue
@@ -0,0 +1,77 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <div class="van-radios">
+        <van-radio name="1" v-model="radio1">{{ $t('radio') }} 1</van-radio>
+        <van-radio name="2" v-model="radio1">{{ $t('radio') }} 2</van-radio>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <div class="van-radios">
+        <van-radio name="1" v-model="radio2" disabled>{{ $t('text1') }}</van-radio>
+        <van-radio name="2" v-model="radio2" disabled>{{ $t('text2') }}</van-radio>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <div class="van-radios">
+        <van-radio-group v-model="radio3">
+          <van-radio name="1">{{ $t('radio') }} 1</van-radio>
+          <van-radio name="2">{{ $t('radio') }} 2</van-radio>
+        </van-radio-group>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-radio-group v-model="radio4">
+        <van-cell-group>
+          <van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell>
+          <van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell>
+        </van-cell-group>
+      </van-radio-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      radio: '单选框',
+      text1: '未选中禁用',
+      text2: '选中且禁用',
+      title3: 'Radio 组',
+      title4: '与 Cell 组件一起使用'
+    },
+    'en-US': {
+      radio: 'Radio',
+      text1: 'Disabled',
+      text2: 'Disabled and checked',
+      title3: 'Radio Group',
+      title4: 'Inside a Cell'
+    }
+  },
+
+  data() {
+    return {
+      radio1: '1',
+      radio2: '2',
+      radio3: '1',
+      radio4: '1'
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-radio {
+  .van-radios {
+    padding: 0 20px;
+
+    .van-radio {
+      margin: 10px 0;
+    }
+  }
+}
+</style>
diff --git a/docs/demos/views/search.vue b/docs/demos/views/search.vue
new file mode 100644
index 00000000000..deb9c4aa234
--- /dev/null
+++ b/docs/demos/views/search.vue
@@ -0,0 +1,68 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-search :placeholder="$t('placeholder')" v-model="value" />
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <form action="/">
+        <van-search
+          v-model="value"
+          :placeholder="$t('placeholder')"
+          :showAction="true"
+          @search="onSearch"
+          @cancel="onCancel">
+        </van-search>
+      </form>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-search
+        v-model="value"
+        :showAction="true"
+        @search="onSearch">
+        <div slot="action" @click="onSearch">{{ $t('search') }}</div>
+      </van-search>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '监听对应事件',
+      title3: '自定义行动按钮',
+      placeholder: '请输入商品名称'
+    },
+    'en-US': {
+      title2: 'Listen to Events',
+      title3: 'Custom Button',
+      placeholder: 'Placeholder'
+    }
+  },
+
+  data() {
+    return {
+      value: '',
+    };
+  },
+
+  methods: {
+    onSearch() {
+      Toast(this.value);
+    },
+    onCancel() {
+      Toast(this.$t('cancel'));
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-search {
+  .van-search__action div {
+    padding: 0 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/sku.vue b/docs/demos/views/sku.vue
new file mode 100644
index 00000000000..763ae13ca5c
--- /dev/null
+++ b/docs/demos/views/sku.vue
@@ -0,0 +1,115 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <div class="sku-container">
+        <van-sku
+          v-model="showBase"
+          :sku="sku"
+          :goods="goods"
+          :goodsId="goodsId"
+          :hideStock="sku.hide_stock"
+          :quota="quota"
+          :quotaUsed="quotaUsed"
+          :resetStepperOnHide="resetStepperOnHide"
+          :disableStepperInput="disableStepperInput"
+          @buy-clicked="handleBuyClicked"
+          @add-cart="handleAddCartClicked"
+        >
+        </van-sku>
+        <van-button type="primary" @click="showBase = true" block>基础用法</van-button>
+      </div>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <div class="sku-container">
+        <van-sku
+          v-model="showCustomAction"
+          stepperTitle="我要买"
+          :sku="sku"
+          :goods="goods"
+          :goodsId="goodsId"
+          :hideStock="sku.hide_stock"
+          :showAddCartBtn="true"
+          :quota="quota"
+          :quotaUsed="quotaUsed"
+          :resetStepperOnHide="true"
+          :initialSku="initialSku"
+          @buy-clicked="handleBuyClicked"
+          @add-cart="handleAddCartClicked"
+        >
+          <!-- 隐藏sku messages -->
+          <template slot="sku-messages"></template>
+          <!-- 自定义sku actions -->
+          <template slot="sku-actions" slot-scope="props">
+            <div class="van-sku-actions">
+              <button class="van-sku__add-cart-btn" @click="handlePointClicked">
+                积分兑换
+              </button>
+              <!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
+              <button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
+                买买买
+              </button>
+            </div>
+          </template>
+        </van-sku>
+        <van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
+      </div>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import data from '../mock/sku';
+
+const goods = data.goods_info;
+goods.picture = goods.picture[0];
+
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  data() {
+    return {
+      showBase: false,
+      showCustomAction: false,
+      sku: data.sku,
+      goods: goods,
+      goodsId: data.goods_id,
+      quota: data.quota,
+      quotaUsed: data.quota_used,
+      disableStepperInput: true,
+      resetStepperOnHide: true,
+      initialSku: {
+        s1: '30349',
+        s2: '1193'
+      }
+    };
+  },
+
+  methods: {
+    handleBuyClicked(data) {
+      Toast(JSON.stringify(data));
+    },
+    handleAddCartClicked(data) {
+      Toast(JSON.stringify(data));
+    },
+    handlePointClicked() {
+      Toast('积分兑换');
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-sku {
+  .sku-container {
+    padding: 0 15px;
+  }
+}
+</style>
diff --git a/docs/demos/views/stepper.vue b/docs/demos/views/stepper.vue
new file mode 100644
index 00000000000..2890c278841
--- /dev/null
+++ b/docs/demos/views/stepper.vue
@@ -0,0 +1,34 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-stepper v-model="stepper1" />
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-stepper v-model="stepper1" disabled />
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-stepper v-model="stepper2" min="5" max="40" step="2" defaultValue="9" />
+    </demo-block>
+  </demo-section>  
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      stepper1: 1,
+      stepper2: null,
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-stepper {
+  .van-stepper {
+    margin-left: 15px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/steps.vue b/docs/demos/views/steps.vue
new file mode 100644
index 00000000000..c2dbe60895e
--- /dev/null
+++ b/docs/demos/views/steps.vue
@@ -0,0 +1,113 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-steps :active="active">
+        <van-step>{{ $t('step1') }}</van-step>
+        <van-step>{{ $t('step2') }}</van-step>
+        <van-step>{{ $t('step3') }}</van-step>
+        <van-step>{{ $t('step4') }}</van-step>
+      </van-steps>
+
+      <van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
+    </demo-block> 
+
+    <demo-block :title="$t('title2')">
+      <van-steps
+        :active="active"
+        icon="logistics"
+        icon-class="steps-success"
+        :title="$t('title')"
+        :description="$t('desc')"
+      >
+        <van-step>{{ $t('step1') }}</van-step>
+        <van-step>{{ $t('step2') }}</van-step>
+        <van-step>{{ $t('step3') }}</van-step>
+        <van-step>{{ $t('step4') }}</van-step>
+      </van-steps>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-steps direction="vertical" :active="0" active-color="#f60">
+      <van-step>
+        <h3>{{ $t('status1') }}</h3>
+        <p>2016-07-12 12:40</p>
+      </van-step>
+      <van-step>
+        <h3>{{ $t('status2') }}</h3>
+        <p>2016-07-11 10:00</p>
+      </van-step>
+      <van-step>
+        <h3>{{ $t('status3') }}</h3>
+        <p>2016-07-10 09:30</p>
+      </van-step>
+    </van-steps>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      nextStep: '下一步',
+      step1: '买家下单',
+      step2: '商家接单',
+      step3: '买家提货',
+      step4: '交易完成',
+      title2: '物流描述',
+      title3: '竖向步骤条',
+      status1: '【城市】物流状态1',
+      status2: '【城市】物流状态',
+      status3: '快件已发货'
+    },
+    'en-US': {
+      nextStep: 'Next Step',
+      step1: 'Step1',
+      step2: 'Step2',
+      step3: 'Step3',
+      step4: 'Step4',
+      title2: 'Description',
+      title3: 'Vertical Steps',
+      status1: '【City】Status1',
+      status2: '【City】Status2',
+      status3: '【City】Status3'
+    }
+  },
+
+  data() {
+    return {
+      active: 0
+    };
+  },
+
+  methods: {
+    nextStep() {
+      this.active = ++this.active % 4;
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.demo-steps {
+  .steps-success,
+  .van-icon-location {
+    color: #06bf04;
+  }
+
+  .van-button {
+    margin: 15px 0 0 15px;
+  }
+
+  .van-steps__message + p {
+    margin-bottom: 10px;
+  }
+
+  p,
+  h3 {
+    margin: 0;
+    font-size: inherit;
+    font-weight: normal;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/submit-bar.vue b/docs/demos/views/submit-bar.vue
new file mode 100644
index 00000000000..335c8636bb1
--- /dev/null
+++ b/docs/demos/views/submit-bar.vue
@@ -0,0 +1,76 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-submit-bar
+        :price="3050"
+        buttonText="提交订单"
+        @submit="onClickButton"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-submit-bar
+        disabled
+        :price="3050"
+        buttonText="提交订单"
+        tip="您的收货地址不支持同城送, 我们已为您推荐快递"
+        @submit="onClickButton"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('loading')">
+      <van-submit-bar
+        loading
+        :price="3050"
+        buttonText="提交订单"
+        @submit="onClickButton"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-submit-bar
+        :price="3050"
+        buttonText="提交订单"
+        @submit="onClickButton"
+      >
+        <span slot="tip">
+          您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
+        </span>
+      </van-submit-bar>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+
+    }
+  },
+
+  methods: {
+    onClickButton() {
+      Toast('点击按钮');
+    },
+
+    onClickEditAddress() {
+      Toast('修改地址');
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-submit-bar {
+  .van-submit-bar {
+    position: relative;
+  }
+  .van-edit-address {
+    color: #38F;
+  }
+}
+</style>
diff --git a/docs/demos/views/swipe.vue b/docs/demos/views/swipe.vue
new file mode 100644
index 00000000000..aafe3614702
--- /dev/null
+++ b/docs/demos/views/swipe.vue
@@ -0,0 +1,80 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-swipe :autoplay="3000">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-swipe :autoplay="3000">
+        <van-swipe-item v-for="(image, index) in images" :key="index">
+          <img v-lazy="image" />
+        </van-swipe-item>
+      </van-swipe>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '图片懒加载'
+    },
+    'en-US': {
+      title2: 'Image Lazyload'
+    }
+  },
+
+  data() {
+    return {
+      images: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
+      ]
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-swipe {
+  padding-bottom: 30px;
+
+  .van-swipe {
+    cursor: pointer;
+
+    &-item {
+      color: #fff;
+      min-height: 140px;
+      font-size: 20px;
+      text-align: center;
+      line-height: 150px;
+
+      &:nth-child(even) {
+        background-color: #39a9ed;
+      }
+
+      &:nth-child(odd) {
+        background-color: #66c6f2;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 240px;
+      display: block;
+      padding: 30px 60px;
+      box-sizing: border-box;
+      background-color: #fff;
+      pointer-events: none;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/demos/views/switch-cell.vue b/docs/demos/views/switch-cell.vue
new file mode 100644
index 00000000000..264901030f1
--- /dev/null
+++ b/docs/demos/views/switch-cell.vue
@@ -0,0 +1,45 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-cell-group>
+        <van-switch-cell v-model="checked" :title="$t('title')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-cell-group>
+        <van-switch-cell v-model="checked" disabled :title="$t('title')" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block :title="$t('loading')">
+      <van-cell-group>
+        <van-switch-cell v-model="checked" loading :title="$t('title')" />
+      </van-cell-group>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+
+    },
+    'en-US': {
+      
+    }
+  },
+
+  data() {
+    return {
+      checked: true
+    };
+  }
+};
+</script>
+
+
+<style lang="postcss">
+
+</style>
diff --git a/docs/demos/views/switch.vue b/docs/demos/views/switch.vue
new file mode 100644
index 00000000000..da24b2206ac
--- /dev/null
+++ b/docs/demos/views/switch.vue
@@ -0,0 +1,61 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-switch v-model="checked" />
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-switch v-model="checked" disabled />
+    </demo-block>
+
+    <demo-block :title="$t('loading')">
+      <van-switch v-model="checked" loading />
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-switch :value="checked2" @input="onInput" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title: '提醒',
+      message: '是否切换开关？'
+    },
+    'en-US': {
+      title: 'Confirm',
+      message: 'Are you sure to toggle switch?'
+    }
+  },
+
+  data() {
+    return {
+      checked: true,
+      checked2: true
+    };
+  },
+
+  methods: {
+    onInput(checked) {
+      Dialog.confirm({
+        title: this.$t('title'),
+        message: this.$t('message')
+      }).then(() => {
+        this.checked2 = checked;
+      });
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-switch {
+  .van-switch {
+    margin: 0 15px;
+  }
+}
+</style>
diff --git a/docs/demos/views/tab.vue b/docs/demos/views/tab.vue
new file mode 100644
index 00000000000..41d3da68bb1
--- /dev/null
+++ b/docs/demos/views/tab.vue
@@ -0,0 +1,112 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-tabs :active="active">
+        <van-tab :title="$t('tab') + index" v-for="index in 4" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-tabs>
+        <van-tab v-for="index in 8" :title="$t('tab') + index" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-tabs @disabled="onClickDisabled">
+        <van-tab v-for="index in 4" :title="$t('tab') + index" :disabled="index === 2" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-tabs type="card">
+        <van-tab v-for="index in 4" :title="$t('tab') + index" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+
+    <demo-block :title="$t('title5')">
+      <van-tabs @click="handleTabClick">
+        <van-tab v-for="index in 4" :title="$t('tab') + index" :key="index">
+          {{ $t('content') }} {{ index }}
+        </van-tab>
+      </van-tabs>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      tab: '选项 ',
+      title2: '横向滚动',
+      title3: '禁用标签',
+      title4: '样式风格',
+      title5: '点击事件'
+    },
+    'en-US': {
+      tab: 'Tab ',
+      content: 'content of tab',
+      title2: 'Swipe Tabs',
+      title3: 'Disabled Tab',
+      title4: 'Card Style',
+      title5: 'Click Event'
+    }
+  },
+
+  data() {
+    return {
+      active: 2
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.active = 3;
+    }, 1000);
+  },
+
+  methods: {
+    onClickDisabled() {
+      Toast('Disabled!');
+    },
+
+    handleTabClick(index) {
+      Toast(index);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-tab {
+  .van-tab__pane {
+    background-color: #fff;
+    padding: 20px;
+  }
+
+  .van-tabs--card .van-tab__pane {
+    background-color: transparent;
+  }
+
+  .custom-tabwrap .van-tab-active {
+    color: #20a0ff;
+  }
+  .custom-tabwrap .van-tabs-nav-bar {
+    background: #20a0ff;
+  }
+  .custom-pane {
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+}
+</style>
diff --git a/docs/demos/views/tabbar.vue b/docs/demos/views/tabbar.vue
new file mode 100644
index 00000000000..33b55c3b7be
--- /dev/null
+++ b/docs/demos/views/tabbar.vue
@@ -0,0 +1,60 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-tabbar v-model="active">
+        <van-tabbar-item icon="shop">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="chat" dot>{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="records" info="5">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="gold-coin" info="20">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-tabbar v-model="active2">
+        <van-tabbar-item icon="shop">
+          <span>{{ $t('custom') }}</span>
+          <img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
+        </van-tabbar-item>
+        <van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '自定义图标'
+    },
+    'en-US': {
+      title2: 'Custom icon'
+    }
+  },
+
+  data() {
+    return {
+      active: 0,
+      active2: 0,
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="postcss">
+.demo-tabbar {
+  .van-tabbar {
+    position: relative;
+
+    &-item {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/docs/demos/views/tag.vue b/docs/demos/views/tag.vue
new file mode 100644
index 00000000000..85999b0ff38
--- /dev/null
+++ b/docs/demos/views/tag.vue
@@ -0,0 +1,53 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-tag>{{ $t('tag') }}</van-tag>
+      <van-tag type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag type="success">{{ $t('tag') }}</van-tag>
+      <van-tag type="primary">{{ $t('tag') }}</van-tag>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-tag plain>{{ $t('tag') }}</van-tag>
+      <van-tag plain type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag plain type="primary">{{ $t('tag') }}</van-tag>
+      <van-tag plain type="success">{{ $t('tag') }}</van-tag>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-tag mark>{{ $t('tag') }}</van-tag>
+      <van-tag mark type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag mark type="primary">{{ $t('tag') }}</van-tag>
+      <van-tag mark type="success">{{ $t('tag') }}</van-tag>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '空心样式',
+      title3: '标记样式'
+    },
+    'en-US': {
+      title2: 'Plain style',
+      title3: 'Mark style'
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-tag {
+  .van-tag + .van-tag {
+    margin-left: 10px;
+  }
+
+  .van-tag {
+    &:first-of-type {
+      margin-left: 15px;
+    }
+  }
+}
+</style>
diff --git a/docs/demos/views/toast.vue b/docs/demos/views/toast.vue
new file mode 100644
index 00000000000..61d58208f84
--- /dev/null
+++ b/docs/demos/views/toast.vue
@@ -0,0 +1,95 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('title1')">
+      <van-button @click="showToast">{{ $t('title1') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-button @click="showLoadingToast">{{ $t('title2') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('title3')">
+      <van-button @click="showSuccessToast">{{ $t('success') }}</van-button>
+      <van-button @click="showFailToast">{{ $t('fail') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-button @click="showCustomizedToast">{{ $t('advancedUsage') }}</van-button>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      title1: '文字提示',
+      title2: '加载提示',
+      title3: '成功/失败提示',
+      success: '成功提示',
+      fail: '失败提示',
+      text1: '我是提示文案，建议不超过十五字~',
+      text2: '成功文案',
+      text3: '失败文案',
+      text4: second => `倒计时 ${second} 秒`
+    },
+    'en-US': {
+      title1: 'Text',
+      title2: 'Loading',
+      title3: 'Success/Fail',
+      success: 'Success',
+      fail: 'Fail',
+      text1: 'Some messages',
+      text2: 'Success',
+      text3: 'Fail',
+      text4: second => `${second} seconds`
+    }
+  },
+
+  methods: {
+    showToast() {
+      Toast(this.$t('text1'));
+    },
+
+    showLoadingToast() {
+      Toast.loading({ mask: true });
+    },
+
+    showSuccessToast() {
+      Toast.success(this.$t('text2'));
+    },
+
+    showFailToast() {
+      Toast.fail(this.$t('text3'));
+    },
+
+    showCustomizedToast(duration) {
+      const toast = Toast.loading({
+        duration: 0,
+        forbidClick: true,
+        message: this.$t('text4')(3)
+      });
+
+      let second = 3;
+      const timer = setInterval(() => {
+        second--;
+        if (second) {
+          toast.message = this.$t('text4')(second);
+        } else {
+          clearInterval(timer);
+          Toast.clear();
+        }
+      }, 1000);
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-toast {
+  .van-button {
+    margin-left: 15px;
+  }
+}
+</style>
diff --git a/docs/demos/views/tree-select.vue b/docs/demos/views/tree-select.vue
new file mode 100644
index 00000000000..3cfcc256681
--- /dev/null
+++ b/docs/demos/views/tree-select.vue
@@ -0,0 +1,119 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-tree-select
+        :items="items"
+        :mainActiveIndex="mainActiveIndex"
+        :activeId="activeId"
+        @navclick="onNavClick"
+        @itemclick="onItemClick"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      group1: '所有城市',
+      group2: '浙江',
+      group3: '江苏',
+      city1: [{
+        text: '杭州',
+        id: 1001
+      }, {
+        text: '温州',
+        id: 1002
+      }, {
+        text: '宁波',
+        id: 1003
+      }, {
+        text: '义乌',
+        id: 1004
+      }],
+      city2: [{
+        text: '无锡',
+        id: 1011
+      }, {
+        text: '常州',
+        id: 1012
+      }, {
+        text: '莆田',
+        id: 1013
+      }, {
+        text: '三明',
+        id: 1014
+      }]
+    },
+    'en-US': {
+      group1: 'All',
+      group2: 'Group1',
+      group3: 'Group2',
+      city1: [{
+        text: 'Delaware',
+        id: 1001
+      }, {
+        text: 'Florida',
+        id: 1002
+      }, {
+        text: 'Georqia',
+        id: 1003
+      }, {
+        text: 'Indiana',
+        id: 1004
+      }],
+      city2: [{
+        text: 'Alabama',
+        id: 1011
+      }, {
+        text: 'Kansas',
+        id: 1012
+      }, {
+        text: 'Louisiana',
+        id: 1013
+      }, {
+        text: 'Texas',
+        id: 1014
+      }]
+    }
+  },
+
+  data() {
+    return {
+      mainActiveIndex: 0,
+      activeId: 1001
+    };
+  },
+
+  computed: {
+    items() {
+      return [{
+        text: this.$t('group1'),
+        children: [...this.$t('city1'), ...this.$t('city2')]
+      }, {
+        text: this.$t('group2'),
+        children: this.$t('city1')
+      }, {
+        text: this.$t('group3'),
+        children: this.$t('city2')
+      }];
+    }
+  },
+
+  methods: {
+    onNavClick(index) {
+      this.mainActiveIndex = index;
+    },
+    onItemClick(data) {
+      console.log(data);
+      this.activeId = data.id;
+    }
+  }
+}
+</script>
+
+
+<style lang="postcss">
+
+</style>
diff --git a/docs/demos/views/uploader.vue b/docs/demos/views/uploader.vue
new file mode 100644
index 00000000000..15b972f1571
--- /dev/null
+++ b/docs/demos/views/uploader.vue
@@ -0,0 +1,31 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <div class="demo-uploader-container">
+        <van-uploader :after-read="logContent">
+          <van-icon name="photograph" />
+        </van-uploader>
+      </div>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  methods: {
+    logContent(file) {
+      console.log(file);
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-uploader {
+  &-container {
+    padding: 10px 20px;
+    font-size: 20px;
+  }
+}
+</style>
diff --git a/docs/demos/views/waterfall.vue b/docs/demos/views/waterfall.vue
new file mode 100644
index 00000000000..965895c3a7d
--- /dev/null
+++ b/docs/demos/views/waterfall.vue
@@ -0,0 +1,77 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <p class="page-desc">{{ $t('text') }}</p>
+      <ul
+        v-waterfall-lower="loadMore"
+        waterfall-disabled="disabled"
+        waterfall-offset="400">
+        <li v-for="item in list">{{ item }}</li>
+      </ul>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import { Waterfall } from 'packages';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '当即将滚动到元素底部时，会自动加载更多'
+    },
+    'en-US': {
+      text: 'This list will load items will scroll to bottom.'
+    }
+  },
+
+  data() {
+    return {
+      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      disabled: false
+    };
+  },
+
+  directives: {
+    WaterfallLower: Waterfall('lower')
+  },
+
+  methods: {
+    loadMore() {
+      this.disabled = true;
+      setTimeout(() => {
+        for (let i = 0; i < 5; i ++) {
+          this.list.push(this.list.length);
+        }
+        this.disabled = false;
+      }, 200);
+    }
+  }
+};
+</script>
+
+
+<style lang="postcss">
+.demo-waterfall {
+  ul {
+    max-height: 360px;
+    overflow: scroll;
+    border-top: 1px solid #e5e5e5;
+  }
+
+  li {
+    line-height: 50px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    text-align: center;
+  }
+
+  .page-desc {
+    padding: 5px 0;
+    line-height: 1.4;
+    font-size: 14px;
+    text-align: center;
+    color: #666;
+  }
+}
+</style>
diff --git a/docs/examples-docs/en-US/dialog.md b/docs/examples-docs/en-US/dialog.md
deleted file mode 100644
index 97f8d5ac64a..00000000000
--- a/docs/examples-docs/en-US/dialog.md
+++ /dev/null
@@ -1,126 +0,0 @@
-<script>
-import { Dialog } from 'packages';
-
-const message = 'Content';
-
-export default {
-  methods: {
-    onClickAlert() {
-      Dialog.alert({
-        message,
-        title: 'Title',
-        confirmButtonText: 'ok'
-      });
-    },
-
-    onClickAlert2() {
-      Dialog.alert({
-        message,
-        confirmButtonText: 'ok'
-      });
-    },
-
-    onClickConfirm() {
-      Dialog.confirm({
-        title: 'Title',
-        message,
-        confirmButtonText: 'ok',
-        cancelButtonText: 'cancel'
-      }).catch(action => {
-        console.log(action);
-      });
-    }
-  }
-};
-</script>
-
-## Dialog
-
-### Install
-
-```js
-import { Dialog } from 'vant';
-```
-
-### Usage
-
-#### Alert dialog
-Used to prompt for some messages, only including one confirm button
-
-:::demo Alert dialog
-```html
-<van-button @click="onClickAlert">Alert</van-button>
-<van-button @click="onClickAlert2">Alert without title</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickAlert() {
-      Dialog.alert({
-        title: 'Title',
-        message: 'Content'
-      }).then(() => {
-        // on close
-      });
-    },
-
-    onClickAlert2() {
-      Dialog.alert({
-        message: 'Content'
-      }).then(() => {
-        // on close
-      });
-    }
-  }
-};
-```
-:::
-
-#### Confirm dialog
-Used to confirm some messages, including a confirm button and a cancel button
-
-:::demo Confirm dialog
-```html
-<van-button @click="onClickConfirm">Confirm</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickConfirm() {
-      Dialog.confirm({
-        title: 'Title',
-        message: 'Content'
-      }).then(() => {
-        // on confirm
-      }).catch(() => {
-        // on cancel
-      });
-    }
-  }
-};
-```
-:::
-
-### Methods
-
-| Name | Attribute | Return value | Description |
-|-----------|-----------|-----------|-------------|
-| Dialog.alert | options | `Promise` | Show alert dialog |
-| Dialog.confirm | options | `Promise` | Show confim dialog |
-| Dialog.close | - | `void` | Close dialog |
-
-### Options
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| title | Title | `String` | - | - |
-| message | Message | `String` | - | - |
-| showConfirmButton | Whether to show confirm button | `Boolean` |  `true` | - |
-| showCancelButton | Whether to show cancel button | `Boolean` |  `false` | - |
-| confirmButtonText | Confirm button text | `String` |  `确认` | - |
-| cancelButtonText | Cancel button test | `String` | `取消` | - |
-| overlay | Whether to show overlay | `Boolean` | `true` | - |
-| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
-| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |
diff --git a/docs/examples-docs/en-US/image-preview.md b/docs/examples-docs/en-US/image-preview.md
deleted file mode 100644
index 57f01108045..00000000000
--- a/docs/examples-docs/en-US/image-preview.md
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-import { ImagePreview } from 'packages';
-
-export default {
-  methods: {
-    showImagePreview() {
-      ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
-      ]);
-    }
-  }
-};
-</script>
-
-## ImagePreview
-
-### Install
-
-```js
-import { ImagePreview } from 'vant';
-```
-
-### Usage
-
-#### Basic Usage
-
-:::demo Basic Usage
-```html
-<van-button @click="showImagePreview">Show</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showImagePreview() {
-      ImagePreview([
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]);
-    }
-  }
-};
-```
-:::
-
-### Arguments
-
-| Attribute | Description | Type |
-|-----------|-----------|-----------|
-| imageUrls | Image URL list | `Array` |
diff --git a/docs/examples-docs/en-US/popup.md b/docs/examples-docs/en-US/popup.md
deleted file mode 100644
index 0c3e4215804..00000000000
--- a/docs/examples-docs/en-US/popup.md
+++ /dev/null
@@ -1,119 +0,0 @@
-<script>
-import Dialog from 'packages/dialog';
-
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      show4: false
-    }
-  },
-
-  watch: {
-    show3(val) {
-      if (val) {
-        setTimeout(() => {
-          this.show3 = false;
-        }, 2000);
-      }
-    }
-  },
-
-  methods: {
-    showDialog() {
-      Dialog.confirm({
-        title: 'confirm标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      })
-    }
-  }
-};
-</script>
-
-## Popup
-
-### Install
-``` javascript
-import { Popup } from 'vant';
-
-Vue.component(Popup.name, Popup);
-```
-
-### Usage
-
-#### Basic Usage
-Popup is located in the middle of the screen by default
-
-:::demo Basic Usage
-```html
-<van-button @click="show1 = true">Show Popup</van-button>
-<van-popup v-model="show1">Content</van-popup>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false
-    }
-  }
-};
-```
-:::
-
-#### Different Position
-Use `position` prop to set popup display position
-
-:::demo Different Position
-```html
-<van-button @click="show2 = true;">From Bottom</van-button>
-<van-popup v-model="show2" position="bottom">
-  <van-button @click="showDialog">Show Dialog</van-button>
-</van-popup>
-
-<van-button @click="show3 = true">From Top</van-button>
-<van-popup v-model="show3" position="top" :overlay="false">Content</van-popup>
-
-<van-button @click="show4 = true">From Right</van-button>
-<van-popup v-model="show4" position="right" :overlay="false">
-  <van-button @click="show4 = false">Close</van-button>
-</van-popup>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      show4: false
-    }
-  },
-
-  watch: {
-    show2(val) {
-      if (val) {
-        setTimeout(() => {
-          this.show2 = false;
-        }, 2000);
-      }
-    }
-  }
-};
-```
-:::
-
-### API
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| v-model | Whether to show popup | `Boolean` | `false` | - |
-| overlay | Whether to show overlay | `Boolean` | `true` | - |
-| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
-| position | Position | `String` | - | `top` `bottom` `right` `left` |
-| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
-| transition | Transition | `String` | `popup-slide` | - |
-| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
diff --git a/docs/examples-docs/en-US/tab.md b/docs/examples-docs/en-US/tab.md
deleted file mode 100644
index bfa597b0a63..00000000000
--- a/docs/examples-docs/en-US/tab.md
+++ /dev/null
@@ -1,339 +0,0 @@
-<style>
-.demo-tab {
-  .van-tab__pane {
-    background-color: #fff;
-    padding: 20px;
-  }
-
-  .van-tabs--card .van-tab__pane {
-    background-color: transparent;
-  }
-
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      active: 2
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.active = 3;
-    }, 1000);
-  },
-  methods: {
-    onClickDisabled() {
-      Toast('Disabled!');
-    },
-
-    handleTabClick(index) {
-      alert(index);
-    }
-  }
-};
-</script>
-
-## Tabs
-
-### Install
-``` javascript
-import { Tab, Tabs } from 'vant';
-
-Vue.component(Tab.name, Tab);
-Vue.component(Tabs.name, Tabs);
-```
-
-### Usage
-
-#### Basic Usage
-
-By default, the first tab is actived.
-
-:::demo Basic Usage
-```html
-<van-tabs>
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-:::
-
-#### Active Specified tab
-
-You can set `active` attribute on `van-tabs` to active specified tab.
-
-:::demo Active Specified tab
-```html
-<van-tabs :active="active">
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-
-<script>
-export default {
-  data() {
-    return {
-      active: 2
-    };
-  }
-}
-</script>
-```
-:::
-
-#### Tab duration time
-
-You can use `duration` attribute to set tab duration time, the default time is `0.3s`.
-
-:::demo Tab duration time
-```html
-<van-tabs :duration="0.6">
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-:::
-
-#### Swipe Tabs
-
-By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number.
-
-:::demo Swipe Tabs
-```html
-<van-tabs>
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-  <van-tab title="tab 5">
-    content of tab 5
-  </van-tab>
-  <van-tab title="tab 6">
-    content of tab 6
-  </van-tab>
-  <van-tab title="tab 7">
-    content of tab 7
-  </van-tab>
-  <van-tab title="tab 8">
-    content of tab 8
-  </van-tab>
-</van-tabs>
-```
-:::
-
-#### Disabled Tab
-
-You can set `disabled` attribute on the corresponding `van-tab`. 
-
-:::demo Disabled Tab
-```html
-<van-tabs @disabled="onClickDisabled">
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickDisabled() {
-      Toast('Disabled!');
-    }
-  }
-};
-```
-:::
-
-#### Card Style
-
-Tabs styled as cards.
-
-:::demo Card Style
-```html
-<van-tabs type="card">
-  <van-tab title="tab 1">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-:::
-<style>
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-</style>
-
-#### Custom Style
-
-You can set `css class` to customize tabs style.
-
-:::demo Custom Style
-```html
-<van-tabs active="2" class="custom-tabwrap">
-  <van-tab title="tab 1" class="custom-pane">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2" class="custom-pane">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3" class="custom-pane">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4" class="custom-pane">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-
-<style>
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-</style>
-```
-:::
-
-#### Click Event
-
-You can bind `click` event on `van-tabs`, the event handler function has one parameters: index of click tab.
-
-:::demo Click Event
-```html
-<van-tabs @click="handleTabClick">
-  <van-tab title="tab 1" class="custom-pane">
-    content of tab 1
-  </van-tab>
-  <van-tab title="tab 2" class="custom-pane">
-    content of tab 2
-  </van-tab>
-  <van-tab title="tab 3" class="custom-pane">
-    content of tab 3
-  </van-tab>
-  <van-tab title="tab 4" class="custom-pane">
-    content of tab 4
-  </van-tab>
-</van-tabs>
-```
-
-```javascript
-export default {
-  methods: {
-    handleTabClick(index) {
-      alert(index);
-    }
-  }
-};
-```
-:::
-
-### van-tabs API
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| type | There are two style tabs, set this attribute to change tab style | `String` | `line` |     `line`, `card` |
-| active | Index of active tab | `String`, `Number` | `0` | - |
-| duration | Toggle tab's animation time | `Number` | `0.3` | - | - |
-| swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
-
-### van-tab API
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| title | Tab title | `String` | - | - |
-| disabled | Whether disabled current tab | `Boolean` | `false` | - |
-
-### van-tabs Event
-
-| Event | Description | Attribute |
-|-----------|-----------|-----------|
-| click | Triggered when click tab | index：index of current tab |
-| disabled | Triggered when click disabled tab | index：index of current tab |
-
diff --git a/docs/examples-docs/en-US/toast.md b/docs/examples-docs/en-US/toast.md
deleted file mode 100644
index ad04c3db164..00000000000
--- a/docs/examples-docs/en-US/toast.md
+++ /dev/null
@@ -1,160 +0,0 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  methods: {
-    showToast() {
-      Toast('Some messages');
-    },
-    showLoadingToast() {
-      Toast.loading({ mask: true });
-    },
-    showSuccessToast() {
-      Toast.success('Success');
-    },
-    showFailToast() {
-      Toast.fail('Fail');
-    },
-    showCustomizedToast(duration) {
-      const toast = Toast.loading({
-        duration: 0,  
-        forbidClick: true,
-        message: '3 seconds'
-      });
-
-      let second = 3;
-      const timer = setInterval(() => {
-        second--;
-        if (second) {
-          toast.message = `${second} seconds`;
-        } else {
-          clearInterval(timer);
-          Toast.clear();
-        }
-      }, 1000);
-    }
-  }
-};
-</script>
-
-## Toast
-
-### Install
-
-```javascript
-import { Toast } from 'vant';
-```
-
-### Usage
-
-#### Text
-
-:::demo Text
-```html
-<van-button @click="showToast">Show Text</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showToast() {
-      Toast('Some messages');
-    }
-  }
-}
-```
-:::
-
-#### Loading
-
-:::demo Loading
-```html
-<van-button @click="showLoadingToast">Show Loading</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showLoadingToast() {
-      Toast.loading({ mask: true });
-    }
-  }
-}
-```
-:::
-
-#### Success/Fail
-
-:::demo Success/Fail
-```html
-<van-button @click="showSuccessToast">Show Success</van-button>
-<van-button @click="showFailToast">Show Fail</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showSuccessToast() {
-      Toast.success('Success');
-    },
-    showFailToast() {
-      Toast.fail('Fail');
-    }
-  }
-}
-```
-:::
-
-#### Advanced Usage
-
-:::demo Advanced Usage
-```html
-<van-button @click="showCustomizedToast">Advanced Usage</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showCustomizedToast() {
-      const toast = Toast.loading({
-        duration: 0,       // continuous display toast
-        forbidClick: true, // forbid click background
-        message: '3 seconds'
-      });
-
-      let second = 3;
-      const timer = setInterval(() => {
-        second--;
-        if (second) {
-          toast.message = `${second} seconds`;
-        } else {
-          clearInterval(timer);
-          Toast.clear();
-        }
-      }, 1000);
-    }
-  }
-};
-```
-:::
-
-### Methods
-
-| Methods | Attribute | Return value | Description |
-|-----------|-----------|-----------|-------------|
-| Toast | `options | message` | toast instance | Show toast |
-| Toast.loading | `options | message` | toast instance | Show loading toast |
-| Toast.success | `options | message` | toast instance | Show success toast |
-| Toast.fail | `options | message` | toast instance | Show fail toast |
-| Toast.clear | - | `void` | Close  |
-
-### Options
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| type | Type | `String` | `text` | `loading` `success` `fail` `html` |
-| message | Message | `String` | `''` | - |
-| position | Position | `String` | `middle` | `top` `bottom` |
-| mask | Whether to show mask | `Boolean` | `false` | - |
-| forbidClick | Whether to forbid click background | `Boolean` | `false` | - |
-| duration | Toast duration(ms) | `Number` | `3000` | Toast won't disappear if value is 0 |
diff --git a/docs/examples-docs/en-US/uploader.md b/docs/examples-docs/en-US/uploader.md
deleted file mode 100644
index 635adaf3a68..00000000000
--- a/docs/examples-docs/en-US/uploader.md
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-export default {
-  methods: {
-    logContent(file) {
-      console.log(file)
-    }
-  }
-};  
-</script>
-
-## Uploader
-
-### Install
-``` javascript
-import { Uploader } from 'vant';
-
-Vue.component(Uploader.name, Uploader);
-```
-
-### Usage
-
-#### Basic Usage
-
-:::demo Basic Usage
-```html
-<div class="uploader-container">
-  <van-uploader :after-read="logContent">
-    <van-icon name="photograph"></van-icon>
-  </van-uploader>
-</div>
-```
-
-```javascript
-export default {
-  methods: {
-    logContent(file) {
-      console.log(file)
-    }
-  }
-};  
-```
-:::
-
-### API
-
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
-| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
-| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
-| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
-
-### Slot
-
-| name | Description |
-|-----------|-----------|
-| - | 自定义上传显示图标 |
diff --git a/docs/examples-docs/zh-CN/actionsheet.md b/docs/examples-docs/zh-CN/actionsheet.md
deleted file mode 100644
index 7c8af18d4db..00000000000
--- a/docs/examples-docs/zh-CN/actionsheet.md
+++ /dev/null
@@ -1,181 +0,0 @@
-<style>
-.demo-actionsheet {
-  .actionsheet-wx {
-    color: #06BF04;
-  }
-
-  .van-button {
-    margin-left: 15px;
-  }
-
-  p {
-    padding: 20px;
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      actions: [
-        {
-          name: '微信安全支付',
-          className: 'actionsheet-wx',
-          callback: this.onClick
-        },
-        {
-          name: '支付宝支付',
-          loading: true
-        },
-        {
-          name: '信用卡支付'
-        },
-        {
-          name: '其他支付方式'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    onClick(item) {
-      Toast(item.name);
-    }
-  }
-}
-</script>
-
-## Actionsheet 行动按钮
-
-### 使用指南
-``` javascript
-import { Actionsheet } from 'vant';
-
-Vue.component(Actionsheet.name, Actionsheet);
-```
-
-### 代码演示
-
-#### 基础用法
-需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
-
-:::demo 基础用法
-```html
-<van-button @click="show1 = true">弹出 Actionsheet</van-button>
-<van-actionsheet v-model="show1" :actions="actions" />
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false,
-      actions: [
-        {
-          name: '微信安全支付',
-          className: 'actionsheet-wx',
-          callback: this.onClick
-        },
-        {
-          name: '支付宝支付',
-          loading: true
-        },
-        {
-          name: '信用卡支付'
-        },
-        {
-          name: '其他支付方式'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    onClick(item) {
-      Toast(item.name);
-    }
-  }
-}
-```
-:::
-
-#### 带取消按钮的 Actionsheet
-
-如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
-
-:::demo 带取消按钮的 Actionsheet
-```html
-<van-button @click="show2 = true">弹出带取消按钮的 Actionsheet</van-button>
-<van-actionsheet v-model="show2" :actions="actions" cancel-text="取消">
-</van-actionsheet>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show2: false,
-      actions: [
-        {
-          name: '微信安全支付',
-          className: 'actionsheet-wx',
-          callback: this.onClick
-        },
-        {
-          name: '支付宝支付',
-          loading: true
-        },
-        {
-          name: '信用卡支付'
-        },
-        {
-          name: '其他支付方式'
-        }
-      ]
-    };
-  }
-}
-```
-:::
-
-#### 带标题的 Actionsheet
-
-如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
-
-:::demo 带标题的 Actionsheet
-```html
-<van-button @click="show3 = true">弹出带标题的 Actionsheet</van-button>
-<van-actionsheet v-model="show3" title="支持以下配送方式">
-  <p>一些内容</p>
-</van-actionsheet>
-```
-:::
-
-### API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| actions | 行动按钮数组 | `Array` | `[]` | - |
-| title | 标题 | `String` | - | - |
-| cancelText | 取消按钮文案 | `String` | - | - |
-| overlay | 是否显示遮罩 | `Boolean` | - | - |
-| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
-
-### actions
-
-
-`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
-
-| key | 说明 |
-|-----------|-----------|
-| name | 标题 |
-| subname | 二级标题 |
-| className | 为对应列添加特殊的`class` |
-| loading | 是否是`loading`状态 |
-| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
diff --git a/docs/examples-docs/zh-CN/dialog.md b/docs/examples-docs/zh-CN/dialog.md
deleted file mode 100644
index d549a9169be..00000000000
--- a/docs/examples-docs/zh-CN/dialog.md
+++ /dev/null
@@ -1,132 +0,0 @@
-<style>
-.demo-dialog {
-  .van-button {
-    margin: 15px;
-  }
-}
-</style>
-
-<script>
-import { Dialog } from 'packages';
-
-const message = '弹窗内容';
-
-export default {
-  methods: {
-    onClickAlert() {
-      Dialog.alert({
-        title: '标题',
-        message
-      });
-    },
-
-    onClickAlert2() {
-      Dialog.alert({
-        message
-      });
-    },
-
-    onClickConfirm() {
-      Dialog.confirm({
-        title: '标题',
-        message
-      }).catch(action => {
-        console.log(action);
-      });
-    }
-  }
-};
-</script>
-
-## Dialog 弹出框
-
-### 使用指南
-
-```js
-import { Dialog } from 'vant';
-```
-
-### 代码演示
-
-#### 消息提示
-
-用于提示一些消息，只包含一个确认按钮
-
-:::demo 消息提示
-```html
-<van-button @click="onClickAlert">Alert</van-button>
-<van-button @click="onClickAlert2">无标题 Alert</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickAlert() {
-      Dialog.alert({
-        title: '标题',
-        message: '弹窗内容'
-      }).then(() => {
-        // on close
-      });
-    },
-
-    onClickAlert2() {
-      Dialog.alert({
-        message: '弹窗内容'
-      }).then(() => {
-        // on close
-      });
-    }
-  }
-};
-```
-:::
-
-#### 消息确认
-
-用于确认消息，包含取消和确认按钮
-
-:::demo 消息确认
-```html
-<van-button @click="onClickConfirm">Confirm</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickConfirm() {
-      Dialog.confirm({
-        title: '标题',
-        message: '弹窗内容'
-      }).then(() => {
-        // on confirm
-      }).catch(() => {
-        // on cancel
-      });
-    }
-  }
-};
-```
-:::
-
-### 方法
-
-| 方法名 | 参数 | 返回值 | 介绍 |
-|-----------|-----------|-----------|-------------|
-| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
-| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
-| Dialog.close | - | `void` | 关闭弹窗 |
-
-### Options
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| title | 标题 | `String` | - | - |
-| message | 内容 | `String` | - | - |
-| showConfirmButton | 是否展示确认按钮 | `Boolean` |  `true` | - |
-| showCancelButton | 是否展示取消按钮 | `Boolean` |  `false` | - |
-| confirmButtonText | 确认按钮的文案 | `String` |  `确认` | - |
-| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
-| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
-| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
-| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
diff --git a/docs/examples-docs/zh-CN/icon.md b/docs/examples-docs/zh-CN/icon.md
deleted file mode 100644
index 885a9dbcb37..00000000000
--- a/docs/examples-docs/zh-CN/icon.md
+++ /dev/null
@@ -1,172 +0,0 @@
-<style>
-.demo-icon {
-  font-size: 0;
-
-  .examples {
-    max-height: none;
-  }
-
-  .van-col {
-    text-align: center;
-    height: 100px;
-    float: none;
-    display: inline-block;
-
-    .van-icon {
-      display: block;
-    }
-  }
-
-  .van-icon {
-    display: none;
-    font-size: 32px;
-    margin: 15px 0;
-    color: rgba(69, 90, 100, .8);
-  }
-
-  span {
-    font-size: 14px;
-  }
-} 
-</style>
-
-<script>
-import Vue from 'vue';
-
-const icons = [
-  'close',
-  'location',
-  'clock',
-  'gold-coin',
-  'chat',
-  'exchange',
-  'upgrade',
-  'edit',
-  'contact',
-  'passed',
-  'points',
-  'delete',
-  'records',
-  'logistics',
-  'check',
-  'checked',
-  'gift',
-  'like-o',
-  'like',
-  'qr',
-  'qr-invalid',
-  'shop',
-  'photograph',
-  'add',
-  'add2',
-  'photo',
-  'cart',
-  'arrow',
-  'search',
-  'clear',
-  'success',
-  'fail',
-  'wechat',
-  'alipay',
-  'password-view',
-  'wap-nav',
-  'password-not-view',
-  'wap-home',
-  'ecard-pay',
-  'balance-pay',
-  'peer-pay',
-  'credit-pay',
-  'debit-pay',
-  'other-pay',
-  'shopping-cart',
-  'browsing-history',
-  'goods-collect',
-  'shop-collect',
-  'receive-gift',
-  'send-gift',
-  'setting',
-  'coupon',
-  'free-postage',
-  'discount',
-  'birthday-privilege',
-  'member-day-privilege',
-  'balance-details',
-  'cash-back-record',
-  'points-mall',
-  'exchange-record',
-  'pending-payment',
-  'pending-orders',
-  'pending-deliver',
-  'pending-evaluate',
-  'cash-on-deliver',
-  'gift-card-pay',
-  'underway',
-  'point-gift',
-  'after-sale',
-  'edit-data',
-  'question',
-  'description',
-  'card',
-  'gift-card',
-  'completed',
-  'value-card',
-  'certificate',
-  'tosend',
-  'sign',
-  'home',
-  'phone'
-];
-
-const IconListConstructor = Vue.extend({
-  render(h) {
-    return (
-      <div>
-        {icons.map(icon => (
-          <van-col span="8">
-            <van-icon name={icon}></van-icon>
-            <span>{icon}</span>
-          </van-col>
-        ))}
-      </div>
-    )
-  }
-});
-
-export default {
-  mounted() {
-    const IconList = new IconListConstructor({
-      el: document.createElement('div')  
-    });
-    const block = document.querySelector('.zan-doc-demo-block');
-    if (block) {
-      block.appendChild(IconList.$el);
-    }
-  }
-};
-</script>
-
-## Icon 图标
-
-### 使用指南
-``` javascript
-import { Icon } from 'vant';
-
-Vue.component(Icon.name, Icon);
-```
-
-### 代码演示
-
-#### 基础用法
-
-设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
-:::demo 图标列表
-```html
-<van-icon name="success" />
-```
-:::
-
-### API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| name | icon名称 | `String` | `''` | - |
diff --git a/docs/examples-docs/zh-CN/image-preview.md b/docs/examples-docs/zh-CN/image-preview.md
deleted file mode 100644
index bc16e3fa4a6..00000000000
--- a/docs/examples-docs/zh-CN/image-preview.md
+++ /dev/null
@@ -1,89 +0,0 @@
-<style>
-.demo-image-preview {
-  .van-button {
-    margin-left: 15px;
-  }
-}
-.van-image-preview {
-  img {
-    pointer-events: none;
-  }
-}
-</style>
-
-<script>
-import { ImagePreview } from 'packages';
-
-export default {
-  methods: {
-    showImagePreview(position) {
-      ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
-      ], typeof position === 'number' ? position : 0);
-    }
-  }
-};
-</script>
-
-## ImagePreview 图片预览
-
-### 使用指南
-
-`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
-
-```js
-import { ImagePreview } from 'vant';
-```
-
-### 代码演示
-
-#### 基础用法
-
-:::demo 基础用法
-```html
-<van-button @click="showImagePreview">预览图片</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showImagePreview() {
-      ImagePreview([
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]);
-    }
-  }
-};
-```
-:::
-
-#### 指定初始位置
-
-:::demo 指定初始位置
-```html
-<van-button @click="showImagePreview(1)">指定初始位置</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showImagePreview(startPosition) {
-      ImagePreview([
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ], startPosition);
-    }
-  }
-};
-```
-:::
-
-### 方法参数
-
-| 参数名 | 说明 | 类型 |
-|-----------|-----------|-----------|
-| imageUrls | 需要预览的图片 | `Array` |
-| startPosition | 图片预览起始位置索引 | `Number` |
diff --git a/docs/examples-docs/zh-CN/lazyload.md b/docs/examples-docs/zh-CN/lazyload.md
deleted file mode 100644
index 97c266bd973..00000000000
--- a/docs/examples-docs/zh-CN/lazyload.md
+++ /dev/null
@@ -1,153 +0,0 @@
-<style>
-.demo-lazyload {
-  padding: 15px;
-
-  img,
-  div[lazy] {
-    padding: 15px;
-    width: 100%;
-    height: 250px;
-    margin: 10px 0 0;
-    background-color: white;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    background-size: 315px 250px;
-    background-position: 15px;
-    background-repeat: no-repeat;
-    box-sizing: border-box;
-  }
-
-  .zan-doc-demo-block__title,
-  .zan-doc-demo-block__subtitle {
-    padding-left: 0;
-  }
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      imageList: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
-      ],
-      backgroundImageList: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
-      ],
-      componentImageList: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
-      ]
-    };
-  },
-
-  methods: {
-    handleComponentShow() {
-      console.log('component show');
-    }
-  }
-}
-</script>
-
-## Lazyload 图片懒加载
-
-### 使用指南
-
-`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
-
-```js
-import Vue from 'vue';
-import { Lazyload } from 'vant';
-
-Vue.use(Lazyload, options);
-```
-
-### 代码演示
-
-#### 基础用法
-将`v-lazy`指令的值设置为你需要懒加载的图片
-
-:::demo 基础用法
-```html
-<img v-for="img in imageList" v-lazy="img">
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      imageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
-#### 背景图懒加载
-
-和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
-
-:::demo 背景图懒加载
-```html
-<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      backgroundImageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
-#### 懒加载模块
-
-懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
-
-:::demo 懒加载模块
-```html
-<lazy-component>
-  <img v-for="img in componentImageList" v-lazy="img">
-</lazy-component>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      componentImageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
-### Options
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| loading | 加载时的图片 | `String` | - | - |
-| error | 错误时的图片 | `String` | - | - |
-| preload | 预加载高度的比例 | `String` | - | - |
-| attempt | 尝试次数 | `Number` | `3` | - |
-| listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
-| adapter | 适配器 | `Object` | - | - |
-| filter | 图片url过滤 | `Object` | - | - |
-| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |
-
-更多内容请参照：[ vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)
diff --git a/docs/examples-docs/zh-CN/loading.md b/docs/examples-docs/zh-CN/loading.md
deleted file mode 100644
index 1df7f40b961..00000000000
--- a/docs/examples-docs/zh-CN/loading.md
+++ /dev/null
@@ -1,53 +0,0 @@
-<style>
-.demo-loading {
-  .van-loading {
-    display: inline-block;
-    margin: 10px 0 10px 20px;
-  }
-}
-</style>
-
-## Loading 加载
-
-### 使用指南
-``` javascript
-import { Loading } from 'vant';
-
-Vue.component(Loading.name, Loading);
-```
-
-### 代码演示
-
-#### 单色圆环
-
-:::demo 单色圆环
-```html
-<van-loading type="circle" color="black"></van-loading>
-<van-loading type="circle" color="white"></van-loading>
-```
-:::
-
-#### 渐变色圆环
-
-:::demo 渐变色圆环
-```html
-<van-loading type="gradient-circle" color="black"></van-loading>
-<van-loading type="gradient-circle" color="white"></van-loading>
-```
-:::
-
-#### Spinner
-
-:::demo Spinner
-```html
-<van-loading type="spinner" color="black"></van-loading>
-<van-loading type="spinner" color="white"></van-loading>
-```
-:::
-
-### API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| color | 颜色 | `String` | `black` | `black` `white` |
-| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
diff --git a/docs/examples-docs/zh-CN/popup.md b/docs/examples-docs/zh-CN/popup.md
deleted file mode 100644
index 18772589507..00000000000
--- a/docs/examples-docs/zh-CN/popup.md
+++ /dev/null
@@ -1,154 +0,0 @@
-<style>
-.demo-popup {
-  .van-button {
-    margin: 10px 0 10px 15px;
-  }
-
-  .van-popup {
-    width: 60%;
-    padding: 20px;
-    border-radius: 5px;
-    box-sizing: border-box;
-
-    &--bottom {
-      width: 100%;
-      height: 200px;
-    }
-
-    &--top {
-      color: #fff;
-      width: 100%;
-      border-radius: 0;
-      line-height: 20px;
-      background-color: rgba(0, 0, 0, 0.8);
-    }
-
-    &--left,
-    &--right {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-</style>
-
-<script>
-import Dialog from 'packages/dialog';
-
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      show4: false
-    }
-  },
-
-  watch: {
-    show3(val) {
-      if (val) {
-        setTimeout(() => {
-          this.show3 = false;
-        }, 2000);
-      }
-    }
-  },
-
-  methods: {
-    showDialog() {
-      Dialog.confirm({
-        title: 'confirm标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      })
-    }
-  }
-};
-</script>
-
-## Popup 弹出层
-
-### 使用指南
-``` javascript
-import { Popup } from 'vant';
-
-Vue.component(Popup.name, Popup);
-```
-
-### 代码演示
-
-#### 基础用法
-`popup`默认从中间弹出
-
-:::demo 基础用法
-```html
-<van-button @click="show1 = true">弹出 Popup</van-button>
-<van-popup v-model="show1">内容</van-popup>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false
-    }
-  }
-};
-```
-:::
-
-#### 弹出位置
-通过`position`属性设置 Popup 弹出位置
-
-:::demo 弹出位置
-```html
-<van-button @click="show2 = true;">底部弹出</van-button>
-<van-popup v-model="show2" position="bottom">
-  <van-button @click="showDialog">弹出 Dialog</van-button>
-</van-popup>
-
-<van-button @click="show3 = true">顶部弹出</van-button>
-<van-popup v-model="show3" position="top" :overlay="false">
-  更新成功
-</van-popup>
-
-<van-button @click="show4 = true">右侧弹出</van-button>
-<van-popup v-model="show4" position="right" :overlay="false">
-  <van-button @click="show4 = false">关闭弹层</van-button>
-</van-popup>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false
-    }
-  },
-
-  watch: {
-    show2(val) {
-      if (val) {
-        setTimeout(() => {
-          this.show2 = false;
-        }, 2000);
-      }
-    }
-  }
-};
-```
-:::
-
-### API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
-| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
-| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
-| position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
-| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
-| transition | 弹出层的`transition` | `String` | `popup-slide` | - |
-| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
diff --git a/docs/examples-docs/zh-CN/tab.md b/docs/examples-docs/zh-CN/tab.md
deleted file mode 100644
index ee4c35a5d6f..00000000000
--- a/docs/examples-docs/zh-CN/tab.md
+++ /dev/null
@@ -1,257 +0,0 @@
-<style>
-.demo-tab {
-  .van-tab__pane {
-    background-color: #fff;
-    padding: 20px;
-  }
-
-  .van-tabs--card .van-tab__pane {
-    background-color: transparent;
-  }
-
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      active: 2
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.active = 3;
-    }, 1000);
-  },
-  methods: {
-    onClickDisabled() {
-      Toast('Disabled!');
-    },
-
-    handleTabClick(index) {
-      alert(index);
-    }
-  }
-};
-</script>
-
-## Tabs 标签页
-
-### 使用指南
-``` javascript
-import { Tab, Tabs } from 'vant';
-
-Vue.component(Tab.name, Tab);
-Vue.component(Tabs.name, Tabs);
-```
-
-### 代码演示
-
-#### 基础用法
-
-默认情况下是启用第一个`tab`。
-
-:::demo 基础用法
-```html
-<van-tabs>
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-```
-:::
-
-#### active特定tab
-
-可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。
-
-:::demo 基础用法
-```html
-<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-tabs>
-```
-:::
-
-#### 设置切换tab的动画时间
-
-通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
-
-:::demo 设置切换tab的动画时间
-```html
-<van-tabs :duration="0.6">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二">内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-</van-tabs>
-```
-:::
-
-#### 横向滚动tab
-
-默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
-
-:::demo 横向滚动tab
-```html
-<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-tab title="选项六">内容六</van-tab>
-  <van-tab title="选项七">内容七</van-tab>
-  <van-tab title="选项八">内容八</van-tab>
-</van-tabs>
-```
-:::
-
-#### 禁用tab
-
-在对应的`van-tab`上设置`disabled`属性即可。如果需要监听禁用事件，可以在`van-tabs`上监听`disabled`事件。
-
-:::demo 禁用tab
-```html
-<van-tabs @disabled="onClickDisabled">
-  <van-tab title="选项一">内容一</van-tab>
-  <van-tab title="选项二" disabled>内容二</van-tab>
-  <van-tab title="选项三">内容三</van-tab>
-  <van-tab title="选项四">内容四</van-tab>
-</van-tabs>
-```
-
-```javascript
-export default {
-  methods: {
-    onClickDisabled() {
-      Toast('Disabled!')
-    }
-  }
-};
-```
-:::
-
-#### card样式
-
-`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
-
-:::demo card样式
-```html
-<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-tabs>
-```
-:::
-<style>
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-</style>
-
-#### 自定义样式
-
-可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
-
-:::demo 自定义样式
-```html
-<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-tabs>
-
-<style>
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-  .custom-pane {
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-  }
-</style>
-```
-:::
-
-#### click事件
-
-可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
-
-:::demo click事件
-```html
-<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-tabs>
-```
-
-```javascript
-export default {
-  methods: {
-    handleTabClick(index) {
-      alert(index);
-    }
-  }
-};
-```
-:::
-
-### van-tabs API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选 |
-|-----------|-----------|-----------|-------------|-------------|
-| type | 两种UI | `String` | `line` |     `line`, `card` |
-| active | 默认激活的tab | `String`, `Number` | `0` | - |
-| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
-| swipeThreshold | 滚动阀值，默认是超过4个tab时标签页可滚动，通过这个属性可以设置超过多少个可滚动 | `Number` | `4` | - | - |
-
-
-### van-tab API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选 |
-|-----------|-----------|-----------|-------------|-------------|
-| title | tab的标题 | `String` | - | - |
-| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
-
-### van-tabs Event
-
-| 事件名 | 说明 | 参数 |
-|-----------|-----------|-----------|
-| click | 某个tab点击事件 | index：点击的`tab`的索引 |
-| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
-
diff --git a/docs/examples-docs/zh-CN/toast.md b/docs/examples-docs/zh-CN/toast.md
deleted file mode 100644
index c251585766a..00000000000
--- a/docs/examples-docs/zh-CN/toast.md
+++ /dev/null
@@ -1,168 +0,0 @@
-<style>
-.demo-toast {
-  .van-button {
-    margin-left: 15px;
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages';
-
-export default {
-  methods: {
-    showToast() {
-      Toast('我是提示文案，建议不超过十五字~');
-    },
-    showLoadingToast() {
-      Toast.loading({ mask: true });
-    },
-    showSuccessToast() {
-      Toast.success('成功文案');
-    },
-    showFailToast() {
-      Toast.fail('失败文案');
-    },
-    showCustomizedToast(duration) {
-      const toast = Toast.loading({
-        duration: 0,
-        forbidClick: true,
-        message: '倒计时 3 秒'
-      });
-
-      let second = 3;
-      const timer = setInterval(() => {
-        second--;
-        if (second) {
-          toast.message = `倒计时 ${second} 秒`;
-        } else {
-          clearInterval(timer);
-          Toast.clear();
-        }
-      }, 1000);
-    }
-  }
-};
-</script>
-
-## Toast 轻提示
-
-### 使用指南
-
-```javascript
-import { Toast } from 'vant';
-```
-
-### 代码演示
-
-#### 文字提示
-
-:::demo 文字提示
-```html
-<van-button @click="showToast">文字提示</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showToast() {
-      Toast('我是提示文案，建议不超过十五字~');
-    }
-  }
-}
-```
-:::
-
-#### 加载提示
-
-:::demo 加载提示
-```html
-<van-button @click="showLoadingToast">加载提示</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showLoadingToast() {
-      Toast.loading({ mask: true });
-    }
-  }
-}
-```
-:::
-
-#### 成功/失败提示
-
-:::demo 成功/失败提示
-```html
-<van-button @click="showSuccessToast">成功提示</van-button>
-<van-button @click="showFailToast">失败提示</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showSuccessToast() {
-      Toast.success('成功文案');
-    },
-    showFailToast() {
-      Toast.fail('失败文案');
-    }
-  }
-}
-```
-:::
-
-#### 高级用法
-
-:::demo 高级用法
-```html
-<van-button @click="showCustomizedToast">高级用法</van-button>
-```
-
-```javascript
-export default {
-  methods: {
-    showCustomizedToast() {
-      const toast = Toast.loading({
-        duration: 0,       // 持续展示 toast
-        forbidClick: true, // 禁用背景点击
-        message: '倒计时 3 秒'
-      });
-
-      let second = 3;
-      const timer = setInterval(() => {
-        second--;
-        if (second) {
-          toast.message = `倒计时 ${second} 秒`;
-        } else {
-          clearInterval(timer);
-          Toast.clear();
-        }
-      }, 1000);
-    }
-  }
-};
-```
-:::
-
-### 方法
-
-| 方法名 | 参数 | 返回值 | 介绍 |
-|-----------|-----------|-----------|-------------|
-| Toast | `options | message` | toast 实例 | 展示提示 |
-| Toast.loading | `options | message` | toast 实例 | 展示加载提示 |
-| Toast.success | `options | message` | toast 实例 | 展示成功提示 |
-| Toast.fail | `options | message` | toast 实例 | 展示失败提示 |
-| Toast.clear | - | `void` | 关闭提示 |
-
-### Options
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
-| message | 内容 | `String` | `''` | - |
-| position | 位置 | `String` | `middle` | `top` `bottom` |
-| mask | 是否显示背景蒙层 | `Boolean` | `false` | - |
-| forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
-| duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |
diff --git a/docs/examples-docs/en-US/actionsheet.md b/docs/markdown/en-US/actionsheet.md
similarity index 59%
rename from docs/examples-docs/en-US/actionsheet.md
rename to docs/markdown/en-US/actionsheet.md
index 987efa49480..40166334888 100644
--- a/docs/examples-docs/en-US/actionsheet.md
+++ b/docs/markdown/en-US/actionsheet.md
@@ -1,28 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      show1: false,
-      show2: false,
-      show3: false,
-      actions: [
-        { name: 'Option1', callback: this.onClick },
-        { name: 'Option2' },
-        { name: 'Option3', loading: true }
-      ]
-    };
-  },
-
-  methods: {
-    onClick(item) {
-      Toast(item.name);
-    }
-  }
-}
-</script>
-
 ## Actionsheet
 
 ### Install
@@ -37,17 +12,15 @@ Vue.component(Actionsheet.name, Actionsheet);
 #### Basic Usage
 Use `actions` prop to set options of actionsheet. 
 
-:::demo Basic Usage
 ```html
-<van-button @click="show1 = true">Show Actionsheet</van-button>
-<van-actionsheet v-model="show1" :actions="actions" />
+<van-actionsheet v-model="show" :actions="actions" />
 ```
 
 ```javascript
 export default {
   data() {
     return {
-      show1: false,
+      show: false,
       actions: [
         { name: 'Option1', callback: this.onClick },
         { name: 'Option2' },
@@ -63,28 +36,21 @@ export default {
   }
 }
 ```
-:::
 
 #### Actionsheet with cancel button
 
-:::demo Actionsheet with cancel button
 ```html
-<van-button @click="show2 = true">Show Actionsheet with cancel button</van-button>
-<van-actionsheet v-model="show2" :actions="actions" cancel-text="Cancel" />
+<van-actionsheet v-model="show" :actions="actions" cancelText="Cancel" />
 ```
-:::
 
 #### Actionsheet with title
 Actionsheet will get another style if there is a `title` prop.
 
-:::demo Actionsheet with title
 ```html
-<van-button @click="show3 = true">Show Actionsheet with title</van-button>
-<van-actionsheet v-model="show3" title="Title">
+<van-actionsheet v-model="show" title="Title">
   <p>Content</p>
 </van-actionsheet>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/address-edit.md b/docs/markdown/en-US/address-edit.md
similarity index 75%
rename from docs/examples-docs/en-US/address-edit.md
rename to docs/markdown/en-US/address-edit.md
index b07d00cd4ac..5b7dda5e87d 100644
--- a/docs/examples-docs/en-US/address-edit.md
+++ b/docs/markdown/en-US/address-edit.md
@@ -1,41 +1,3 @@
-<script>
-import { Toast } from 'packages';
-import areaList from '../../mock/area.json';
-
-export default {
-  data() {
-    return {
-      areaList,
-      searchResult: []
-    }
-  },
-
-  methods: {
-    onSave() {
-      Toast('save');
-    },
-    onDelete() {
-      Toast('delete');
-    },
-    onChangeDetail(val) {
-      if (val) {
-        this.searchResult = [{
-          name: '黄龙万科中心',
-          address: '杭州市西湖区'
-        }, {
-          name: '黄龙万科中心H座'
-        }, {
-          name: '黄龙万科中心H座',
-          address: '杭州市西湖区'
-        }];
-      } else {
-        this.searchResult = [];
-      }
-    }
-  }
-};
-</script>
-
 ## AddressEdit
 
 ### Install
@@ -49,14 +11,14 @@ Vue.component(AddressEdit.name, AddressEdit);
 
 #### Basic Usage
 
-:::demo Basic Usage
+
 ```html
 <van-address-edit
-  :area-list="areaList"
-  :show-postal="true"
-  :show-set-default="true"
-  :show-search-result="true"
-  :search-result="searchResult"
+  :areaList="areaList"
+  :showPostal="true"
+  :showSetDefault="true"
+  :showSearchResult="true"
+  :searchResult="searchResult"
   @save="onSave"
   @delete="onDelete"
   @change-detail="onChangeDetail"
@@ -92,7 +54,7 @@ export default {
   }
 }
 ```
-:::
+
 
 ### API
 
diff --git a/docs/examples-docs/en-US/address-list.md b/docs/markdown/en-US/address-list.md
similarity index 67%
rename from docs/examples-docs/en-US/address-list.md
rename to docs/markdown/en-US/address-list.md
index 38eedfe1cd4..037cfdea13b 100644
--- a/docs/examples-docs/en-US/address-list.md
+++ b/docs/markdown/en-US/address-list.md
@@ -1,44 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  data() {
-    return {
-      chosenAddressId: '1',
-      list: [
-        {
-          id: '1',
-          name: '张三',
-          tel: '13000000000',
-          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
-        },
-        {
-          id: '2',
-          name: '李四',
-          tel: '1310000000',
-          address: '浙江省杭州市拱墅区莫干山路 50 号'
-        },
-        {
-          id: '3',
-          name: '王五',
-          tel: '1320000000',
-          address: '浙江省杭州市滨江区江南大道 15 号'
-        }
-      ]
-    }
-  },
-
-  methods: {
-    onAdd() {
-      Toast('新增收货地址');
-    },
-    onEdit(item, index) {
-      Toast('编辑收货地址:' + index);
-    }
-  }
-}
-</script>
-
 ## AddressList
 
 ### Install
@@ -52,7 +11,6 @@ Vue.component(AddressList.name, AddressList);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-address-list
   v-model="chosenAddressId"
@@ -94,7 +52,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/area.md b/docs/markdown/en-US/area.md
similarity index 81%
rename from docs/examples-docs/en-US/area.md
rename to docs/markdown/en-US/area.md
index 0e80231b6fb..f535d2853c0 100644
--- a/docs/examples-docs/en-US/area.md
+++ b/docs/markdown/en-US/area.md
@@ -1,15 +1,3 @@
-<script>
-import AreaList from '../../mock/area.json';
-
-export default {
-  data() {
-    return {
-      areaList: AreaList
-    }
-  }
-};
-</script>
-
 ## Area
 
 ### Install
@@ -26,43 +14,26 @@ Vue.component(Area.name, Area);
 
 要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`Data Structure具体可看下面Data Structure章节。
 
-:::demo Basic Usage
 ```html
-<van-area :area-list="areaList"></van-area>
-
-<script>
-import AreaList from '../../mock/area.json';
-
-export default {
-  data() {
-    return {
-      areaList: AreaList
-    }
-  }
-};
-</script>
+<van-area :areaList="areaList" />
 ```
-:::
 
-#### 选中省市县
+#### Initial Value
 
 如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
 
-:::demo 选中省市县
 ```html
-<van-area :area-list="areaList" value="110101"></van-area>
+<van-area :areaList="areaList" value="110101" />
 ```
-:::
 
-#### 配置显示列
+#### Columns Number
 
 可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
 
-:::demo 配置显示列
 ```html
-<van-area :area-list="areaList" :columns-num="2"></van-area>
+<van-area :areaList="areaList" :columnsNum="2" />
 ```
-:::
+
 
 ### API
 
@@ -115,7 +86,7 @@ export default {
 }
 ```
 
-完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/mock/area.json)
+完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
 
 #### 点击完成时返回的Data Structure
 返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
diff --git a/docs/examples-docs/en-US/badge.md b/docs/markdown/en-US/badge.md
similarity index 74%
rename from docs/examples-docs/en-US/badge.md
rename to docs/markdown/en-US/badge.md
index 2429ed5c5eb..1c4e56b170e 100644
--- a/docs/examples-docs/en-US/badge.md
+++ b/docs/markdown/en-US/badge.md
@@ -1,18 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      activeKey: 0
-    };
-  },
-  methods: {
-    onClick(key) {
-      this.activeKey = key;
-    }
-  }
-};
-</script>
-
 ## Badge
 
 ### Install
@@ -25,11 +10,10 @@ Vue.component(Badge.name, Badge);
 ### Usage
 
 #### Basic Usage
-Use `active-key` prop to set index of chosen 'badge'
+Use `activeKey` prop to set index of chosen 'badge'
 
-:::demo Basic Usage
 ```html
-<van-badge-group :active-key="activeKey">
+<van-badge-group :activeKey="activeKey">
   <van-badge title="Title" @click="onClick"></van-badge>
   <van-badge title="Title" @click="onClick" info="8"></van-badge>
   <van-badge title="Title" @click="onClick" info="99"></van-badge>
@@ -51,13 +35,12 @@ export default {
   }
 };
 ```
-:::
 
 ### BadgeGroup API
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| active-key | Index of chosen badge | `String | Number` | `0` | - |
+| activeKey | Index of chosen badge | `String | Number` | `0` | - |
 
 ### Badge API
 | Attribute | Description | Type | Default | Accepted Values |
diff --git a/docs/examples-docs/en-US/button.md b/docs/markdown/en-US/button.md
similarity index 84%
rename from docs/examples-docs/en-US/button.md
rename to docs/markdown/en-US/button.md
index c43fc0b5056..6b111a17301 100644
--- a/docs/examples-docs/en-US/button.md
+++ b/docs/markdown/en-US/button.md
@@ -11,69 +11,57 @@ Vue.component(Button.name, Button);
 
 #### Type
 
-:::demo Type
 ```html
 <van-button type="default">Default</van-button>
 <van-button type="primary">Primary</van-button>
 <van-button type="danger">Danger</van-button>
 ```
-:::
 
 #### Size
 
-:::demo Size
 ```html 
 <van-button size="large">Large</van-button>
 <van-button size="normal">Normal</van-button>
 <van-button size="small">Small</van-button>
 <van-button size="mini">Mini</van-button>
 ```
-:::
 
 #### Disabled
 
-:::demo Disabled
 ```html
 <van-button disabled>Diabled</van-button>
 ```
-:::
 
 #### Loading
 
-:::demo Loading
 ```html 
 <van-button loading></van-button>
 <van-button loading type="primary"></van-button>
 ```
-:::
 
 #### Custom Tag
 Use `tag` prop to custom button tag
 
-:::demo Custom Tag
 ```html 
 <van-button tag="a" href="https://www.youzan.com" target="_blank">
   Button
 </van-button>
 ```
-:::
 
 #### Action Button
 
-:::demo Action Button
 ```html 
-<van-button type="primary" bottom-action>Text</van-button>
+<van-button type="primary" bottomAction>Button</van-button>
 
 <van-row>
   <van-col span="12">
-    <van-button bottom-action>Text</van-button>
+    <van-button bottomAction>Button</van-button>
   </van-col>
   <van-col span="12">
-    <van-button type="primary" bottom-action>Text</van-button>
+    <van-button type="primary" bottomAction>Button</van-button>
   </van-col>
 </van-row>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/card.md b/docs/markdown/en-US/card.md
similarity index 84%
rename from docs/examples-docs/en-US/card.md
rename to docs/markdown/en-US/card.md
index d16b460fef7..d94c85d71de 100644
--- a/docs/examples-docs/en-US/card.md
+++ b/docs/markdown/en-US/card.md
@@ -1,13 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
-    }
-  }
-}
-</script>
-
 ## Card
 
 ### Install
@@ -21,7 +11,6 @@ Vue.component(Card.name, Card);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-card
   title="Title"
@@ -31,12 +20,10 @@ Vue.component(Card.name, Card);
   :thumb="imageURL"
 />
 ```
-:::
 
 #### Advanced Usage
 Use `slot` to custom content.
 
-:::demo Advanced Usage
 ```html
 <van-card
   title="Title"
@@ -51,7 +38,6 @@ Use `slot` to custom content.
   </div>
 </van-card>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/cell-swipe.md b/docs/markdown/en-US/cell-swipe.md
similarity index 97%
rename from docs/examples-docs/en-US/cell-swipe.md
rename to docs/markdown/en-US/cell-swipe.md
index 6a4f73bd7b2..e54abfa9f19 100644
--- a/docs/examples-docs/en-US/cell-swipe.md
+++ b/docs/markdown/en-US/cell-swipe.md
@@ -11,7 +11,6 @@ Vue.component(CellSwipe.name, CellSwipe);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-cell-swipe :right-width="65" :left-width="65">
   <span slot="left">Select</span>
@@ -21,7 +20,6 @@ Vue.component(CellSwipe.name, CellSwipe);
   <span slot="right">Delete</span>
 </van-cell-swipe>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/cell.md b/docs/markdown/en-US/cell.md
similarity index 68%
rename from docs/examples-docs/en-US/cell.md
rename to docs/markdown/en-US/cell.md
index 0878fb4e0c9..a57c646d107 100644
--- a/docs/examples-docs/en-US/cell.md
+++ b/docs/markdown/en-US/cell.md
@@ -1,13 +1,3 @@
-<script>
-export default {
-  methods: {
-    handleClick() {
-      console.log('cell click');
-    }
-  }
-};
-</script>
-
 ## Cell
 
 ### Install
@@ -22,66 +12,56 @@ Vue.component(CellGroup.name, CellGroup);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-cell-group>
-  <van-cell title="Title" value="Text"></van-cell>
-  <van-cell title="Title" value="Text" label="Description"></van-cell>
+  <van-cell title="Cell title" value="Content"></van-cell>
+  <van-cell title="Cell title" value="Content" label="Description"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### Value only
 
-:::demo Value only
 ```html
 <van-cell-group>
-  <van-cell value="Text"></van-cell>
+  <van-cell value="Content"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### Left Icon
 
-:::demo Left Icon
 ```html
 <van-cell-group>
-  <van-cell title="Title" icon="location"></van-cell>
+  <van-cell title="Cell title" icon="location"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### Link
 
-:::demo Link
 ```html
 <van-cell-group>
-  <van-cell title="Title" is-link></van-cell>
-  <van-cell title="Title" is-link value="Text"></van-cell>
+  <van-cell title="Cell title" is-link></van-cell>
+  <van-cell title="Cell title" is-link value="Content"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### Advanced Usage
 
-:::demo Advanced Usage
 ```html
 <van-cell-group>
-  <van-cell value="Text" icon="shop" is-link>
+  <van-cell value="Content" icon="shop" is-link>
     <template slot="title">
-      <span class="van-cell-text">Title</span>
+      <span class="van-cell-text">Cell title</span>
       <van-tag type="danger">Tag</van-tag>
     </template>
   </van-cell>
-  <van-cell title="Title" icon="location" is-link></van-cell>
-  <van-cell title="Title">
+  <van-cell title="Cell title" icon="location" is-link></van-cell>
+  <van-cell title="Cell title">
     <template slot="right-icon">
       <van-icon name="search" class="van-cell__right-icon"></van-icon>
     </template>
   </van-cell>
 </van-cell-group>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/changelog.md b/docs/markdown/en-US/changelog.md
similarity index 99%
rename from docs/examples-docs/en-US/changelog.md
rename to docs/markdown/en-US/changelog.md
index fee87902c2b..748d6995f6b 100644
--- a/docs/examples-docs/en-US/changelog.md
+++ b/docs/markdown/en-US/changelog.md
@@ -4,12 +4,10 @@
 `2017-11-15`
 
 **Improvements**
-
-- Icon: add new icons [\#315](https://github.com/youzan/vant/pull/315) ([cookfront](https://github.com/cookfront))
+- Icon: add new icons [\#315](https://github.com/youzan/vant/pull/315) [@cookfront](https://github.com/cookfront)
 
 **Bug Fixes**
-
-- Search: fix box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) ([chenjiahan](https://github.com/chenjiahan))
+- Search: fix box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) [@chenjiahan](https://github.com/chenjiahan)
 
 ### [0.10.8](https://github.com/youzan/vant/tree/v0.10.8)
 `2017-11-11`
diff --git a/docs/examples-docs/en-US/checkbox.md b/docs/markdown/en-US/checkbox.md
similarity index 71%
rename from docs/examples-docs/en-US/checkbox.md
rename to docs/markdown/en-US/checkbox.md
index b8937ed2671..ccf2b089c81 100644
--- a/docs/examples-docs/en-US/checkbox.md
+++ b/docs/markdown/en-US/checkbox.md
@@ -1,20 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      checkbox1: true,
-      checkbox2: true,
-      list: [
-        'a',
-        'b',
-        'c'
-      ],
-      result: ['a', 'b']
-    };
-  }
-};
-</script>
-
 ## Checkbox
 
 ### Install
@@ -29,34 +12,29 @@ Vue.component(CheckboxGroup.name, CheckboxGroup);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
-<van-checkbox v-model="checkbox1">Checkbox 1</van-checkbox>
+<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
 ```
 
 ```javascript
 export default {
   data() {
     return {
-      checkbox1: true
+      checked: true
     };
   }
 };
 ```
-:::
 
 #### Disabled
 
-:::demo Disabled
 ```html
-<van-checkbox v-model="checkbox2" disabled>Checkbox 2</van-checkbox>
+<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
 ```
-:::
 
-#### CheckboxGroup
+#### Checkbox Group
 When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
 
-:::demo CheckboxGroup
 ```html
 <van-checkbox-group v-model="result">
   <van-checkbox
@@ -76,42 +54,22 @@ export default {
       list: ['a', 'b', 'c'],
       result: ['a', 'b']
     };
-  },
-
-  watch: {
-    result(val) {
-      console.log(val);
-    }
   }
 };
 ```
-:::
 
 #### Inside a Cell
 
-:::demo Inside a Cell
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
     <van-cell v-for="(item, index) in list" :key="index">
-      <van-checkbox :name="item">Checkbox{{ item }}</van-checkbox>
+      <van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      list: ['a', 'b', 'c'],
-      result: ['a', 'b']
-    };
-  }
-};
-```
-:::
-
 ### Checkbox API
 
 | Attribute | Description | Type | Default | Accepted Values |
diff --git a/docs/examples-docs/en-US/contact.md b/docs/markdown/en-US/contact.md
similarity index 74%
rename from docs/examples-docs/en-US/contact.md
rename to docs/markdown/en-US/contact.md
index 5ac30d1df5f..3ad57d9aaaf 100644
--- a/docs/examples-docs/en-US/contact.md
+++ b/docs/markdown/en-US/contact.md
@@ -1,71 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      chosenContactId: null,
-      editingContact: {},
-      showList: false,
-      showEdit: false,
-      isEdit: false,
-      list: [{
-        name: '张三',
-        tel: '13000000000',
-        id: 0
-      }]
-    };
-  },
-
-  computed: {
-    cardType() {
-      return this.chosenContactId !== null ? 'edit' : 'add';
-    },
-
-    currentContact() {
-      const id = this.chosenContactId;
-      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
-    }
-  },
-
-  methods: {
-    onAdd() {
-      this.editingContact = { id: this.list.length };
-      this.isEdit = false;
-      this.showEdit = true;
-    },
-
-    onEdit(item) {
-      this.isEdit = true;      
-      this.showEdit = true;
-      this.editingContact = item;
-    },
-
-    onSelect() {
-      this.showList = false;
-    },
-
-    onSave(info) {
-      this.showEdit = false;
-      this.showList = false;
-      
-      if (this.isEdit) {
-        this.list = this.list.map(item => item.id === info.id ? info : item);
-      } else {
-        this.list.push(info);
-      }
-      this.chosenContactId = info.id;
-    },
-
-    onDelete(info) {
-      this.showEdit = false;
-      this.list = this.list.filter(item => item.id !== info.id);
-      if (this.chosenContactId === info.id) {
-        this.chosenContactId = null;
-      }
-    }
-  }
-};
-</script>
-
 ## Contact
 通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
 
@@ -82,7 +14,7 @@ Vue.component(ContactEdit.name, ContactEdit);
 
 #### Basic Usage
 
-:::demo Basic Usage
+
 ```html
 <!-- 联系人卡片 -->
 <van-contact-card
@@ -90,7 +22,7 @@ Vue.component(ContactEdit.name, ContactEdit);
   :name="currentContact.name"
   :tel="currentContact.tel"
   @click="showList = true"
-></van-contact-card>
+/>
 
 <!-- 联系人列表 -->
 <van-popup v-model="showList" position="bottom">
@@ -106,8 +38,8 @@ Vue.component(ContactEdit.name, ContactEdit);
 <!-- 联系人编辑 -->
 <van-popup v-model="showEdit" position="bottom">
   <van-contact-edit
-    :contact-info="editingContact"
-    :is-edit="isEdit"
+    :contactInfo="editingContact"
+    :isEdit="isEdit"
     @save="onSave"
     @delete="onDelete"
   />
@@ -186,7 +118,7 @@ export default {
   }
 };
 ```
-:::
+
 
 ### ContactCard API
 | Attribute | Description | Type | Default | Accepted Values |
diff --git a/docs/examples-docs/en-US/coupon.md b/docs/markdown/en-US/coupon.md
similarity index 72%
rename from docs/examples-docs/en-US/coupon.md
rename to docs/markdown/en-US/coupon.md
index 87658c4fd81..50a0b8252f5 100644
--- a/docs/examples-docs/en-US/coupon.md
+++ b/docs/markdown/en-US/coupon.md
@@ -1,63 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-const coupon = {
-  available: 1,
-  discount: 0,
-  denominations: 150,
-  origin_condition: 0,
-  reason: '',
-  value: 150,
-  condition: '下单立减 1.50 元',
-  name: '新手专用优惠券',
-  start_at: 1489104000,
-  end_at: 1514592000
-};
-
-const discountCoupon = {
-  ...coupon,
-  discount: 88,
-  denominations: 0,
-  origin_condition: 50,
-  value: 12,
-  condition: '下单即享 8.8 折',
-};
-
-const disabledCoupon = {
-  ...coupon,
-  avaliable: 0,
-  reason: '未满足使用门槛'
-};
-
-const disabledDiscountCoupon = {
-  ...discountCoupon,
-  avaliable: 0,
-  reason: '未满足使用门槛'
-};
-
-export default {
-  data() {
-    return {
-      showList: false,
-      chosenCoupon: -1,
-      coupons: [coupon, discountCoupon],
-      disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
-    }
-  },
-
-  methods: {
-    onChange(index) {
-      this.showList = false;      
-      this.chosenCoupon = index;
-    },
-    onExchange(code) {
-      Toast('兑换成功');
-      this.coupons.push(coupon);
-    }
-  }
-}
-</script>
-
 ## Coupon
 
 ### Install
@@ -72,24 +12,23 @@ Vue.component(CouponList.name, CouponList);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <!-- 优惠券单元格 -->
 <van-coupon-cell
   :coupons="coupons"
-  :chosen-coupon="chosenCoupon"
+  :chosenCoupon="chosenCoupon"
   @click="showList = true"
-></van-coupon-cell>
+/>
 
 <!-- 优惠券列表 -->
 <van-popup v-model="showList" position="bottom">
   <van-coupon-list
     :coupons="coupons"
-    :chosen-coupon="chosenCoupon"
-    :disabled-coupons="disabledCoupons"
+    :chosenCoupon="chosenCoupon"
+    :disabledCoupons="disabledCoupons"
     @change="onChange"
     @exchange="onExchange"
-  ></van-coupon-list>
+  />
 </van-popup>
 ```
 
@@ -127,7 +66,6 @@ export default {
   }
 }
 ```
-:::
 
 ### CouponCell API
 
diff --git a/docs/examples-docs/en-US/datetime-picker.md b/docs/markdown/en-US/datetime-picker.md
similarity index 74%
rename from docs/examples-docs/en-US/datetime-picker.md
rename to docs/markdown/en-US/datetime-picker.md
index 0abf3590a46..7f3299f312b 100644
--- a/docs/examples-docs/en-US/datetime-picker.md
+++ b/docs/markdown/en-US/datetime-picker.md
@@ -1,21 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      minHour: 10,
-      maxHour: 20,
-      minDate: new Date(),
-      maxDate: new Date(2019, 10, 1),
-      currentDate1: new Date(2018, 0, 1),
-      currentDate2: null,
-      currentDate3: null
-    };
-  }
-};
-</script>
-
 ## DatetimePicker
 
 ### Install
@@ -29,15 +11,14 @@ Vue.component(DatetimePicker.name, DatetimePicker);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-datetime-picker
-  v-model="currentDate1"
+  v-model="currentDate"
   type="datetime"
-  :min-hour="minHour"
-  :max-hour="maxHour"
-  :min-date="minDate"
-  :max-date="maxDate"
+  :minHour="minHour"
+  :maxHour="maxHour"
+  :minDate="minDate"
+  :maxDate="maxDate"
 />
 ```
 
@@ -54,25 +35,21 @@ export default {
   }
 };
 ```
-:::
 
 #### Date Picker
 
-:::demo Date Picker
 ```html
 <van-datetime-picker
-  v-model="currentDate2"
+  v-model="currentDate"
   type="date"
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
 />
 ```
-:::
 
 #### Time Picker
 
-:::demo Time Picker
 ```html
 <van-datetime-picker
   v-model="currentDate3"
@@ -82,8 +59,6 @@ export default {
   :min-date="minDate"
 />
 ```
-:::
-
 
 ### API
 
diff --git a/docs/markdown/en-US/dialog.md b/docs/markdown/en-US/dialog.md
new file mode 100644
index 00000000000..82063a860f0
--- /dev/null
+++ b/docs/markdown/en-US/dialog.md
@@ -0,0 +1,63 @@
+## Dialog
+
+### Install
+
+```js
+import { Dialog } from 'vant';
+```
+
+### Usage
+
+#### Alert dialog
+Used to prompt for some messages, only including one confirm button
+
+```javascript
+Dialog.alert({
+  title: 'Title',
+  message: 'Content'
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: 'Content'
+}).then(() => {
+  // on close
+});
+```
+
+#### Confirm dialog
+Used to confirm some messages, including a confirm button and a cancel button
+
+```javascript
+ Dialog.confirm({
+  title: 'Title',
+  message: 'Content'
+}).then(() => {
+  // on confirm
+}).catch(() => {
+  // on cancel
+});
+```
+
+### Methods
+
+| Name | Attribute | Return value | Description |
+|-----------|-----------|-----------|-------------|
+| Dialog.alert | options | `Promise` | Show alert dialog |
+| Dialog.confirm | options | `Promise` | Show confim dialog |
+| Dialog.close | - | `void` | Close dialog |
+
+### Options
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Title | `String` | - | - |
+| message | Message | `String` | - | - |
+| showConfirmButton | Whether to show confirm button | `Boolean` |  `true` | - |
+| showCancelButton | Whether to show cancel button | `Boolean` |  `false` | - |
+| confirmButtonText | Confirm button text | `String` |  `Confirm` | - |
+| cancelButtonText | Cancel button test | `String` | `Cancel` | - |
+| overlay | Whether to show overlay | `Boolean` | `true` | - |
+| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
+| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |
diff --git a/docs/examples-docs/en-US/field.md b/docs/markdown/en-US/field.md
similarity index 87%
rename from docs/examples-docs/en-US/field.md
rename to docs/markdown/en-US/field.md
index 12be8de48ee..4ae0c35307b 100644
--- a/docs/examples-docs/en-US/field.md
+++ b/docs/markdown/en-US/field.md
@@ -1,16 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      password: '',
-      username: '',
-      message: ''
-    };
-  }
-};
-</script>
-
 ## Field
 
 ### Install
@@ -25,18 +12,15 @@ Vue.component(Field.name, Field);
 #### Basic Usage
 The value of filed is bound with v-model.
 
-:::demo Basic Usage
 ```html
 <van-cell-group>
   <van-field v-model="value" placeholder="Username"></van-field>
 </van-cell-group>
 ```
-:::
 
-#### Custom Type
+#### Custom type
 Use `type` prop to custom diffrent type fileds.
 
-:::demo Custom Type
 ```html
 <van-cell-group>
   <van-field
@@ -58,32 +42,26 @@ Use `type` prop to custom diffrent type fileds.
   </van-field>
 </van-cell-group>
 ```
-:::
 
 #### Disabled
 
-:::demo Disabled
 ```html
 <van-cell-group>
   <van-field value="Disabled" label="Username" disabled></van-field>
 </van-cell-group>
 ```
-:::
 
-#### Error Info
+#### Error info
 
-:::demo Error Info
 ```html
 <van-cell-group>
   <van-field label="Username" placeholder="Username" error></van-field>
 </van-cell-group>
 ```
-:::
 
 #### Auto resize
 Textarea Filed can be auto resize when has `autosize` prop
 
-:::demo Auto resize
 ```html
 <van-cell-group>
   <van-field
@@ -97,7 +75,6 @@ Textarea Filed can be auto resize when has `autosize` prop
   </van-field>
 </van-cell-group>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/goods-action.md b/docs/markdown/en-US/goods-action.md
similarity index 87%
rename from docs/examples-docs/en-US/goods-action.md
rename to docs/markdown/en-US/goods-action.md
index bd62aa34472..b5cd451f894 100644
--- a/docs/examples-docs/en-US/goods-action.md
+++ b/docs/markdown/en-US/goods-action.md
@@ -1,18 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  methods: {
-    onClickMiniBtn() {
-      Toast('点击图标');
-    },
-    onClickBigBtn() {
-      Toast('点击按钮');
-    }
-  }
-}
-</script>
-
 ## GoodsAction
 
 ### Install
@@ -30,7 +15,7 @@ Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
 
 ### Usage
 
-:::demo 
+
 ```html
 <van-goods-action>
   <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
@@ -60,7 +45,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/markdown/en-US/icon.md b/docs/markdown/en-US/icon.md
new file mode 100644
index 00000000000..ab24205fe67
--- /dev/null
+++ b/docs/markdown/en-US/icon.md
@@ -0,0 +1,23 @@
+## Icon
+
+### Install
+``` javascript
+import { Icon } from 'vant';
+
+Vue.component(Icon.name, Icon);
+```
+
+### Usage
+
+#### Basic Usage
+View all usable icons on the right.
+
+```html
+<van-icon name="success" />
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| name | Icon name | `String` | `''` | - |
diff --git a/docs/markdown/en-US/image-preview.md b/docs/markdown/en-US/image-preview.md
new file mode 100644
index 00000000000..5fa8bd5552d
--- /dev/null
+++ b/docs/markdown/en-US/image-preview.md
@@ -0,0 +1,32 @@
+## ImagePreview
+
+### Install
+
+```js
+import { ImagePreview } from 'vant';
+```
+
+### Usage
+
+#### Basic Usage
+
+```javascript
+ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+]);
+```
+
+#### Custom Start Position
+```javascript
+ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+], 1);
+```
+
+### Arguments
+
+| Attribute | Description | Type |
+|-----------|-----------|-----------|
+| imageUrls | Image URL list | `Array` |
diff --git a/docs/examples-docs/en-US/layout.md b/docs/markdown/en-US/layout.md
similarity index 97%
rename from docs/examples-docs/en-US/layout.md
rename to docs/markdown/en-US/layout.md
index 5095cb84701..0a65a42f412 100644
--- a/docs/examples-docs/en-US/layout.md
+++ b/docs/markdown/en-US/layout.md
@@ -16,7 +16,7 @@ Vue.component(Col.name, Col);
 
 Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
 
-:::demo Basic Usage
+
 ```html
 <van-row>
   <van-col span="8">span: 8</van-col>
@@ -34,13 +34,13 @@ Layout are based on 24-column. The attribute `span` in `Col` means the number of
   <van-col offset="12" span="12">offset: 12, span: 12</van-col>
 </van-row>
 ```
-:::
+
 
 #### Column Spacing
 
 Set grid spacing using `gutter` attribute. The default value is 0
 
-:::demo Column Spacing
+
 ```html
 <van-row gutter="20">
   <van-col span="8">span: 8</van-col>
@@ -48,7 +48,7 @@ Set grid spacing using `gutter` attribute. The default value is 0
   <van-col span="8">span: 8</van-col>
 </van-row>
 ```
-:::
+
 
 ### API
 
diff --git a/docs/examples-docs/en-US/lazyload.md b/docs/markdown/en-US/lazyload.md
similarity index 79%
rename from docs/examples-docs/en-US/lazyload.md
rename to docs/markdown/en-US/lazyload.md
index 0d876e0f168..3a22a27e999 100644
--- a/docs/examples-docs/en-US/lazyload.md
+++ b/docs/markdown/en-US/lazyload.md
@@ -42,7 +42,6 @@ Vue.use(Lazyload, options);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <img v-for="img in imageList" v-lazy="img">
 ```
@@ -59,53 +58,22 @@ export default {
   }
 }
 ```
-:::
 
-#### Background Image
+#### Lazyload Background Image
 Use `v-lazy:background-image` to set background url, and declare the height of the container.
 
-:::demo Background Image
 ```html
-<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
+<div v-for="img in imageList" v-lazy:background-image="img" />
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      backgroundImageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
 #### Lazyload Component
 
-:::demo Lazyload Component
 ```html
 <lazy-component>
-  <img v-for="img in componentImageList" v-lazy="img">
+  <img v-for="img in imageList" v-lazy="img">
 </lazy-component>
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      componentImageList: [
-        'https://img.yzcdn.cn/1.jpg',
-        'https://img.yzcdn.cn/2.jpg'
-      ]
-    };
-  }
-}
-```
-:::
-
 ### Options
 
 | Attribute | Description | Type | Default | Accepted Values |
diff --git a/docs/examples-docs/en-US/loading.md b/docs/markdown/en-US/loading.md
similarity index 52%
rename from docs/examples-docs/en-US/loading.md
rename to docs/markdown/en-US/loading.md
index 0f4348d9cc7..d9c03cac8bd 100644
--- a/docs/examples-docs/en-US/loading.md
+++ b/docs/markdown/en-US/loading.md
@@ -11,30 +11,24 @@ Vue.component(Loading.name, Loading);
 
 #### Solid Circle
 
-:::demo Solid Circle
 ```html
-<van-loading type="circle" color="black"></van-loading>
-<van-loading type="circle" color="white"></van-loading>
+<van-loading type="circle" color="black" />
+<van-loading type="circle" color="white" />
 ```
-:::
 
 #### Gradient Circle
 
-:::demo Gradient Circle
 ```html
-<van-loading type="gradient-circle" color="black"></van-loading>
-<van-loading type="gradient-circle" color="white"></van-loading>
+<van-loading type="gradient-circle" color="black" />
+<van-loading type="gradient-circle" color="white" />
 ```
-:::
 
 #### Spinner
 
-:::demo Spinner
 ```html
-<van-loading type="spinner" color="black"></van-loading>
-<van-loading type="spinner" color="white"></van-loading>
+<van-loading type="spinner" color="black" />
+<van-loading type="spinner" color="white" />
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/nav-bar.md b/docs/markdown/en-US/nav-bar.md
similarity index 67%
rename from docs/examples-docs/en-US/nav-bar.md
rename to docs/markdown/en-US/nav-bar.md
index 753fddb5588..27425dd402f 100644
--- a/docs/examples-docs/en-US/nav-bar.md
+++ b/docs/markdown/en-US/nav-bar.md
@@ -11,35 +11,31 @@ Vue.component(NavBar.name, NavBar);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-nav-bar
   title="Title"
-  left-text="Back"
-  right-text="Button"
-  left-arrow
+  leftText="Back"
+  rightText="Button"
+  leftArrow
 />
 ```
-:::
 
 #### Advanced Usage
 
-:::demo Advanced Usage
 ```html
-<van-nav-bar title="Title" left-text="Back" left-arrow>
+<van-nav-bar title="Title" leftText="Back" leftArrow>
   <van-icon name="search" slot="right" />
 </van-nav-bar>
 ```
-:::
 
 
 ### API
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | title | Title | `String` | `''` | - |
-| left-text | Left Text | `String` | `''` | - |
-| right-text | Right Text | `String` | `''` | - |
-| left-arrow | Whether to show left arrow | `Boolean` | `false` | - |
+| leftText | Left Text | `String` | `''` | - |
+| rightText | Right Text | `String` | `''` | - |
+| leftArrow | Whether to show left arrow | `Boolean` | `false` | - |
 | fixed | Whether to fixed top | `Boolean` | `false` | - |
 
 ### Slot
diff --git a/docs/examples-docs/en-US/notice-bar.md b/docs/markdown/en-US/notice-bar.md
similarity index 90%
rename from docs/examples-docs/en-US/notice-bar.md
rename to docs/markdown/en-US/notice-bar.md
index a8511ede101..d088579fb8a 100644
--- a/docs/examples-docs/en-US/notice-bar.md
+++ b/docs/markdown/en-US/notice-bar.md
@@ -11,28 +11,23 @@ Vue.component(NoticeBar.name, NoticeBar);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-notice-bar
   text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
-  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+  leftIcon="https://img.yzcdn.cn/1.png"
 />
 ```
-:::
 
 #### Disable scroll
 
-:::demo Disable scroll
 ```html
 <van-notice-bar :scrollable="false">
   Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
 </van-notice-bar>
 ```
-:::
 
 #### Mode
 
-:::demo Mode
 ```html
 <van-notice-bar mode="closeable">
   Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
@@ -42,7 +37,6 @@ Vue.component(NoticeBar.name, NoticeBar);
   Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
 </van-notice-bar>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/number-keyboard.md b/docs/markdown/en-US/number-keyboard.md
similarity index 82%
rename from docs/examples-docs/en-US/number-keyboard.md
rename to docs/markdown/en-US/number-keyboard.md
index b718f2807fd..f4c065fc063 100644
--- a/docs/examples-docs/en-US/number-keyboard.md
+++ b/docs/markdown/en-US/number-keyboard.md
@@ -1,24 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  data() {
-    return {
-      showKeyboard: true
-    }
-  },
-
-  methods: {
-    onInput(value) {
-      Toast('Input: ' + value);
-    },
-    onDelete() {
-      Toast('Delete');
-    }
-  }
-}
-</script>
-
 ## NumberKeyboard
 
 ### Install
@@ -32,14 +11,13 @@ Vue.component(NumberKeyboard.name, NumberKeyboard);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-button @touchstart.native.stop="showKeyboard = true">
-  ShowKeyboard
+  Show Keyboard
 </van-button>
 
 <van-button @touchstart.native.stop="showKeyboard = false">
-  HideKeyboard
+  Hide Keyboard
 </van-button>
 
 <van-number-keyboard
@@ -68,8 +46,6 @@ export default {
   }
 }
 ```
-:::
-
 
 ### API
 
diff --git a/docs/examples-docs/en-US/panel.md b/docs/markdown/en-US/panel.md
similarity index 89%
rename from docs/examples-docs/en-US/panel.md
rename to docs/markdown/en-US/panel.md
index 7bd4b1e0b3c..00e168d8ba0 100644
--- a/docs/examples-docs/en-US/panel.md
+++ b/docs/markdown/en-US/panel.md
@@ -11,27 +11,23 @@ Vue.component(Panel.name, Panel);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-panel title="Title" desc="Description" status="Status">
-  <div>Panel Content</div>
+  <div>Content</div>
 </van-panel>
 ```
-:::
 
 #### Advanced Usage
 
-:::demo Advanced Usage
 ```html
 <van-panel title="Title" desc="Description" status="Status">
-  <div>Panel Content</div>
+  <div>Content</div>
   <div slot="footer">
     <van-button size="small">Button</van-button>
     <van-button size="small" type="danger">Button</van-button>
   </div>
 </van-panel>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/password-input.md b/docs/markdown/en-US/password-input.md
similarity index 95%
rename from docs/examples-docs/en-US/password-input.md
rename to docs/markdown/en-US/password-input.md
index 3671faf6493..ff46c37f8a3 100644
--- a/docs/examples-docs/en-US/password-input.md
+++ b/docs/markdown/en-US/password-input.md
@@ -33,14 +33,13 @@ Vue.component(NumberKeyBoard.name, NumberKeyBoard);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <!-- PasswordInput -->
 <van-password-input
   :value="value"
   info="Some tips"
   @focus="showKeyboard = true"
-></van-password-input>
+/>
 
 <!-- NumberKeyboard -->
 <van-number-keyboard
@@ -48,7 +47,7 @@ Vue.component(NumberKeyBoard.name, NumberKeyBoard);
   @input="onInput"
   @delete="onDelete"
   @blur="showKeyboard = false"
-></van-number-keyboard>
+/>
 ```
 
 ```javascript
@@ -57,7 +56,7 @@ export default {
     return {
       value: '',
       showKeyboard: true
-    }
+    };
   },
 
   methods: {
@@ -70,7 +69,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/picker.md b/docs/markdown/en-US/picker.md
similarity index 68%
rename from docs/examples-docs/en-US/picker.md
rename to docs/markdown/en-US/picker.md
index b9cfdca2f89..cd823e513e6 100644
--- a/docs/examples-docs/en-US/picker.md
+++ b/docs/markdown/en-US/picker.md
@@ -1,42 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-const states = {
-  'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
-  'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
-};
-
-export default {
-  data() {
-    return {
-      title: 'Title',
-      pickerColumns: [
-        {
-          values: Object.keys(states),
-          className: 'column1'
-        },
-        {
-          values: states.Group1,
-          className: 'column2'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    handlePickerChange(picker, values) {
-      picker.setColumnValues(1, states[values[0]]);
-    },
-    handlePickerCancel() {
-      Toast('Cancel');
-    },
-    handlePickerConfirm() {
-      Toast('Confirm');
-    }
-  }
-};
-</script>
-
 ## Picker
 
 ### Install
@@ -50,9 +11,9 @@ Vue.component(Picker.name, Picker);
 
 #### Basic Usage
 
-:::demo Basic Usage
+
 ```html
-<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
+<van-picker :columns="pickerColumns" @change="onChange" />
 ```
 
 ```javascript
@@ -78,26 +39,25 @@ export default {
   },
 
   methods: {
-    handlePickerChange(picker, values) {
+    onChange(picker, values) {
       picker.setColumnValues(1, citys[values[0]]);
     }
   }
 };
 ```
-:::
+
 
 #### Picker with toolbar
 
-:::demo Picker with toolbar
 ```html
 <van-picker
-  show-toolbar
+  showToolbar
   :title="title"
   :columns="pickerColumns"
-  @change="handlePickerChange"
-  @cancel="handlePickerCancel"
-  @confirm="handlePickerConfirm"
-></van-picker>
+  @change="onChange"
+  @cancel="onCancel"
+  @confirm="onConfirm"
+/>
 ```
 
 ```javascript
@@ -124,19 +84,18 @@ export default {
   },
 
   methods: {
-    handlePickerChange(picker, values) {
+    onChange(picker, values) {
       picker.setColumnValues(1, citys[values[0]]);
     },
-    handlePickerCancel() {
+    onCancel() {
       Toast('Cancel');
     },
-    handlePickerConfirm() {
+    onConfirm() {
       Toast('Confirm');
     }
   }
 };
 ```
-:::
 
 ### API
 
diff --git a/docs/markdown/en-US/popup.md b/docs/markdown/en-US/popup.md
new file mode 100644
index 00000000000..5e14339c6cd
--- /dev/null
+++ b/docs/markdown/en-US/popup.md
@@ -0,0 +1,48 @@
+## Popup
+
+### Install
+``` javascript
+import { Popup } from 'vant';
+
+Vue.component(Popup.name, Popup);
+```
+
+### Usage
+
+#### Basic Usage
+Popup is located in the middle of the screen by default
+
+```html
+<van-popup v-model="show">Content</van-popup>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false
+    }
+  }
+};
+```
+
+#### Position
+Use `position` prop to set popup display position
+
+```html
+<van-popup v-model="show" position="top" :overlay="false">
+  Content
+</van-popup>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Whether to show popup | `Boolean` | `false` | - |
+| overlay | Whether to show overlay | `Boolean` | `true` | - |
+| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
+| position | Position | `String` | - | `top` `bottom` `right` `left` |
+| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
+| transition | Transition | `String` | `popup-slide` | - |
+| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
diff --git a/docs/examples-docs/en-US/progress.md b/docs/markdown/en-US/progress.md
similarity index 51%
rename from docs/examples-docs/en-US/progress.md
rename to docs/markdown/en-US/progress.md
index f0a6a4fe2df..830dc792e36 100644
--- a/docs/examples-docs/en-US/progress.md
+++ b/docs/markdown/en-US/progress.md
@@ -12,36 +12,30 @@ Vue.component(Progress.name, Progress);
 #### Basic Usage
 Use 'percentage' prop to set current progress
 
-:::demo Basic Usage
 ```html
-<van-progress :percentage="0"></van-progress>
-<van-progress :percentage="46"></van-progress>
-<van-progress :percentage="100"></van-progress>
+<van-progress :percentage="0" />
+<van-progress :percentage="46" />
+<van-progress :percentage="100" />
 ```
-:::
 
 
 #### Inactive
 
-:::demo Inactive
 ```html
-<van-progress inactive :percentage="0"></van-progress>
-<van-progress inactive :percentage="46"></van-progress>
-<van-progress inactive :percentage="100"></van-progress>
+<van-progress inactive :percentage="0" />
+<van-progress inactive :percentage="46" />
+<van-progress inactive :percentage="100" />
 ```
-:::
 
 
 #### Custom Style
-Use `pivot-text` to custom text，use `color` to custom bar color
+Use `pivotText` to custom text，use `color` to custom bar color
 
-:::demo Custom Style
 ```html
-<van-progress pivot-text="Red" color="#ed5050" :percentage="26"></van-progress>
-<van-progress pivot-text="Orange" color="#f60" :percentage="46"></van-progress>
-<van-progress pivot-text="Yellow" color="#f09000" :percentage="66"></van-progress>
+<van-progress pivotText="Red" color="#ed5050" :percentage="26" />
+<van-progress pivotText="Orange" color="#f60" :percentage="46" />
+<van-progress pivotText="Yellow" color="#f09000" :percentage="66" />
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/pull-refresh.md b/docs/markdown/en-US/pull-refresh.md
similarity index 73%
rename from docs/examples-docs/en-US/pull-refresh.md
rename to docs/markdown/en-US/pull-refresh.md
index e68df4985c6..45d1ab0d3fc 100644
--- a/docs/examples-docs/en-US/pull-refresh.md
+++ b/docs/markdown/en-US/pull-refresh.md
@@ -1,33 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  data() {
-    return {
-      count: 0,
-      isLoading: false
-    }
-  },
-
-  watch: {
-    isLoading() {
-      if (this.isLoading) {
-        setTimeout(() => {
-          Toast('Refresh Success');
-          this.isLoading = false;
-          this.count++;
-        }, 500);
-      }
-    }
-  },
-
-  mounted() {
-    const head = document.querySelector('.van-pull-refresh__head');
-    head.insertAdjacentHTML('afterend', '<h1 class="zan-doc-demo-block__title">PullRefresh</h1>');
-  }
-}
-</script>
-
 ## PullRefresh
 
 ### Install
@@ -39,7 +9,6 @@ Vue.component(PullRefresh.name, PullRefresh);
 
 ### Usage
 
-:::demo  
 ```html
 <!-- use v-model to control loading status -->
 <van-pull-refresh
@@ -74,7 +43,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/quickstart.md b/docs/markdown/en-US/quickstart.md
similarity index 100%
rename from docs/examples-docs/en-US/quickstart.md
rename to docs/markdown/en-US/quickstart.md
diff --git a/docs/examples-docs/en-US/radio.md b/docs/markdown/en-US/radio.md
similarity index 53%
rename from docs/examples-docs/en-US/radio.md
rename to docs/markdown/en-US/radio.md
index f6f019bab20..aab646c4094 100644
--- a/docs/examples-docs/en-US/radio.md
+++ b/docs/markdown/en-US/radio.md
@@ -1,16 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      radio1: '1',
-      radio2: '2',
-      radio3: '1',
-      radio4: '1'
-    };
-  }
-};
-</script>
-
 ## Radio
 
 ### Install
@@ -25,74 +12,43 @@ Vue.component(Radio.name, Radio);
 #### Basic Usage
 Use `v-model` to bind check status of radio. The value will be set to the name of radio when radio get checked.
 
-:::demo Basic Usage
 ```html
-<div class="van-radios">
-  <van-radio name="1" v-model="radio1">Radio 1</van-radio>
-  <van-radio name="2" v-model="radio1">Radio 2</van-radio>
-</div>
+<van-radio name="1" v-model="radio">Radio 1</van-radio>
+<van-radio name="2" v-model="radio">Radio 2</van-radio>
 ```
+
 ```javascript
 export default {
   data() {
     return {
-      radio1: '1'
+      radio: '1'
     }
   }
 };
 ```
-:::
 
 #### Disabled
 
-:::demo Disabled
 ```html
-<div class="van-radios">
-  <van-radio name="1" v-model="radio2" disabled>Disabled</van-radio>
-  <van-radio name="2" v-model="radio2" disabled>Disabled and checked</van-radio>
-</div>
+<van-radio name="1" v-model="radio" disabled>Disabled</van-radio>
+<van-radio name="2" v-model="radio" disabled>Disabled and checked</van-radio>
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      radio2: '2'
-    }
-  }
-};
-```
-:::
 
-#### RadioGroup
+#### Radio Group
 When Radios are inside a RadioGroup, the checked radio's name is bound with CheckboxGroup by `v-model`.
 
-:::demo RadioGroup
 ```html
-<div class="van-radios">
-  <van-radio-group v-model="radio3">
-    <van-radio name="1">Radio 1</van-radio>
-    <van-radio name="2">Radio 2</van-radio>
-  </van-radio-group>
-</div>
-```
-  
-```javascript
-export default {
-  data() {
-    return {
-      radio3: '1'
-    }
-  }
-};
+<van-radio-group v-model="radio">
+  <van-radio name="1">Radio 1</van-radio>
+  <van-radio name="2">Radio 2</van-radio>
+</van-radio-group>
 ```
-:::
 
-#### With Cell
+#### Inside a Cell
 
-:::demo With Cell
 ```html
-<van-radio-group v-model="radio4">
+<van-radio-group v-model="radio">
   <van-cell-group>
     <van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
     <van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
@@ -100,17 +56,6 @@ export default {
 </van-radio-group>
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      radio4: '1'
-    }
-  }
-};
-```
-:::
-
 ### Radio API
 
 | Attribute | Description | Type | Default | Accepted Values |
diff --git a/docs/examples-docs/en-US/search.md b/docs/markdown/en-US/search.md
similarity index 81%
rename from docs/examples-docs/en-US/search.md
rename to docs/markdown/en-US/search.md
index 2509ee80a98..8462c75125c 100644
--- a/docs/examples-docs/en-US/search.md
+++ b/docs/markdown/en-US/search.md
@@ -1,24 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      value: '',
-    };
-  },
-
-  methods: {
-    onSearch() {
-      Toast(this.value);
-    },
-    onCancel() {
-      Toast('cancel');
-    }
-  }
-};
-</script>
-
 ## Search
 
 ### Install
@@ -32,7 +11,6 @@ Vue.component(Search.name, Search);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-search placeholder="Placeholder" v-model="value" />
 ```
@@ -44,7 +22,6 @@ export default {
   }
 }
 ```
-:::
 
 #### Listen to Events
 `search` event will be triggered when click the search button on the keyboard.
@@ -53,33 +30,29 @@ export default {
 
 Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
 
-:::demo Listen to Events
 ```html
 <form action="/">
   <van-search
     v-model="value"
     placeholder="Placeholder"
-    :show-action="true"
+    :showAction="true"
     @search="onSearch"
     @cancel="onCancel">
   </van-search>
 </form>
 ```
-:::
 
 #### Custom Button
 Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
 
-:::demo Custom Button
 ```html
 <van-search
   v-model="value"
-  :show-action="true"
+  :showAction="true"
   @search="onSearch">
   <div slot="action" @click="onSearch">Search</div>
 </van-search>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/sku.md b/docs/markdown/en-US/sku.md
similarity index 66%
rename from docs/examples-docs/en-US/sku.md
rename to docs/markdown/en-US/sku.md
index db38c031f30..77ac19c1e68 100644
--- a/docs/examples-docs/en-US/sku.md
+++ b/docs/markdown/en-US/sku.md
@@ -1,44 +1,5 @@
 ## Sku
 
-<script>
-import data from '../../mock/sku';
-
-const goods = data.goods_info;
-goods.picture = goods.picture[0];
-
-export default {
-  data() {
-    return {
-      showBase: false,
-      showCustomAction: false,
-      sku: data.sku,
-      goods: goods,
-      goodsId: data.goods_id,
-      quota: data.quota,
-      quotaUsed: data.quota_used,
-      disableStepperInput: true,
-      resetStepperOnHide: true,
-      initialSku: {
-        s1: '30349',
-        s2: '1193'
-      }
-    }
-  },
-
-  methods: {
-    handleBuyClicked(data) {
-      alert(JSON.stringify(data));
-    },
-    handleAddCartClicked(data) {
-      alert(JSON.stringify(data));
-    },
-    handlePointClicked() {
-      alert('积分兑换');
-    }
-  }
-}
-</script>
-
 ### Install
 ```javascript
 import { Sku } from 'vant';
@@ -48,70 +9,57 @@ Vue.component(Sku.name, Sku);
 
 ### Usage
 #### Basic Usage
-:::demo 
+
 ```html
-<template>
-  <div class="sku-container">
-    <van-sku
-      v-model="showBase"
-      :sku="sku"
-      :goods="goods"
-      :goods-id="goodsId"
-      :hide-stock="sku.hide_stock"
-      :quota="quota"
-      :quota-used="quotaUsed"
-      :reset-stepper-on-hide="resetStepperOnHide"
-      :disable-stepper-input="disableStepperInput"
-      @buy-clicked="handleBuyClicked"
-      @add-cart="handleAddCartClicked"
-    >
-    </van-sku>
-    <van-button type="primary" @click="showBase = true" block>基础用法</van-button>
-  </d>
-</template>
+<van-sku
+  v-model="showBase"
+  :sku="sku"
+  :goods="goods"
+  :goodsId="goodsId"
+  :hideStock="sku.hide_stock"
+  :quota="quota"
+  :quotaUsed="quotaUsed"
+  :resetStepperOnHide="resetStepperOnHide"
+  :disableStepperInput="disableStepperInput"
+  @buy-clicked="handleBuyClicked"
+  @add-cart="handleAddCartClicked"
+/>
 ```
-:::
 
-#### 自定义sku slot区块
-:::demo 
+#### 自定义 sku slot 区块
+
 ```html
-<template>
-  <div class="sku-container">
-    <van-sku
-      v-model="showCustomAction"
-      stepper-title="我要买"
-      :sku="sku"
-      :goods="goods"
-      :goods-id="goodsId"
-      :hide-stock="sku.hide_stock"
-      :show-add-cart-btn="true"
-      :quota="quota"
-      :quota-used="quotaUsed"
-      :reset-stepper-on-hide="true"
-      :initial-sku="initialSku"
-      @buy-clicked="handleBuyClicked"
-      @add-cart="handleAddCartClicked"
-    >
-      <!-- 隐藏sku messages -->
-      <template slot="sku-messages"></template>
-      <!-- 自定义sku actions -->
-      <template slot="sku-actions" slot-scope="props">
-        <div class="van-sku-actions">
-          <button class="van-sku__add-cart-btn" @click="handlePointClicked">
-            积分兑换
-          </button>
-          <!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
-          <button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
-            买买买
-          </button>
-        </div>
-      </template>
-    </van-sku>
-    <van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
-  </d>
-</template>
+<van-sku
+  v-model="showCustomAction"
+  stepperTitle="我要买"
+  :sku="sku"
+  :goods="goods"
+  :goodsId="goodsId"
+  :hideStock="sku.hide_stock"
+  :showAddCartBtn="true"
+  :quota="quota"
+  :quotaUsed="quotaUsed"
+  :resetStepperOnHide="true"
+  :initialSku="initialSku"
+  @buy-clicked="handleBuyClicked"
+  @add-cart="handleAddCartClicked"
+>
+  <!-- 隐藏sku messages -->
+  <template slot="sku-messages"></template>
+  <!-- 自定义sku actions -->
+  <template slot="sku-actions" slot-scope="props">
+    <div class="van-sku-actions">
+      <button class="van-sku__add-cart-btn" @click="handlePointClicked">
+        积分兑换
+      </button>
+      <!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
+      <button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
+        买买买
+      </button>
+    </div>
+  </template>
+</van-sku>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/stepper.md b/docs/markdown/en-US/stepper.md
similarity index 78%
rename from docs/examples-docs/en-US/stepper.md
rename to docs/markdown/en-US/stepper.md
index b8dea95f9f1..fa6614d64b2 100644
--- a/docs/examples-docs/en-US/stepper.md
+++ b/docs/markdown/en-US/stepper.md
@@ -1,14 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      stepper1: 1,
-      stepper2: 9,
-    };
-  }
-};
-</script>
-
 ## Stepper
 
 ### Install
@@ -22,9 +11,8 @@ Vue.component(Stepper.name, Stepper);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
-<van-stepper v-model="stepper1" />
+<van-stepper v-model="value" />
 ```
 
 ```javascript
@@ -36,29 +24,24 @@ export default {
   }
 }
 ```
-:::
 
 #### Disabled
 
-:::demo Disabled
 ```html
-<van-stepper v-model="stepper1" disabled />
+<van-stepper v-model="value" disabled />
 ```
-:::
 
 #### Advanced Usage
 
-:::demo Advanced Usage
 ```html
 <van-stepper
-  v-model="stepper2"
+  v-model="value"
   min="5"
   max="40"
   step="2"
-  default-value="9"
+  defaultValue="9"
 />
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/steps.md b/docs/markdown/en-US/steps.md
similarity index 66%
rename from docs/examples-docs/en-US/steps.md
rename to docs/markdown/en-US/steps.md
index d2750537c37..d5920ecf5ce 100644
--- a/docs/examples-docs/en-US/steps.md
+++ b/docs/markdown/en-US/steps.md
@@ -1,19 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      active: 0
-    };
-  },
-
-  methods: {
-    nextStep() {
-      this.active = ++this.active % 4;
-    }
-  }
-}
-</script>
-
 ## Steps
 
 ### Install
@@ -28,7 +12,6 @@ Vue.component(Steps.name, Steps);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-steps :active="active">
   <van-step>Step1</van-step>
@@ -36,8 +19,6 @@ Vue.component(Steps.name, Steps);
   <van-step>Step3</van-step>
   <van-step>Step4</van-step>
 </van-steps>
-
-<van-button @click="nextStep">Next</van-button>
 ```
 
 ```javascript
@@ -46,25 +27,16 @@ export default {
     return {
       active: 0
     };
-  },
-
-  methods: {
-    nextStep() {
-      this.active = ++this.active % 4;
-    }
   }
 }
 ```
-:::
 
 #### Description
 
-:::demo Description
 ```html
 <van-steps
   :active="active"
   icon="logistics"
-  icon-class="steps-success"
   title="Title"
   description="Description"
 >
@@ -74,13 +46,11 @@ export default {
   <van-step>Step4</van-step>
 </van-steps>
 ```
-:::
 
 #### Vertical Steps
 
-:::demo Vertical Steps
 ```html
-<van-steps direction="vertical" :active="0" active-color="#f60">
+<van-steps direction="vertical" :active="0" activeColor="#f60">
   <van-step>
     <h3>【City】Status1</h3>
     <p>2016-07-12 12:40</p>
@@ -95,22 +65,6 @@ export default {
   </van-step>
 </van-steps>
 ```
-:::
-
-#### Advanced Usage
-
-:::demo Advanced Usage
-```html
-<van-steps :active="active" title="Title">
-  <van-icon slot="icon" name="location"></van-icon>
-  <p slot="message-extra">Some text</p>
-  <van-step>Step1</van-step>
-  <van-step>Step2</van-step>
-  <van-step>Step3</van-step>
-  <van-step>Step4</van-step>  
-</van-steps>
-```
-:::
 
 ### Steps API
 
diff --git a/docs/examples-docs/en-US/submit-bar.md b/docs/markdown/en-US/submit-bar.md
similarity index 78%
rename from docs/examples-docs/en-US/submit-bar.md
rename to docs/markdown/en-US/submit-bar.md
index e30a974473b..0cb50211281 100644
--- a/docs/examples-docs/en-US/submit-bar.md
+++ b/docs/markdown/en-US/submit-bar.md
@@ -37,67 +37,61 @@ Vue.component(SubmitBar.name, SubmitBar);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-submit-bar
   :price="3050"
-  button-text="提交订单"
+  buttonText="提交订单"
   @submit="onClickButton"
 />
 ```
-:::
 
 #### Disabled
 禁用状态下不会触发`submit`事件
 
-:::demo 禁用状态
 ```html
 <van-submit-bar
   disabled
   :price="3050"
-  button-text="提交订单"
+  buttonText="提交订单"
   tip="您的收货地址不支持同城送, 我们已为您推荐快递"
   @submit="onClickButton"
 />
 ```
-:::
 
 #### Loading
 加载状态下不会触发`submit`事件
-:::demo 加载状态
+
 ```html
 <van-submit-bar
   loading
   :price="3050"
-  button-text="提交订单"
+  buttonText="提交订单"
   @submit="onClickButton"
 />
 ```
-:::
 
-#### 
+#### Advanced Usage
 提示文案中的额外操作和说明
-:::demo 提示文案中添加操作
+
 ```html
 <van-submit-bar
   :price="3050"
-  button-text="提交订单"
+  buttonText="提交订单"
   @submit="onClickButton"
 >
   <span slot="tip">
-    您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
+    您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
   </span>
 </van-submit-bar>
 ```
-:::
 
 ### API
 
 | Attribute | Description | Type | Default | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
 | price | 价格（单位分） |  `Number` | - | 是 |
-| button-text | 按钮文字 | `String` | - | 是 |
-| button-type | 按钮类型 |  `String` | `danger` | 否 |
+| buttonText | 按钮文字 | `String` | - | 是 |
+| buttonType | 按钮类型 |  `String` | `danger` | 否 |
 | tip | 提示文案 |  `String` | - | 否 |
 | disabled | 是否禁用按钮 |  `Boolean` | `false` | 否 |
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` | 否 |
diff --git a/docs/examples-docs/en-US/swipe.md b/docs/markdown/en-US/swipe.md
similarity index 73%
rename from docs/examples-docs/en-US/swipe.md
rename to docs/markdown/en-US/swipe.md
index 5c228790979..8d89337e51c 100644
--- a/docs/examples-docs/en-US/swipe.md
+++ b/docs/markdown/en-US/swipe.md
@@ -1,18 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      images: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
-      ]
-    };
-  }
-};
-</script>
-
 ## Swipe
 
 ### Install
@@ -28,7 +13,6 @@ Vue.component(SwipeItem.name, SwipeItem);
 #### Basic Usage
 Use `autoplay` prop to set autoplay interval
 
-:::demo Basic Usage
 ```html
 <van-swipe :autoplay="3000">
   <van-swipe-item>1</van-swipe-item>
@@ -37,12 +21,10 @@ Use `autoplay` prop to set autoplay interval
   <van-swipe-item>4</van-swipe-item>
 </van-swipe>
 ```
-:::
 
 #### Image Lazyload
 Use [Lazyload](#/zh-CN/component/lazyload) component to lazyload image
 
-:::demo Image Lazyload
 ```html
 <van-swipe>
   <van-swipe-item v-for="(image, index) in images" :key="index">
@@ -63,7 +45,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/switch-cell.md b/docs/markdown/en-US/switch-cell.md
similarity index 75%
rename from docs/examples-docs/en-US/switch-cell.md
rename to docs/markdown/en-US/switch-cell.md
index cc7f203622c..87d1ffb06ce 100644
--- a/docs/examples-docs/en-US/switch-cell.md
+++ b/docs/markdown/en-US/switch-cell.md
@@ -1,17 +1,6 @@
 ## SwitchCell
-
 `SwitchCell` component is an encapsulation of `Switch` and `Cell`.
 
-<script>
-export default {
-  data() {
-    return {
-      checked: true
-    }
-  }
-}
-</script>
-
 ### Install
 ``` javascript
 import { SwitchCell } from 'vant';
@@ -23,10 +12,9 @@ Vue.component(SwitchCell.name, SwitchCell);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-cell-group>
-  <van-switch-cell v-model="checked" title="标题" />
+  <van-switch-cell v-model="checked" title="Title" />
 </van-cell-group>
 ```
 
@@ -39,29 +27,26 @@ export default {
   }
 }
 ```
-:::
+
 
 #### Disabled
 use `disabled` property to disable the component
 
-:::demo Disabled component
 ```html
 <van-cell-group>
-  <van-switch-cell v-model="checked" :disabled="true" title="标题" />
+  <van-switch-cell v-model="checked" disabled title="Title" />
 </van-cell-group>
 ```
-:::
+
 
 #### Loading
 use `loading` property to keep component in loading state
 
-:::demo Component in loading
 ```html
 <van-cell-group>
-  <van-switch-cell v-model="checked" :loading="true" title="标题" />
+  <van-switch-cell v-model="checked" loading title="Title" />
 </van-cell-group>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/en-US/switch.md b/docs/markdown/en-US/switch.md
similarity index 65%
rename from docs/examples-docs/en-US/switch.md
rename to docs/markdown/en-US/switch.md
index 6868d48fde9..6a71930cf1b 100644
--- a/docs/examples-docs/en-US/switch.md
+++ b/docs/markdown/en-US/switch.md
@@ -1,29 +1,3 @@
-<script>
-import Dialog from 'packages/dialog';
-
-export default {
-  data() {
-    return {
-      checked: true,
-      checked2: true
-    };
-  },
-
-  methods: {
-    onInput(checked) {
-      Dialog.confirm({
-        title: 'Confirm',
-        confirmButtonText: 'ok',
-        cancelButtonText: 'cancel',
-        message: 'Are you sure to toggle switch?'
-      }).then(() => {
-        this.checked2 = checked;
-      });
-    }
-  }
-};
-</script>
-
 ## Switch
 
 ### Install
@@ -37,7 +11,6 @@ Vue.component(Switch.name, Switch);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-switch v-model="checked" />
 ```
@@ -51,35 +24,31 @@ export default {
   }
 };  
 ```
-:::
 
 #### Disabled
 
-:::demo Disabled
 ```html
 <van-switch v-model="checked" disabled />
 ```
-:::
 
 #### Loading
 
 
-:::demo Loading
 ```html
 <van-switch v-model="checked" loading />
 ```
-:::
 
 #### Advanced usage
-:::demo Advanced usage
+
 ```html
-<van-switch :value="checked2" @input="onInput" />
+<van-switch :value="checked" @input="onInput" />
 ```
+
 ```js
 export default {
   data() {
     return {
-      checked2: true
+      checked: true
     };
   },
 
@@ -89,13 +58,12 @@ export default {
         title: 'Confirm',
         message: 'Are you sure to toggle switch?'
       }).then(() => {
-        this.checked2 = checked;
+        this.checked = checked;
       });
     }
   }
 };  
 ```
-:::
 
 ### API
 
diff --git a/docs/markdown/en-US/tab.md b/docs/markdown/en-US/tab.md
new file mode 100644
index 00000000000..f500a941a18
--- /dev/null
+++ b/docs/markdown/en-US/tab.md
@@ -0,0 +1,125 @@
+## Tabs
+
+### Install
+``` javascript
+import { Tab, Tabs } from 'vant';
+
+Vue.component(Tab.name, Tab);
+Vue.component(Tabs.name, Tabs);
+```
+
+### Usage
+
+#### Basic Usage
+
+By default, the first tab is actived. You can set `active` attribute on `van-tabs` to active specified tab.
+
+```html
+<van-tabs :active="active">
+  <van-tab v-for="index in 4" :title="'tab' + index">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+```js
+export default {
+  data() {
+    return {
+      active: 2
+    };
+  }
+}
+```
+
+#### Swipe Tabs
+
+By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number.
+
+```html
+<van-tabs>
+  <van-tab v-for="index in 8" :title="'tab' + index">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+#### Disabled Tab
+
+You can set `disabled` attribute on the corresponding `van-tab`. 
+
+```html
+<van-tabs @disabled="onClickDisabled">
+  <van-tab v-for="index in 4" :title="'tab' + index" :disabled="index === 2">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+```javascript
+export default {
+  methods: {
+    onClickDisabled() {
+      Toast('Disabled!');
+    }
+  }
+};
+```
+
+#### Card Style
+
+Tabs styled as cards.
+
+```html
+<van-tabs type="card">
+  <van-tab v-for="index in 4" :title="'tab' + index">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+#### Click Event
+
+You can bind `click` event on `van-tabs`, the event handler function has one parameters: index of click tab.
+
+```html
+<van-tabs @click="handleTabClick">
+  <van-tab v-for="index in 4" :title="'tab' + index">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+```javascript
+export default {
+  methods: {
+    handleTabClick(index) {
+      Toast(index);
+    }
+  }
+};
+```
+
+### Tabs API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | There are two style tabs, set this attribute to change tab style | `String` | `line` | `card` |
+| active | Index of active tab | `String` `Number` | `0` | - |
+| duration | Toggle tab's animation time | `Number` | `0.3` | - | - |
+| swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
+
+### Tab API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Tab title | `String` | - | - |
+| disabled | Whether disabled current tab | `Boolean` | `false` | - |
+
+### Tabs Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| click | Triggered when click tab | index：index of current tab |
+| disabled | Triggered when click disabled tab | index：index of current tab |
+
diff --git a/docs/examples-docs/en-US/tabbar.md b/docs/markdown/en-US/tabbar.md
similarity index 79%
rename from docs/examples-docs/en-US/tabbar.md
rename to docs/markdown/en-US/tabbar.md
index 4894d7270d1..16cea64183e 100644
--- a/docs/examples-docs/en-US/tabbar.md
+++ b/docs/markdown/en-US/tabbar.md
@@ -1,20 +1,5 @@
 ## Tabbar
 
-<script>
-export default {
-  data() {
-    return {
-      active: 0,
-      active2: 0,
-      icon: {
-        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
-        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
-      }
-    }
-  }
-}
-</script>
-
 ### Install
 ``` javascript
 import { Tabbar, TabbarItem } from 'vant';
@@ -27,7 +12,6 @@ Vue.component(TabbarItem.name, TabbarItem);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-tabbar v-model="active">
   <van-tabbar-item icon="shop">Tab</van-tabbar-item>
@@ -46,17 +30,15 @@ export default {
   }
 }
 ```
-:::
 
 #### Custom icon
 Use `icon` slot to custom icon
 
-:::demo Custom icon
 ```html
-<van-tabbar v-model="active2">
+<van-tabbar v-model="active">
   <van-tabbar-item icon="shop">
     <span>Custom</span>
-    <img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
+    <img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
   </van-tabbar-item>
   <van-tabbar-item icon="chat">Tab</van-tabbar-item>
   <van-tabbar-item icon="records">Tab</van-tabbar-item>
@@ -67,7 +49,7 @@ Use `icon` slot to custom icon
 export default {
   data() {
     return {
-      active2: 0,
+      active: 0,
       icon: {
         normal: '//img.yzcdn.cn/1.png',
         active: '//img.yzcdn.cn/2.png'
@@ -76,7 +58,6 @@ export default {
   }
 }
 ```
-:::
 
 ### Tabbar API
 
diff --git a/docs/examples-docs/en-US/tag.md b/docs/markdown/en-US/tag.md
similarity index 93%
rename from docs/examples-docs/en-US/tag.md
rename to docs/markdown/en-US/tag.md
index 49ac4b432e2..60d836db066 100644
--- a/docs/examples-docs/en-US/tag.md
+++ b/docs/markdown/en-US/tag.md
@@ -11,36 +11,30 @@ Vue.component(Tag.name, Tag);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-tag>Tag</van-tag>
 <van-tag type="danger">Tag</van-tag>
 <van-tag type="success">Tag</van-tag>
 <van-tag type="primary">Tag</van-tag>
 ```
-:::
 
 #### Plain style
 
-:::demo Plain style
 ```html
 <van-tag plain>Tag</van-tag>
 <van-tag plain type="danger">Tag</van-tag>
 <van-tag plain type="primary">Tag</van-tag>
 <van-tag plain type="success">Tag</van-tag>
 ```
-:::
 
 #### Mark style
 
-:::demo Mark style
 ```html
 <van-tag mark>Tag</van-tag>
 <van-tag mark type="danger">Tag</van-tag>
 <van-tag mark type="primary">Tag</van-tag>
 <van-tag mark type="success">Tag</van-tag>
 ```
-:::
 
 ### API
 
diff --git a/docs/markdown/en-US/theme.md b/docs/markdown/en-US/theme.md
new file mode 100644
index 00000000000..5ec97e58671
--- /dev/null
+++ b/docs/markdown/en-US/theme.md
@@ -0,0 +1,55 @@
+## Custom Theme (In translation)
+
+`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面的方法：
+
+### 方案一. PostCSS 插件
+在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量，步骤如下：
+
+```javascript
+// 引入基础样式
+import 'vant/packages/vant-css/src/base.css';
+
+// 引入组价对应的样式
+import 'vant/packages/vant-css/src/button.css';
+import 'vant/packages/vant-css/src/checkbox.css';
+```
+
+接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
+
+```javascript
+module.exports = {
+  plugins: [
+    require('postcss-easy-import')({
+      extensions: ['pcss', 'css']
+    }),
+    require('postcss-theme-variables')({
+      vars: {
+        red: '#F60',
+        gray: '#CCC',
+        blue: '#03A9F4'
+      },
+      prefix: '$'
+    }),
+    require('precss')(),
+    require('postcss-calc')(),
+    require('autoprefixer')({
+      browsers: ['Android >= 4.0', 'iOS >= 7']
+    })
+  ]
+};
+```
+
+### 方案二. 本地构建
+可以通过在本地构建 vant-css 的方式生成所需的主题
+
+```bash
+# 克隆仓库
+git clone git@github.com:youzan/vant.git
+cd packages/vant-css
+```
+
+在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
+```bash
+npm run build
+```
+
diff --git a/docs/markdown/en-US/toast.md b/docs/markdown/en-US/toast.md
new file mode 100644
index 00000000000..73739ced245
--- /dev/null
+++ b/docs/markdown/en-US/toast.md
@@ -0,0 +1,73 @@
+## Toast
+
+### Install
+
+```javascript
+import { Toast } from 'vant';
+```
+
+### Usage
+
+#### Text
+
+```javascript
+Toast('Some messages');
+```
+
+
+#### Loading
+
+```javascript
+Toast.loading({ mask: true });
+```
+
+
+#### Success/Fail
+
+```javascript
+Toast.success('Success');
+Toast.fail('Fail');
+```
+
+
+#### Advanced Usage
+
+```javascript
+const toast = Toast.loading({
+  duration: 0,       // continuous display toast
+  forbidClick: true, // forbid click background
+  message: '3 seconds'
+});
+
+let second = 3;
+const timer = setInterval(() => {
+  second--;
+  if (second) {
+    toast.message = `${second} seconds`;
+  } else {
+    clearInterval(timer);
+    Toast.clear();
+  }
+}, 1000);
+```
+
+### Methods
+
+| Methods | Attribute | Return value | Description |
+|-----------|-----------|-----------|-------------|
+| Toast | `options | message` | toast instance | Show toast |
+| Toast.loading | `options | message` | toast instance | Show loading toast |
+| Toast.success | `options | message` | toast instance | Show success toast |
+| Toast.fail | `options | message` | toast instance | Show fail toast |
+| Toast.clear | - | `void` | Close  |
+
+### Options
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Type | `String` | `text` | `loading` `success` `fail` `html` |
+| message | Message | `String` | `''` | - |
+| position | Position | `String` | `middle` | `top` `bottom` |
+| mask | Whether to show mask | `Boolean` | `false` | - |
+| forbidClick | Whether to forbid click background | `Boolean` | `false` | - |
+| duration | Toast duration(ms) | `Number` | `3000` | Toast won't disappear if value is 0 |
diff --git a/docs/examples-docs/en-US/tree-select.md b/docs/markdown/en-US/tree-select.md
similarity index 53%
rename from docs/examples-docs/en-US/tree-select.md
rename to docs/markdown/en-US/tree-select.md
index 7bf53824c47..602ca1146f0 100644
--- a/docs/examples-docs/en-US/tree-select.md
+++ b/docs/markdown/en-US/tree-select.md
@@ -1,79 +1,3 @@
-<script>
-
-export default {
-  data() {
-    return {
-      items: [{
-        text: 'All Cities',
-        children: [{
-          text: 'Hang Zhou',
-          id: 1001
-        }, {
-          text: 'Wen Zhou',
-          id: 1002
-        }, {
-          text: 'Hai Nan',
-          id: 1100
-        }, {
-          text: 'Ning Bo',
-          id: 1003
-        }, {
-          text: 'Yi Wu',
-          id: 1004
-        }, {
-          text: 'Wu Xi',
-          id: 1011
-        }, {
-          text: 'Chang Zhou',
-          id: 1012
-        }, {
-          text: 'Da Lian',
-          id: 1031
-        }, {
-          text: 'Zhu Ji',
-          id: 1005
-        }]
-      }, {
-        text: 'Zhe Jiang',
-        children: [{
-          text: 'Hang Zhou',
-          id: 1001
-        }, {
-          text: 'Wen Zhou',
-          id: 1002
-        }, {
-          text: 'Ning Bo',
-          id: 1003
-        }, {
-          text: 'Yi Wu',
-          id: 1004
-        }]
-      }, {
-        text: 'Jiang Su',
-        children: [{
-          text: 'Wu Xi',
-          id: 1011
-        }, {
-          text: 'Chang Zhou',
-          id: 1012
-        }]
-      }],
-      mainActiveIndex: 0,
-      activeId: 1001
-    };
-  },
-  methods: {
-    onNavClick(index) {
-      this.mainActiveIndex = index;
-    },
-    onItemClick(data) {
-      console.log(data);
-      this.activeId = data.id;
-    }
-  }
-}
-</script>
-
 ## TreeSelect
 
 ### Install
@@ -87,7 +11,6 @@ Vue.component(TreeSelect.name, TreeSelect);
 
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
 <van-tree-select
   :items="items"
@@ -95,7 +18,7 @@ Vue.component(TreeSelect.name, TreeSelect);
   :active-id="activeId"
   @navclick="onNavClick"
   @itemclick="onItemClick"
-></van-tree-select>
+/>
 ```
 
 ```javascript
@@ -114,13 +37,11 @@ export default {
       this.mainActiveIndex = index;
     },
     onItemClick(data) {
-      console.log(data);
       this.activeId = data.id;
     }
   }
 }
 ```
-:::
 
 ### API
 
@@ -128,9 +49,9 @@ export default {
 
 | Attribute | Description | Type | Default | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
-| items | Required datasets for the component, see Data Structure for detail. |  Array | [] | - |
-| mainActiveIndex | The index of selected parent node |  Number | 0 | - |
-| activeId | Id of selected item |  Number | 0 | - |
+| items | Required datasets for the component, see Data Structure for detail. | `Array` | `[]` | - |
+| mainActiveIndex | The index of selected parent node | `Number` | `0` | - |
+| activeId | Id of selected item | `Number` | `0` | - |
 
 #### Event
 | Event | Description | Attribute |
diff --git a/docs/markdown/en-US/uploader.md b/docs/markdown/en-US/uploader.md
new file mode 100644
index 00000000000..b3becdc988c
--- /dev/null
+++ b/docs/markdown/en-US/uploader.md
@@ -0,0 +1,45 @@
+## Uploader
+
+### Install
+``` javascript
+import { Uploader } from 'vant';
+
+Vue.component(Uploader.name, Uploader);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<div class="uploader-container">
+  <van-uploader :afterRead="logContent">
+    <van-icon name="photograph"></van-icon>
+  </van-uploader>
+</div>
+```
+
+```javascript
+export default {
+  methods: {
+    logContent(file) {
+      console.log(file)
+    }
+  }
+};
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| resultType | The way to read the file, read as base64; read as text | `String` | `dataUrl` | `text` |
+| disable | Whether to disable the upload, set to true during the image upload to prevent users from clicking this component to upload pictures | `Boolean` | `false` | - |
+| beforeRead | Hook before reading the file, the first parameter is the selected file, return false to stop reading the file | `Function` | - | - |
+| afterRead | Hook after reading the file, parameter format: { file ,content } | `Function` | - | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Custom icon |
diff --git a/docs/examples-docs/en-US/waterfall.md b/docs/markdown/en-US/waterfall.md
similarity index 72%
rename from docs/examples-docs/en-US/waterfall.md
rename to docs/markdown/en-US/waterfall.md
index 5937a5517d5..dea65a31e9c 100644
--- a/docs/examples-docs/en-US/waterfall.md
+++ b/docs/markdown/en-US/waterfall.md
@@ -27,40 +27,9 @@ export default {
 
 ### Usage
 
-<script>
-import { Waterfall } from 'packages';
-
-export default {
-  data() {
-    return {
-      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-      disabled: false
-    };
-  },
-
-  directives: {
-    WaterfallLower: Waterfall('lower')
-  },
-
-  methods: {
-    loadMore() {
-      this.disabled = true;
-      setTimeout(() => {
-        for (let i = 0; i < 5; i ++) {
-          this.list.push(this.list.length);
-        }
-        this.disabled = false;
-      }, 200);
-    }
-  }
-};
-</script>
-
 #### Basic Usage
 
-:::demo Basic Usage
 ```html
-<p class="page-desc">This list will load items will scroll to bottom.</p>
 <ul
   v-waterfall-lower="loadMore"
   waterfall-disabled="disabled"
@@ -95,7 +64,6 @@ export default {
   }
 };
 ```
-:::
 
 ### API
 
diff --git a/docs/markdown/index.js b/docs/markdown/index.js
new file mode 100644
index 00000000000..b9883fd124d
--- /dev/null
+++ b/docs/markdown/index.js
@@ -0,0 +1,116 @@
+// This file is auto gererated by build/bin/build-entry.js
+import progress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+function wrapper(component) {
+  return function(r) {
+    progress.start();
+    component(r).then(() => {
+      progress.done();
+    }).catch(() => {
+      progress.done();
+    });
+  };
+}
+
+export default {
+  'zh-CN/actionsheet': wrapper(r => require.ensure([], () => r(require('./zh-CN/actionsheet.md')), 'zh-CN/actionsheet')),
+  'zh-CN/address-edit': wrapper(r => require.ensure([], () => r(require('./zh-CN/address-edit.md')), 'zh-CN/address-edit')),
+  'zh-CN/address-list': wrapper(r => require.ensure([], () => r(require('./zh-CN/address-list.md')), 'zh-CN/address-list')),
+  'zh-CN/area': wrapper(r => require.ensure([], () => r(require('./zh-CN/area.md')), 'zh-CN/area')),
+  'zh-CN/badge': wrapper(r => require.ensure([], () => r(require('./zh-CN/badge.md')), 'zh-CN/badge')),
+  'zh-CN/button': wrapper(r => require.ensure([], () => r(require('./zh-CN/button.md')), 'zh-CN/button')),
+  'zh-CN/card': wrapper(r => require.ensure([], () => r(require('./zh-CN/card.md')), 'zh-CN/card')),
+  'zh-CN/cell-swipe': wrapper(r => require.ensure([], () => r(require('./zh-CN/cell-swipe.md')), 'zh-CN/cell-swipe')),
+  'zh-CN/cell': wrapper(r => require.ensure([], () => r(require('./zh-CN/cell.md')), 'zh-CN/cell')),
+  'zh-CN/changelog-generated': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog-generated.md')), 'zh-CN/changelog-generated')),
+  'zh-CN/changelog': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog.md')), 'zh-CN/changelog')),
+  'zh-CN/checkbox': wrapper(r => require.ensure([], () => r(require('./zh-CN/checkbox.md')), 'zh-CN/checkbox')),
+  'zh-CN/contact': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact.md')), 'zh-CN/contact')),
+  'zh-CN/coupon': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon.md')), 'zh-CN/coupon')),
+  'zh-CN/datetime-picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/datetime-picker.md')), 'zh-CN/datetime-picker')),
+  'zh-CN/dialog': wrapper(r => require.ensure([], () => r(require('./zh-CN/dialog.md')), 'zh-CN/dialog')),
+  'zh-CN/field': wrapper(r => require.ensure([], () => r(require('./zh-CN/field.md')), 'zh-CN/field')),
+  'zh-CN/goods-action': wrapper(r => require.ensure([], () => r(require('./zh-CN/goods-action.md')), 'zh-CN/goods-action')),
+  'zh-CN/icon': wrapper(r => require.ensure([], () => r(require('./zh-CN/icon.md')), 'zh-CN/icon')),
+  'zh-CN/image-preview': wrapper(r => require.ensure([], () => r(require('./zh-CN/image-preview.md')), 'zh-CN/image-preview')),
+  'zh-CN/layout': wrapper(r => require.ensure([], () => r(require('./zh-CN/layout.md')), 'zh-CN/layout')),
+  'zh-CN/lazyload': wrapper(r => require.ensure([], () => r(require('./zh-CN/lazyload.md')), 'zh-CN/lazyload')),
+  'zh-CN/loading': wrapper(r => require.ensure([], () => r(require('./zh-CN/loading.md')), 'zh-CN/loading')),
+  'zh-CN/nav-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/nav-bar.md')), 'zh-CN/nav-bar')),
+  'zh-CN/notice-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/notice-bar.md')), 'zh-CN/notice-bar')),
+  'zh-CN/number-keyboard': wrapper(r => require.ensure([], () => r(require('./zh-CN/number-keyboard.md')), 'zh-CN/number-keyboard')),
+  'zh-CN/panel': wrapper(r => require.ensure([], () => r(require('./zh-CN/panel.md')), 'zh-CN/panel')),
+  'zh-CN/password-input': wrapper(r => require.ensure([], () => r(require('./zh-CN/password-input.md')), 'zh-CN/password-input')),
+  'zh-CN/picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/picker.md')), 'zh-CN/picker')),
+  'zh-CN/popup': wrapper(r => require.ensure([], () => r(require('./zh-CN/popup.md')), 'zh-CN/popup')),
+  'zh-CN/progress': wrapper(r => require.ensure([], () => r(require('./zh-CN/progress.md')), 'zh-CN/progress')),
+  'zh-CN/pull-refresh': wrapper(r => require.ensure([], () => r(require('./zh-CN/pull-refresh.md')), 'zh-CN/pull-refresh')),
+  'zh-CN/quickstart': wrapper(r => require.ensure([], () => r(require('./zh-CN/quickstart.md')), 'zh-CN/quickstart')),
+  'zh-CN/radio': wrapper(r => require.ensure([], () => r(require('./zh-CN/radio.md')), 'zh-CN/radio')),
+  'zh-CN/search': wrapper(r => require.ensure([], () => r(require('./zh-CN/search.md')), 'zh-CN/search')),
+  'zh-CN/sku': wrapper(r => require.ensure([], () => r(require('./zh-CN/sku.md')), 'zh-CN/sku')),
+  'zh-CN/stepper': wrapper(r => require.ensure([], () => r(require('./zh-CN/stepper.md')), 'zh-CN/stepper')),
+  'zh-CN/steps': wrapper(r => require.ensure([], () => r(require('./zh-CN/steps.md')), 'zh-CN/steps')),
+  'zh-CN/submit-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/submit-bar.md')), 'zh-CN/submit-bar')),
+  'zh-CN/swipe': wrapper(r => require.ensure([], () => r(require('./zh-CN/swipe.md')), 'zh-CN/swipe')),
+  'zh-CN/switch-cell': wrapper(r => require.ensure([], () => r(require('./zh-CN/switch-cell.md')), 'zh-CN/switch-cell')),
+  'zh-CN/switch': wrapper(r => require.ensure([], () => r(require('./zh-CN/switch.md')), 'zh-CN/switch')),
+  'zh-CN/tab': wrapper(r => require.ensure([], () => r(require('./zh-CN/tab.md')), 'zh-CN/tab')),
+  'zh-CN/tabbar': wrapper(r => require.ensure([], () => r(require('./zh-CN/tabbar.md')), 'zh-CN/tabbar')),
+  'zh-CN/tag': wrapper(r => require.ensure([], () => r(require('./zh-CN/tag.md')), 'zh-CN/tag')),
+  'zh-CN/theme': wrapper(r => require.ensure([], () => r(require('./zh-CN/theme.md')), 'zh-CN/theme')),
+  'zh-CN/toast': wrapper(r => require.ensure([], () => r(require('./zh-CN/toast.md')), 'zh-CN/toast')),
+  'zh-CN/tree-select': wrapper(r => require.ensure([], () => r(require('./zh-CN/tree-select.md')), 'zh-CN/tree-select')),
+  'zh-CN/uploader': wrapper(r => require.ensure([], () => r(require('./zh-CN/uploader.md')), 'zh-CN/uploader')),
+  'zh-CN/waterfall': wrapper(r => require.ensure([], () => r(require('./zh-CN/waterfall.md')), 'zh-CN/waterfall')),
+  'en-US/actionsheet': wrapper(r => require.ensure([], () => r(require('./en-US/actionsheet.md')), 'en-US/actionsheet')),
+  'en-US/address-edit': wrapper(r => require.ensure([], () => r(require('./en-US/address-edit.md')), 'en-US/address-edit')),
+  'en-US/address-list': wrapper(r => require.ensure([], () => r(require('./en-US/address-list.md')), 'en-US/address-list')),
+  'en-US/area': wrapper(r => require.ensure([], () => r(require('./en-US/area.md')), 'en-US/area')),
+  'en-US/badge': wrapper(r => require.ensure([], () => r(require('./en-US/badge.md')), 'en-US/badge')),
+  'en-US/button': wrapper(r => require.ensure([], () => r(require('./en-US/button.md')), 'en-US/button')),
+  'en-US/card': wrapper(r => require.ensure([], () => r(require('./en-US/card.md')), 'en-US/card')),
+  'en-US/cell-swipe': wrapper(r => require.ensure([], () => r(require('./en-US/cell-swipe.md')), 'en-US/cell-swipe')),
+  'en-US/cell': wrapper(r => require.ensure([], () => r(require('./en-US/cell.md')), 'en-US/cell')),
+  'en-US/changelog': wrapper(r => require.ensure([], () => r(require('./en-US/changelog.md')), 'en-US/changelog')),
+  'en-US/checkbox': wrapper(r => require.ensure([], () => r(require('./en-US/checkbox.md')), 'en-US/checkbox')),
+  'en-US/contact': wrapper(r => require.ensure([], () => r(require('./en-US/contact.md')), 'en-US/contact')),
+  'en-US/coupon': wrapper(r => require.ensure([], () => r(require('./en-US/coupon.md')), 'en-US/coupon')),
+  'en-US/datetime-picker': wrapper(r => require.ensure([], () => r(require('./en-US/datetime-picker.md')), 'en-US/datetime-picker')),
+  'en-US/dialog': wrapper(r => require.ensure([], () => r(require('./en-US/dialog.md')), 'en-US/dialog')),
+  'en-US/field': wrapper(r => require.ensure([], () => r(require('./en-US/field.md')), 'en-US/field')),
+  'en-US/goods-action': wrapper(r => require.ensure([], () => r(require('./en-US/goods-action.md')), 'en-US/goods-action')),
+  'en-US/icon': wrapper(r => require.ensure([], () => r(require('./en-US/icon.md')), 'en-US/icon')),
+  'en-US/image-preview': wrapper(r => require.ensure([], () => r(require('./en-US/image-preview.md')), 'en-US/image-preview')),
+  'en-US/layout': wrapper(r => require.ensure([], () => r(require('./en-US/layout.md')), 'en-US/layout')),
+  'en-US/lazyload': wrapper(r => require.ensure([], () => r(require('./en-US/lazyload.md')), 'en-US/lazyload')),
+  'en-US/loading': wrapper(r => require.ensure([], () => r(require('./en-US/loading.md')), 'en-US/loading')),
+  'en-US/nav-bar': wrapper(r => require.ensure([], () => r(require('./en-US/nav-bar.md')), 'en-US/nav-bar')),
+  'en-US/notice-bar': wrapper(r => require.ensure([], () => r(require('./en-US/notice-bar.md')), 'en-US/notice-bar')),
+  'en-US/number-keyboard': wrapper(r => require.ensure([], () => r(require('./en-US/number-keyboard.md')), 'en-US/number-keyboard')),
+  'en-US/panel': wrapper(r => require.ensure([], () => r(require('./en-US/panel.md')), 'en-US/panel')),
+  'en-US/password-input': wrapper(r => require.ensure([], () => r(require('./en-US/password-input.md')), 'en-US/password-input')),
+  'en-US/picker': wrapper(r => require.ensure([], () => r(require('./en-US/picker.md')), 'en-US/picker')),
+  'en-US/popup': wrapper(r => require.ensure([], () => r(require('./en-US/popup.md')), 'en-US/popup')),
+  'en-US/progress': wrapper(r => require.ensure([], () => r(require('./en-US/progress.md')), 'en-US/progress')),
+  'en-US/pull-refresh': wrapper(r => require.ensure([], () => r(require('./en-US/pull-refresh.md')), 'en-US/pull-refresh')),
+  'en-US/quickstart': wrapper(r => require.ensure([], () => r(require('./en-US/quickstart.md')), 'en-US/quickstart')),
+  'en-US/radio': wrapper(r => require.ensure([], () => r(require('./en-US/radio.md')), 'en-US/radio')),
+  'en-US/search': wrapper(r => require.ensure([], () => r(require('./en-US/search.md')), 'en-US/search')),
+  'en-US/sku': wrapper(r => require.ensure([], () => r(require('./en-US/sku.md')), 'en-US/sku')),
+  'en-US/stepper': wrapper(r => require.ensure([], () => r(require('./en-US/stepper.md')), 'en-US/stepper')),
+  'en-US/steps': wrapper(r => require.ensure([], () => r(require('./en-US/steps.md')), 'en-US/steps')),
+  'en-US/submit-bar': wrapper(r => require.ensure([], () => r(require('./en-US/submit-bar.md')), 'en-US/submit-bar')),
+  'en-US/swipe': wrapper(r => require.ensure([], () => r(require('./en-US/swipe.md')), 'en-US/swipe')),
+  'en-US/switch-cell': wrapper(r => require.ensure([], () => r(require('./en-US/switch-cell.md')), 'en-US/switch-cell')),
+  'en-US/switch': wrapper(r => require.ensure([], () => r(require('./en-US/switch.md')), 'en-US/switch')),
+  'en-US/tab': wrapper(r => require.ensure([], () => r(require('./en-US/tab.md')), 'en-US/tab')),
+  'en-US/tabbar': wrapper(r => require.ensure([], () => r(require('./en-US/tabbar.md')), 'en-US/tabbar')),
+  'en-US/tag': wrapper(r => require.ensure([], () => r(require('./en-US/tag.md')), 'en-US/tag')),
+  'en-US/theme': wrapper(r => require.ensure([], () => r(require('./en-US/theme.md')), 'en-US/theme')),
+  'en-US/toast': wrapper(r => require.ensure([], () => r(require('./en-US/toast.md')), 'en-US/toast')),
+  'en-US/tree-select': wrapper(r => require.ensure([], () => r(require('./en-US/tree-select.md')), 'en-US/tree-select')),
+  'en-US/uploader': wrapper(r => require.ensure([], () => r(require('./en-US/uploader.md')), 'en-US/uploader')),
+  'en-US/waterfall': wrapper(r => require.ensure([], () => r(require('./en-US/waterfall.md')), 'en-US/waterfall'))
+};
diff --git a/docs/markdown/zh-CN/actionsheet.md b/docs/markdown/zh-CN/actionsheet.md
new file mode 100644
index 00000000000..895e44b761d
--- /dev/null
+++ b/docs/markdown/zh-CN/actionsheet.md
@@ -0,0 +1,86 @@
+## Actionsheet 行动按钮
+
+### 使用指南
+``` javascript
+import { Actionsheet } from 'vant';
+
+Vue.component(Actionsheet.name, Actionsheet);
+```
+
+### 代码演示
+
+#### 基础用法
+需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
+
+```html
+<van-actionsheet v-model="show" :actions="actions" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        {
+          name: '选项',
+          callback: this.onClick
+        },
+        {
+          name: '信用卡支付'
+        },
+        {
+          name: '选项',
+          loading: true
+        }
+      ]
+    };
+  },
+
+  methods: {
+    onClick(item) {
+      Toast(item.name);
+    }
+  }
+}
+```
+
+#### 带取消按钮的 Actionsheet
+
+如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
+
+```html
+<van-actionsheet v-model="show" :actions="actions" cancelText="取消" />
+```
+
+#### 带标题的 Actionsheet
+
+如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
+
+```html
+<van-actionsheet v-model="show" title="支持以下配送方式">
+  <p>一些内容</p>
+</van-actionsheet>
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| actions | 行动按钮数组 | `Array` | `[]` | - |
+| title | 标题 | `String` | - | - |
+| cancelText | 取消按钮文案 | `String` | - | - |
+| overlay | 是否显示遮罩 | `Boolean` | - | - |
+| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
+
+### actions
+
+`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
+
+| key | 说明 |
+|-----------|-----------|
+| name | 标题 |
+| subname | 二级标题 |
+| className | 为对应列添加特殊的`class` |
+| loading | 是否是`loading`状态 |
+| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
diff --git a/docs/examples-docs/zh-CN/address-edit.md b/docs/markdown/zh-CN/address-edit.md
similarity index 75%
rename from docs/examples-docs/zh-CN/address-edit.md
rename to docs/markdown/zh-CN/address-edit.md
index 2fd6144d7b2..99a772285b3 100644
--- a/docs/examples-docs/zh-CN/address-edit.md
+++ b/docs/markdown/zh-CN/address-edit.md
@@ -1,41 +1,3 @@
-<script>
-import { Toast } from 'packages';
-import areaList from '../../mock/area.json';
-
-export default {
-  data() {
-    return {
-      areaList,
-      searchResult: []
-    }
-  },
-
-  methods: {
-    onSave() {
-      Toast('save');
-    },
-    onDelete() {
-      Toast('delete');
-    },
-    onChangeDetail(val) {
-      if (val) {
-        this.searchResult = [{
-          name: '黄龙万科中心',
-          address: '杭州市西湖区'
-        }, {
-          name: '黄龙万科中心H座'
-        }, {
-          name: '黄龙万科中心H座',
-          address: '杭州市西湖区'
-        }];
-      } else {
-        this.searchResult = [];
-      }
-    }
-  }
-};
-</script>
-
 ## AddressEdit 地址编辑
 
 ### 使用指南
@@ -49,14 +11,13 @@ Vue.component(AddressEdit.name, AddressEdit);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <van-address-edit
-  :area-list="areaList"
-  :show-postal="true"
-  :show-set-default="true"
-  :show-search-result="true"
-  :search-result="searchResult"
+  :areaList="areaList"
+  :showPostal="true"
+  :showSetDefault="true"
+  :showSearchResult="true"
+  :searchResult="searchResult"
   @save="onSave"
   @delete="onDelete"
   @change-detail="onChangeDetail"
@@ -92,7 +53,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/address-list.md b/docs/markdown/zh-CN/address-list.md
similarity index 67%
rename from docs/examples-docs/zh-CN/address-list.md
rename to docs/markdown/zh-CN/address-list.md
index d32caabf9fb..312305bcad0 100644
--- a/docs/examples-docs/zh-CN/address-list.md
+++ b/docs/markdown/zh-CN/address-list.md
@@ -1,44 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  data() {
-    return {
-      chosenAddressId: '1',
-      list: [
-        {
-          id: '1',
-          name: '张三',
-          tel: '13000000000',
-          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
-        },
-        {
-          id: '2',
-          name: '李四',
-          tel: '1310000000',
-          address: '浙江省杭州市拱墅区莫干山路 50 号'
-        },
-        {
-          id: '3',
-          name: '王五',
-          tel: '1320000000',
-          address: '浙江省杭州市滨江区江南大道 15 号'
-        }
-      ]
-    }
-  },
-
-  methods: {
-    onAdd() {
-      Toast('新增收货地址');
-    },
-    onEdit(item, index) {
-      Toast('编辑收货地址:' + index);
-    }
-  }
-}
-</script>
-
 ## AddressList 地址列表
 
 ### 使用指南
@@ -52,7 +11,6 @@ Vue.component(AddressList.name, AddressList);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <van-address-list
   v-model="chosenAddressId"
@@ -94,7 +52,7 @@ export default {
   }
 }
 ```
-:::
+
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/area.md b/docs/markdown/zh-CN/area.md
similarity index 82%
rename from docs/examples-docs/zh-CN/area.md
rename to docs/markdown/zh-CN/area.md
index 27c37826b1e..d705f44a578 100644
--- a/docs/examples-docs/zh-CN/area.md
+++ b/docs/markdown/zh-CN/area.md
@@ -1,15 +1,3 @@
-<script>
-import AreaList from '../../mock/area.json';
-
-export default {
-  data() {
-    return {
-      areaList: AreaList
-    }
-  }
-};
-</script>
-
 ## Area 省市县选择组件
 
 ### 使用指南
@@ -26,43 +14,27 @@ Vue.component(Area.name, Area);
 
 要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`数据格式具体可看下面数据格式章节。
 
-:::demo 基础用法
 ```html
-<van-area :area-list="areaList"></van-area>
-
-<script>
-import AreaList from '../../mock/area.json';
-
-export default {
-  data() {
-    return {
-      areaList: AreaList
-    }
-  }
-};
-</script>
+<van-area :areaList="areaList" />
 ```
-:::
+
 
 #### 选中省市县
 
 如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
 
-:::demo 选中省市县
 ```html
-<van-area :area-list="areaList" value="110101"></van-area>
+<van-area :areaList="areaList" value="110101" />
 ```
-:::
+
 
 #### 配置显示列
 
 可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
 
-:::demo 配置显示列
 ```html
-<van-area :area-list="areaList" :columns-num="2"></van-area>
+<van-area :areaList="areaList" :columnsNum="2" />
 ```
-:::
 
 ### API
 
@@ -115,7 +87,7 @@ export default {
 }
 ```
 
-完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/mock/area.json)
+完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
 
 #### 点击完成时返回的数据格式
 返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
diff --git a/docs/examples-docs/zh-CN/badge.md b/docs/markdown/zh-CN/badge.md
similarity index 73%
rename from docs/examples-docs/zh-CN/badge.md
rename to docs/markdown/zh-CN/badge.md
index 3fed127a1a4..028f52388cc 100644
--- a/docs/examples-docs/zh-CN/badge.md
+++ b/docs/markdown/zh-CN/badge.md
@@ -1,38 +1,3 @@
-<style>
-.demo-badge {
-  .van-badge-group {
-    width: auto;
-    margin: 0 15px;
-    padding: 20px 0;
-    background-color: #fff;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  .van-badge {
-    width: 85px;
-    margin: 0 auto;
-  }
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      activeKey: 0
-    };
-  },
-  methods: {
-    onClick(key) {
-      this.activeKey = key;
-    }
-  }
-};
-</script>
-
 ## Badge 徽章
 
 ### 使用指南
@@ -48,7 +13,6 @@ Vue.component(Badge.name, Badge);
 
 通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
 
-:::demo 基础用法
 ```html
 <van-badge-group :active-key="activeKey">
   <van-badge title="热销榜" @click="onClick"></van-badge>
@@ -72,8 +36,6 @@ export default {
   }
 };
 ```
-:::
-
 
 ### BadgeGroup API
 
diff --git a/docs/examples-docs/zh-CN/button.md b/docs/markdown/zh-CN/button.md
similarity index 73%
rename from docs/examples-docs/zh-CN/button.md
rename to docs/markdown/zh-CN/button.md
index f434a719212..b9715e8a527 100644
--- a/docs/examples-docs/zh-CN/button.md
+++ b/docs/markdown/zh-CN/button.md
@@ -1,29 +1,3 @@
-<style>
-.demo-button {
-  .van-button {
-    user-select: none;
-
-    &--large,
-    &--bottom-action {
-      margin-bottom: 15px;
-    }
-
-    &--small,
-    &--normal {
-      margin-right: 10px;
-    }
-  }
-
-  .zan-doc-demo-block {
-    padding: 0 15px;
-  }
-
-  .zan-doc-demo-block__subtitle {
-    padding-left: 0;
-  }
-}
-</style>
-
 ## Button 按钮
 
 ### 使用指南
@@ -39,74 +13,62 @@ Vue.component(Button.name, Button);
 
 支持`default`、`primary`、`danger`三种类型，默认为`default`
 
-:::demo 按钮类型
 ```html
 <van-button type="default">Default</van-button>
 <van-button type="primary">Primary</van-button>
 <van-button type="danger">Danger</van-button>
 ```
-:::
 
 #### 按钮尺寸
 
 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
 
-:::demo 按钮尺寸
 ```html 
 <van-button size="large">Large</van-button>
 <van-button size="normal">Normal</van-button>
 <van-button size="small">Small</van-button>
 <van-button size="mini">Mini</van-button>
 ```
-:::
 
 #### 禁用状态
 
 通过`disabled`属性来禁用按钮，此时按钮不可点击
 
-:::demo 禁用状态
 ```html
 <van-button disabled>Diabled</van-button>
 ```
-:::
 
 #### 加载状态
 
-:::demo 加载状态
 ```html 
 <van-button loading></van-button>
 <van-button loading type="primary"></van-button>
 ```
-:::
 
 #### 自定义按钮标签
 
 按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
 
-:::demo 自定义按钮标签
 ```html 
 <van-button tag="a" href="https://www.youzan.com" target="_blank">
-  a 标签按钮
+  按钮
 </van-button>
 ```
-:::
 
 #### 页面底部操作按钮
 
-:::demo 页面底部操作按钮
 ```html 
-<van-button type="primary" bottom-action>立即购买</van-button>
+<van-button type="primary" bottom-action>按钮</van-button>
 
 <van-row>
   <van-col span="12">
-    <van-button bottom-action>加入购物车</van-button>
+    <van-button bottom-action>按钮</van-button>
   </van-col>
   <van-col span="12">
-    <van-button type="primary" bottom-action>立即购买</van-button>
+    <van-button type="primary" bottom-action>按钮</van-button>
   </van-col>
 </van-row>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/card.md b/docs/markdown/zh-CN/card.md
similarity index 71%
rename from docs/examples-docs/zh-CN/card.md
rename to docs/markdown/zh-CN/card.md
index a018bc09b6b..68d13f7a17a 100644
--- a/docs/examples-docs/zh-CN/card.md
+++ b/docs/markdown/zh-CN/card.md
@@ -1,13 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
-    }
-  }
-}
-</script>
-
 ## Card 卡片
 
 ### 使用指南
@@ -21,37 +11,33 @@ Vue.component(Card.name, Card);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <van-card
-  title="商品名称"
-  desc="商品描述"
+  title="标题"
+  desc="描述"
   num="2"
   price="2.00"
   :thumb="imageURL"
 />
 ```
-:::
 
 #### 高级用法
 可以通过具名`slot`添加定制内容
 
-:::demo 高级用法
 ```html
 <van-card
-  title="商品名称"
-  desc="商品描述"  
+  title="标题"
+  desc="描述"  
   num="2"
   price="2.00"
   :thumb="imageURL"
 >
   <div slot="footer">
-    <van-button size="mini">按钮一</van-button>
-    <van-button size="mini">按钮二</van-button>
+    <van-button size="mini">按钮</van-button>
+    <van-button size="mini">按钮</van-button>
   </div>
 </van-card>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/cell-swipe.md b/docs/markdown/zh-CN/cell-swipe.md
similarity index 64%
rename from docs/examples-docs/zh-CN/cell-swipe.md
rename to docs/markdown/zh-CN/cell-swipe.md
index e08ceadeb89..4cabcc0bb3f 100644
--- a/docs/examples-docs/zh-CN/cell-swipe.md
+++ b/docs/markdown/zh-CN/cell-swipe.md
@@ -1,21 +1,3 @@
-<style>
-.van-cell-swipe__left,
-.van-cell-swipe__right {
-    color: #FFFFFF;
-    font-size: 16px;
-    width: 65px;
-    height: 44px;
-    display: inline-block;
-    text-align: center;
-    line-height: 44px;
-}
-.van-cell-swipe__left {
-  background-color: #FF4444;  
-}
-.van-cell-swipe__right {
-  background-color: #84c483;
-}
-</style>
 ## CellSwipe 滑动单元格
 
 ### 使用指南
@@ -29,17 +11,15 @@ Vue.component(CellSwipe.name, CellSwipe);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <van-cell-swipe :right-width="65" :left-width="65">
   <span slot="left">选择</span>
   <van-cell-group>
-    <van-cell title="单元格1" value="单元格1内容"></van-cell>
+    <van-cell title="单元格" value="内容" />
   </van-cell-group>
   <span slot="right">删除</span>
 </van-cell-swipe>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/cell.md b/docs/markdown/zh-CN/cell.md
similarity index 65%
rename from docs/examples-docs/zh-CN/cell.md
rename to docs/markdown/zh-CN/cell.md
index 836deac4763..c942c90ed6c 100644
--- a/docs/examples-docs/zh-CN/cell.md
+++ b/docs/markdown/zh-CN/cell.md
@@ -1,28 +1,3 @@
-<script>
-export default {
-  methods: {
-    handleClick() {
-      console.log('cell click');
-    }
-  }
-};
-</script>
-
-<style>
-.demo-cell {
-  .van-cell-text {
-    margin-right: 5px;
-  }
-  .van-cell__right-icon {
-    font-size: 16px;
-  }
-  .van-cell-text,
-  .van-tag--danger {
-    vertical-align: middle;
-  }
-}
-</style>
-
 ## Cell 单元格
 
 ### 使用指南
@@ -39,69 +14,61 @@ Vue.component(CellGroup.name, CellGroup);
 
 将`van-cell-group`组件看成一个容器即可
 
-:::demo 基础用法
 ```html
 <van-cell-group>
-  <van-cell title="单元格1" value="单元格1内容"></van-cell>
-  <van-cell title="单元格2" value="单元格2内容" label="描述信息"></van-cell>
+  <van-cell title="单元格" value="内容"></van-cell>
+  <van-cell title="单元格" value="内容" label="描述信息"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### 只设置value
 只设置`value`时会向左对齐
 
-:::demo 只设置value
 ```html
 <van-cell-group>
-  <van-cell value="单元格内容"></van-cell>
+  <van-cell value="内容"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### 展示图标
 通过`icon`属性在标题左侧展示图标
-:::demo 展示图标
+
 ```html
 <van-cell-group>
   <van-cell title="单元格" icon="location"></van-cell>
 </van-cell-group>
 ```
-:::
+
 
 #### 展示箭头
 传入`isLink`属性则会在右侧显示箭头
 
-:::demo 展示箭头
 ```html
 <van-cell-group>
-  <van-cell title="单元格1" is-link></van-cell>
-  <van-cell title="单元格2" is-link value="内容"></van-cell>
+  <van-cell title="单元格" is-link></van-cell>
+  <van-cell title="单元格" is-link value="内容"></van-cell>
 </van-cell-group>
 ```
-:::
 
 #### 高级用法
 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
 
-:::demo 高级用法
 ```html
 <van-cell-group>
-  <van-cell value="进入店铺" icon="shop" is-link>
+  <van-cell value="内容" icon="shop" is-link>
     <template slot="title">
-      <span class="van-cell-text">起码运动馆</span>
-      <van-tag type="danger">官方</van-tag>
+      <span class="van-cell-text">单元格</span>
+      <van-tag type="danger">标签</van-tag>
     </template>
   </van-cell>
-  <van-cell title="线下门店" icon="location" is-link></van-cell>
-  <van-cell title="其他">
+  <van-cell title="单元格" icon="location" is-link></van-cell>
+  <van-cell title="单元格">
     <template slot="right-icon">
       <van-icon name="search" class="van-cell__right-icon"></van-icon>
     </template>
   </van-cell>
 </van-cell-group>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/changelog-generated.md b/docs/markdown/zh-CN/changelog-generated.md
similarity index 100%
rename from docs/examples-docs/zh-CN/changelog-generated.md
rename to docs/markdown/zh-CN/changelog-generated.md
diff --git a/docs/examples-docs/zh-CN/changelog.md b/docs/markdown/zh-CN/changelog.md
similarity index 99%
rename from docs/examples-docs/zh-CN/changelog.md
rename to docs/markdown/zh-CN/changelog.md
index 5a31a5180a7..b69b29b9d55 100644
--- a/docs/examples-docs/zh-CN/changelog.md
+++ b/docs/markdown/zh-CN/changelog.md
@@ -4,12 +4,10 @@
 `2017-11-15`
 
 **Improvements**
-
-- Icon: 增加几个新 icons [\#315](https://github.com/youzan/vant/pull/315) ([cookfront](https://github.com/cookfront))
+- Icon: 增加几个新 icons [\#315](https://github.com/youzan/vant/pull/315) [@cookfront](https://github.com/cookfront)
 
 **Bug Fixes**
-
-- Search: 修复 box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) ([chenjiahan](https://github.com/chenjiahan))
+- Search: 修复 box-sizing 错误 [\#312](https://github.com/youzan/vant/pull/312) [@chenjiahan](https://github.com/chenjiahan)
 
 ### [0.10.8](https://github.com/youzan/vant/tree/v0.10.8)
 `2017-11-11`
diff --git a/docs/examples-docs/zh-CN/checkbox.md b/docs/markdown/zh-CN/checkbox.md
similarity index 72%
rename from docs/examples-docs/zh-CN/checkbox.md
rename to docs/markdown/zh-CN/checkbox.md
index 3be84ba8d89..cd220c5ec3d 100644
--- a/docs/examples-docs/zh-CN/checkbox.md
+++ b/docs/markdown/zh-CN/checkbox.md
@@ -1,33 +1,3 @@
-<style>
-.demo-checkbox {
-  .van-checkbox {
-    margin: 10px 0 0 20px;
-  }
-  .van-cell {
-    .van-checkbox {
-      margin: 0;
-    }
-  }
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      checkbox1: true,
-      checkbox2: true,
-      list: [
-        'a',
-        'b',
-        'c'
-      ],
-      result: ['a', 'b']
-    };
-  }
-};
-</script>
-
 ## Checkbox 复选框
 
 ### 使用指南
@@ -43,35 +13,30 @@ Vue.component(CheckboxGroup.name, CheckboxGroup);
 #### 基础用法
 通过`v-model`绑定 checkbox 的勾选状态
 
-:::demo 基础用法
 ```html
-<van-checkbox v-model="checkbox1">复选框 1</van-checkbox>
+<van-checkbox v-model="checked">复选框 1</van-checkbox>
 ```
 
 ```javascript
 export default {
   data() {
     return {
-      checkbox1: true
+      checked: true
     };
   }
 };
 ```
-:::
 
 #### 禁用状态
 
-:::demo 禁用状态
 ```html
-<van-checkbox v-model="checkbox2" disabled>复选框 2</van-checkbox>
+<van-checkbox v-model="checked" disabled>复选框 2</van-checkbox>
 ```
-:::
 
 #### Checkbox 组
 
 需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
 
-:::demo Checkbox 组
 ```html
 <van-checkbox-group v-model="result">
   <van-checkbox
@@ -94,35 +59,21 @@ export default {
   }
 };
 ```
-:::
 
 #### 与 Cell 组件一起使用
 
 此时你需要再引入`Cell`和`CellGroup`组件
 
-:::demo 与Cell组件一起使用
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
     <van-cell v-for="(item, index) in list" :key="index">
-      <van-checkbox :name="item">复选框{{ item }}</van-checkbox>
+      <van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      list: ['a', 'b', 'c'],
-      result: ['a', 'b']
-    };
-  }
-};
-```
-:::
-
 ### Checkbox API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
diff --git a/docs/examples-docs/zh-CN/contact.md b/docs/markdown/zh-CN/contact.md
similarity index 73%
rename from docs/examples-docs/zh-CN/contact.md
rename to docs/markdown/zh-CN/contact.md
index f32f46aa0e8..cd50b857be8 100644
--- a/docs/examples-docs/zh-CN/contact.md
+++ b/docs/markdown/zh-CN/contact.md
@@ -1,79 +1,3 @@
-<style>
-  .demo-contact {
-    .van-popup {
-      height: 100%;
-    }
-  }
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      chosenContactId: null,
-      editingContact: {},
-      showList: false,
-      showEdit: false,
-      isEdit: false,
-      list: [{
-        name: '张三',
-        tel: '13000000000',
-        id: 0
-      }]
-    };
-  },
-
-  computed: {
-    cardType() {
-      return this.chosenContactId !== null ? 'edit' : 'add';
-    },
-
-    currentContact() {
-      const id = this.chosenContactId;
-      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
-    }
-  },
-
-  methods: {
-    onAdd() {
-      this.editingContact = { id: this.list.length };
-      this.isEdit = false;
-      this.showEdit = true;
-    },
-
-    onEdit(item) {
-      this.isEdit = true;      
-      this.showEdit = true;
-      this.editingContact = item;
-    },
-
-    onSelect() {
-      this.showList = false;
-    },
-
-    onSave(info) {
-      this.showEdit = false;
-      this.showList = false;
-      
-      if (this.isEdit) {
-        this.list = this.list.map(item => item.id === info.id ? info : item);
-      } else {
-        this.list.push(info);
-      }
-      this.chosenContactId = info.id;
-    },
-
-    onDelete(info) {
-      this.showEdit = false;
-      this.list = this.list.filter(item => item.id !== info.id);
-      if (this.chosenContactId === info.id) {
-        this.chosenContactId = null;
-      }
-    }
-  }
-};
-</script>
-
 ## Contact 联系人
 通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
 
@@ -90,7 +14,6 @@ Vue.component(ContactEdit.name, ContactEdit);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <!-- 联系人卡片 -->
 <van-contact-card
@@ -98,7 +21,7 @@ Vue.component(ContactEdit.name, ContactEdit);
   :name="currentContact.name"
   :tel="currentContact.tel"
   @click="showList = true"
-></van-contact-card>
+/>
 
 <!-- 联系人列表 -->
 <van-popup v-model="showList" position="bottom">
@@ -114,8 +37,8 @@ Vue.component(ContactEdit.name, ContactEdit);
 <!-- 联系人编辑 -->
 <van-popup v-model="showEdit" position="bottom">
   <van-contact-edit
-    :contact-info="editingContact"
-    :is-edit="isEdit"
+    :contactInfo="editingContact"
+    :isEdit="isEdit"
     @save="onSave"
     @delete="onDelete"
   />
@@ -194,7 +117,7 @@ export default {
   }
 };
 ```
-:::
+
 
 ### ContactCard API
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
diff --git a/docs/examples-docs/zh-CN/coupon.md b/docs/markdown/zh-CN/coupon.md
similarity index 72%
rename from docs/examples-docs/zh-CN/coupon.md
rename to docs/markdown/zh-CN/coupon.md
index 92048fb5768..18e16e83ccf 100644
--- a/docs/examples-docs/zh-CN/coupon.md
+++ b/docs/markdown/zh-CN/coupon.md
@@ -1,71 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-const coupon = {
-  available: 1,
-  discount: 0,
-  denominations: 150,
-  origin_condition: 0,
-  reason: '',
-  value: 150,
-  condition: '下单立减 1.50 元',
-  name: '新手专用优惠券',
-  start_at: 1489104000,
-  end_at: 1514592000
-};
-
-const discountCoupon = {
-  ...coupon,
-  discount: 88,
-  denominations: 0,
-  origin_condition: 50,
-  value: 12,
-  condition: '下单即享 8.8 折',
-};
-
-const disabledCoupon = {
-  ...coupon,
-  avaliable: 0,
-  reason: '未满足使用门槛'
-};
-
-const disabledDiscountCoupon = {
-  ...discountCoupon,
-  avaliable: 0,
-  reason: '未满足使用门槛'
-};
-
-export default {
-  data() {
-    return {
-      showList: false,
-      chosenCoupon: -1,
-      coupons: [coupon, discountCoupon],
-      disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
-    }
-  },
-
-  methods: {
-    onChange(index) {
-      this.showList = false;      
-      this.chosenCoupon = index;
-    },
-    onExchange(code) {
-      Toast('兑换成功');
-      this.coupons.push(coupon);
-    }
-  }
-}
-</script>
-
-<style>
-.demo-coupon {
-  .van-popup {
-    height: 100%;
-  }
-}
-</style>
-
 ## Coupon 优惠券选择器
 
 ### 使用指南
@@ -80,24 +12,23 @@ Vue.component(CouponList.name, CouponList);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <!-- 优惠券单元格 -->
 <van-coupon-cell
   :coupons="coupons"
-  :chosen-coupon="chosenCoupon"
+  :chosenCoupon="chosenCoupon"
   @click="showList = true"
-></van-coupon-cell>
+/>
 
 <!-- 优惠券列表 -->
 <van-popup v-model="showList" position="bottom">
   <van-coupon-list
     :coupons="coupons"
-    :chosen-coupon="chosenCoupon"
-    :disabled-coupons="disabledCoupons"
+    :chosenCoupon="chosenCoupon"
+    :disabledCoupons="disabledCoupons"
     @change="onChange"
     @exchange="onExchange"
-  ></van-coupon-list>
+  />
 </van-popup>
 ```
 
@@ -135,7 +66,7 @@ export default {
   }
 }
 ```
-:::
+
 
 ### CouponCell API
 
diff --git a/docs/examples-docs/zh-CN/datetime-picker.md b/docs/markdown/zh-CN/datetime-picker.md
similarity index 74%
rename from docs/examples-docs/zh-CN/datetime-picker.md
rename to docs/markdown/zh-CN/datetime-picker.md
index 7d664da50ef..a9c0116afff 100644
--- a/docs/examples-docs/zh-CN/datetime-picker.md
+++ b/docs/markdown/zh-CN/datetime-picker.md
@@ -1,21 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      minHour: 10,
-      maxHour: 20,
-      minDate: new Date(),
-      maxDate: new Date(2019, 10, 1),
-      currentDate1: new Date(2018, 0, 1),
-      currentDate2: null,
-      currentDate3: null
-    };
-  }
-};
-</script>
-
 ## DatetimePicker 时间选择
 
 ### 使用指南
@@ -29,15 +11,14 @@ Vue.component(DatetimePicker.name, DatetimePicker);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <van-datetime-picker
-  v-model="currentDate1"
+  v-model="currentDate"
   type="datetime"
-  :min-hour="minHour"
-  :max-hour="maxHour"
-  :min-date="minDate"
-  :max-date="maxDate"
+  :minHour="minHour"
+  :maxHour="maxHour"
+  :minDate="minDate"
+  :maxDate="maxDate"
 />
 ```
 
@@ -54,36 +35,30 @@ export default {
   }
 };
 ```
-:::
 
 #### 选择日期
 
-:::demo 选择日期
 ```html
 <van-datetime-picker
-  v-model="currentDate2"
+  v-model="currentDate"
   type="date"
-  :min-hour="minHour"
-  :max-hour="maxHour"
-  :min-date="minDate"
+  :minHour="minHour"
+  :maxHour="maxHour"
+  :minDate="minDate"
 />
 ```
-:::
 
 #### 选择时间
 
-:::demo 选择时间
 ```html
 <van-datetime-picker
-  v-model="currentDate3"
+  v-model="currentDate"
   type="time"
-  :min-hour="minHour"
-  :max-hour="maxHour"
-  :min-date="minDate"
+  :minHour="minHour"
+  :maxHour="maxHour"
+  :minDate="minDate"
 />
 ```
-:::
-
 
 ### API
 
diff --git a/docs/markdown/zh-CN/dialog.md b/docs/markdown/zh-CN/dialog.md
new file mode 100644
index 00000000000..eac30892cb7
--- /dev/null
+++ b/docs/markdown/zh-CN/dialog.md
@@ -0,0 +1,63 @@
+## Dialog 弹出框
+
+### 使用指南
+
+```js
+import { Dialog } from 'vant';
+```
+
+### 代码演示
+
+#### 消息提示
+用于提示一些消息，只包含一个确认按钮
+
+```javascript
+Dialog.alert({
+  title: '标题',
+  message: '弹窗内容'
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: '弹窗内容'
+}).then(() => {
+  // on close
+});
+```
+
+#### 消息确认
+用于确认消息，包含取消和确认按钮
+
+```javascript
+Dialog.confirm({
+  title: '标题',
+  message: '弹窗内容'
+}).then(() => {
+  // on confirm
+}).catch(() => {
+  // on cancel
+});
+```
+
+### 方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
+| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
+| Dialog.close | - | `void` | 关闭弹窗 |
+
+### Options
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 标题 | `String` | - | - |
+| message | 内容 | `String` | - | - |
+| showConfirmButton | 是否展示确认按钮 | `Boolean` |  `true` | - |
+| showCancelButton | 是否展示取消按钮 | `Boolean` |  `false` | - |
+| confirmButtonText | 确认按钮的文案 | `String` |  `确认` | - |
+| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
+| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
+| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
+| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
diff --git a/docs/examples-docs/zh-CN/field.md b/docs/markdown/zh-CN/field.md
similarity index 87%
rename from docs/examples-docs/zh-CN/field.md
rename to docs/markdown/zh-CN/field.md
index ae9d029a4e6..afa97414661 100644
--- a/docs/examples-docs/zh-CN/field.md
+++ b/docs/markdown/zh-CN/field.md
@@ -1,22 +1,3 @@
-<style>
-.demo-field {
-  padding-bottom: 30px;
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      password: '',
-      username: '',
-      message: ''
-    };
-  }
-};
-</script>
-
 ## Field 输入框
 
 `input`或`textarea`的输入框。
@@ -33,18 +14,15 @@ Vue.component(Field.name, Field);
 #### 基础用法
 通过 v-model 绑定输入框的值
 
-:::demo 基础用法
 ```html
 <van-cell-group>
   <van-field v-model="value" placeholder="请输入用户名"></van-field>
 </van-cell-group>
 ```
-:::
 
 #### 自定义类型
 根据`type`属性定义不同类型的输入框
 
-:::demo 自定义类型
 ```html
 <van-cell-group>
   <van-field
@@ -66,32 +44,26 @@ Vue.component(Field.name, Field);
   </van-field>
 </van-cell-group>
 ```
-:::
 
 #### 禁用输入框
 
-:::demo 禁用输入框
 ```html
 <van-cell-group>
   <van-field value="输入框已禁用" label="用户名" disabled></van-field>
 </van-cell-group>
 ```
-:::
 
 #### 错误提示
 
-:::demo 错误提示
 ```html
 <van-cell-group>
   <van-field label="用户名" placeholder="请输入用户名" error></van-field>
 </van-cell-group>
 ```
-:::
 
 #### 高度自适应
 对于 textarea，可以通过`autosize`属性设置高度自适应
 
-:::demo 高度自适应
 ```html
 <van-cell-group>
   <van-field
@@ -105,7 +77,6 @@ Vue.component(Field.name, Field);
   </van-field>
 </van-cell-group>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/goods-action.md b/docs/markdown/zh-CN/goods-action.md
similarity index 83%
rename from docs/examples-docs/zh-CN/goods-action.md
rename to docs/markdown/zh-CN/goods-action.md
index 04fd34455e7..11689051c6d 100644
--- a/docs/examples-docs/zh-CN/goods-action.md
+++ b/docs/markdown/zh-CN/goods-action.md
@@ -1,26 +1,3 @@
-<script>
-import { Toast } from 'packages';
-
-export default {
-  methods: {
-    onClickMiniBtn() {
-      Toast('点击图标');
-    },
-    onClickBigBtn() {
-      Toast('点击按钮');
-    }
-  }
-}
-</script>
-
-<style>
-.demo-goods-action {
-  .van-goods-action {
-    position: relative;
-  }
-}
-</style>
-
 ## GoodsAction 商品页行动点
 
 ### 使用指南
@@ -38,7 +15,6 @@ Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
 
 ### 代码演示
 
-:::demo 
 ```html
 <van-goods-action>
   <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
@@ -68,7 +44,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/markdown/zh-CN/icon.md b/docs/markdown/zh-CN/icon.md
new file mode 100644
index 00000000000..b92eb7a056f
--- /dev/null
+++ b/docs/markdown/zh-CN/icon.md
@@ -0,0 +1,23 @@
+## Icon 图标
+
+### 使用指南
+``` javascript
+import { Icon } from 'vant';
+
+Vue.component(Icon.name, Icon);
+```
+
+### 代码演示
+
+#### 基础用法
+设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
+
+```html
+<van-icon name="success" />
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| name | icon名称 | `String` | `''` | - |
diff --git a/docs/markdown/zh-CN/image-preview.md b/docs/markdown/zh-CN/image-preview.md
new file mode 100644
index 00000000000..53996532320
--- /dev/null
+++ b/docs/markdown/zh-CN/image-preview.md
@@ -0,0 +1,36 @@
+## ImagePreview 图片预览
+
+### 使用指南
+
+`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
+
+```js
+import { ImagePreview } from 'vant';
+```
+
+### 代码演示
+
+#### 基础用法
+
+```javascript
+ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+]);
+```
+
+#### 指定初始位置
+
+```javascript
+ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+], 1);
+```
+
+### 方法参数
+
+| 参数名 | 说明 | 类型 |
+|-----------|-----------|-----------|
+| imageUrls | 需要预览的图片 | `Array` |
+| startPosition | 图片预览起始位置索引 | `Number` |
diff --git a/docs/examples-docs/zh-CN/layout.md b/docs/markdown/zh-CN/layout.md
similarity index 79%
rename from docs/examples-docs/zh-CN/layout.md
rename to docs/markdown/zh-CN/layout.md
index 9256c40b090..c9a01eb4ace 100644
--- a/docs/examples-docs/zh-CN/layout.md
+++ b/docs/markdown/zh-CN/layout.md
@@ -1,27 +1,3 @@
-<style>
-.demo-layout {
-  .van-row {
-    padding: 0 15px;
-  }
-  .van-col {
-    color: #fff;
-    font-size: 13px;
-    line-height: 30px;
-    text-align: center;
-    margin-bottom: 10px;
-    background-clip: content-box;
-
-    &:nth-child(odd) {
-      background-color: #39a9ed;
-    }
-
-    &:nth-child(even) {
-      background-color: #66c6f2;
-    }
-  }
-}
-</style>
-
 ## Layout 布局
 
 提供了`van-row`和`van-col`两个组件来进行行列布局
@@ -41,7 +17,6 @@ Vue.component(Col.name, Col);
 Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比    
 此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
 
-:::demo 基本用法
 ```html
 <van-row>
   <van-col span="8">span: 8</van-col>
@@ -58,13 +33,11 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
   <van-col offset="12" span="12">offset: 12, span: 12</van-col>
 </van-row>
 ```
-:::
 
 #### 设置列元素间距
 
 通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
 
-:::demo 在列元素之间增加间距
 ```html
 <van-row gutter="20">
   <van-col span="8">span: 8</van-col>
@@ -72,7 +45,6 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
   <van-col span="8">span: 8</van-col>
 </van-row>
 ```
-:::
 
 ### API
 
diff --git a/docs/markdown/zh-CN/lazyload.md b/docs/markdown/zh-CN/lazyload.md
new file mode 100644
index 00000000000..a6b23549591
--- /dev/null
+++ b/docs/markdown/zh-CN/lazyload.md
@@ -0,0 +1,67 @@
+## Lazyload 图片懒加载
+
+### 使用指南
+
+`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
+
+```js
+import Vue from 'vue';
+import { Lazyload } from 'vant';
+
+Vue.use(Lazyload, options);
+```
+
+### 代码演示
+
+#### 基础用法
+将`v-lazy`指令的值设置为你需要懒加载的图片
+
+```html
+<img v-for="img in imageList" v-lazy="img">
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]
+    };
+  }
+}
+```
+
+#### 背景图懒加载
+
+和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
+
+```html
+<div v-for="img in imageList" v-lazy:background-image="img" />
+```
+
+#### 懒加载模块
+
+懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
+
+```html
+<lazy-component>
+  <img v-for="img in imageList" v-lazy="img">
+</lazy-component>
+```
+
+### Options
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| loading | 加载时的图片 | `String` | - | - |
+| error | 错误时的图片 | `String` | - | - |
+| preload | 预加载高度的比例 | `String` | - | - |
+| attempt | 尝试次数 | `Number` | `3` | - |
+| listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
+| adapter | 适配器 | `Object` | - | - |
+| filter | 图片url过滤 | `Object` | - | - |
+| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |
+
+更多内容请参照：[ vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)
diff --git a/docs/markdown/zh-CN/loading.md b/docs/markdown/zh-CN/loading.md
new file mode 100644
index 00000000000..dda2c6e0301
--- /dev/null
+++ b/docs/markdown/zh-CN/loading.md
@@ -0,0 +1,38 @@
+## Loading 加载
+
+### 使用指南
+``` javascript
+import { Loading } from 'vant';
+
+Vue.component(Loading.name, Loading);
+```
+
+### 代码演示
+
+#### 单色圆环
+
+```html
+<van-loading type="circle" color="black" />
+<van-loading type="circle" color="white" />
+```
+
+#### 渐变色圆环
+
+```html
+<van-loading type="gradient-circle" color="black" />
+<van-loading type="gradient-circle" color="white" />
+```
+
+#### Spinner
+
+```html
+<van-loading type="spinner" color="black" />
+<van-loading type="spinner" color="white" />
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| color | 颜色 | `String` | `black` | `black` `white` |
+| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
diff --git a/docs/examples-docs/zh-CN/nav-bar.md b/docs/markdown/zh-CN/nav-bar.md
similarity index 67%
rename from docs/examples-docs/zh-CN/nav-bar.md
rename to docs/markdown/zh-CN/nav-bar.md
index cfa355e7093..ae5c48feac3 100644
--- a/docs/examples-docs/zh-CN/nav-bar.md
+++ b/docs/markdown/zh-CN/nav-bar.md
@@ -11,36 +11,32 @@ Vue.component(NavBar.name, NavBar);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <van-nav-bar
   title="标题"
-  left-text="返回"
-  right-text="按钮"
-  left-arrow
+  leftText="返回"
+  rightText="按钮"
+  leftArrow
 />
 ```
-:::
 
 #### 高级用法
 通过 slot 定制内容
 
-:::demo 高级用法
 ```html
-<van-nav-bar title="标题" left-text="返回" left-arrow>
+<van-nav-bar title="标题" leftText="返回" leftArrow>
   <van-icon name="search" slot="right" />
 </van-nav-bar>
 ```
-:::
 
 
 ### API
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | title | 标题 | `String` | `''` | - |
-| left-text | 左侧文案 | `String` | `''` | - |
-| right-text | 右侧文案 | `String` | `''` | - |
-| left-arrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
+| leftText | 左侧文案 | `String` | `''` | - |
+| rightText | 右侧文案 | `String` | `''` | - |
+| leftArrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
 | fixed | 是否固定在顶部 | `Boolean` | `false` | - |
 
 ### Slot
diff --git a/docs/examples-docs/zh-CN/notice-bar.md b/docs/markdown/zh-CN/notice-bar.md
similarity index 84%
rename from docs/examples-docs/zh-CN/notice-bar.md
rename to docs/markdown/zh-CN/notice-bar.md
index 4eaeccbfb96..b96abfd98aa 100644
--- a/docs/examples-docs/zh-CN/notice-bar.md
+++ b/docs/markdown/zh-CN/notice-bar.md
@@ -1,11 +1,3 @@
-<style>
-.demo-notice-bar {
-  .van-notice-bar:not(:first-of-type) {
-    margin-top: 15px;
-  }
-}
-</style>
-
 ## NoticeBar 通告栏
 
 ### 使用指南
@@ -19,31 +11,25 @@ Vue.component(NoticeBar.name, NoticeBar);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
-<van-notice-bar text="测试测试。"></van-notice-bar>
 <van-notice-bar
   text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
-  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+  leftIcon="https://img.yzcdn.cn/1.png"
 />
 ```
-:::
 
 #### 禁用滚动
 文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
 
-:::demo 禁用滚动
 ```html
 <van-notice-bar :scrollable="false">
   足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
 </van-notice-bar>
 ```
-:::
 
 #### 通告栏模式
 默认模式为空，支持`closeable`和`link`。
 
-:::demo 通告栏模式
 ```html
 <!-- closeable 模式，在右侧显示关闭按钮 -->
 <van-notice-bar mode="closeable">
@@ -55,7 +41,6 @@ Vue.component(NoticeBar.name, NoticeBar);
   足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
 </van-notice-bar>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/number-keyboard.md b/docs/markdown/zh-CN/number-keyboard.md
similarity index 80%
rename from docs/examples-docs/zh-CN/number-keyboard.md
rename to docs/markdown/zh-CN/number-keyboard.md
index 427a12c7e43..fe0fed0a543 100644
--- a/docs/examples-docs/zh-CN/number-keyboard.md
+++ b/docs/markdown/zh-CN/number-keyboard.md
@@ -1,32 +1,3 @@
-<style>
-.demo-number-keyboard {
-  .van-button {
-    margin-left: 15px;
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages';
-
-export default {
-  data() {
-    return {
-      showKeyboard: true
-    }
-  },
-
-  methods: {
-    onInput(value) {
-      Toast('Input: ' + value);
-    },
-    onDelete() {
-      Toast('Delete');
-    }
-  }
-}
-</script>
-
 ## NumberKeyboard 数字键盘
 
 ### 使用指南
@@ -40,7 +11,6 @@ Vue.component(NumberKeyboard.name, NumberKeyboard);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <van-button @touchstart.native.stop="showKeyboard = true">
   弹出键盘
@@ -76,8 +46,6 @@ export default {
   }
 }
 ```
-:::
-
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/panel.md b/docs/markdown/zh-CN/panel.md
similarity index 58%
rename from docs/examples-docs/zh-CN/panel.md
rename to docs/markdown/zh-CN/panel.md
index b4647334c05..6657748a854 100644
--- a/docs/examples-docs/zh-CN/panel.md
+++ b/docs/markdown/zh-CN/panel.md
@@ -1,19 +1,3 @@
-<style>
-.demo-panel {
-  .van-panel__footer {
-    text-align: right;
-
-    .van-button {
-      margin-left: 5px;
-    }
-  }
-
-  .van-panel__content {
-    padding: 20px;
-  }
-}
-</style>
-
 ## Panel 面板
 
 ### 使用指南
@@ -28,28 +12,24 @@ Vue.component(Panel.name, Panel);
 #### 基础用法
 面板只是一个容器，里面可以放入自定义的内容
 
-:::demo 基础用法
 ```html
-<van-panel title="标题" desc="标题描述" status="状态">
-  <div>Panel内容</div>
+<van-panel title="标题" desc="描述信息" status="状态">
+  <div>内容</div>
 </van-panel>
 ```
-:::
 
 #### 高级用法
 使用`slot`自定义内容
 
-:::demo 高级用法
 ```html
-<van-panel title="标题" desc="标题描述" status="状态">
-  <div>Panel内容</div>
+<van-panel title="标题" desc="描述信息" status="状态">
+  <div>内容</div>
   <div slot="footer">
-    <van-button size="small">按钮一</van-button>
-    <van-button size="small" type="danger">按钮二</van-button>
+    <van-button size="small">按钮</van-button>
+    <van-button size="small" type="danger">按钮</van-button>
   </div>
 </van-panel>
 ```
-:::
 
 ### API
 
@@ -59,7 +39,6 @@ Vue.component(Panel.name, Panel);
 | desc | 描述 | `String` | - | - |
 | status | 状态 | `String` | - | - |
 
-
 ### Slot
 
 | name | 描述 |
diff --git a/docs/examples-docs/zh-CN/password-input.md b/docs/markdown/zh-CN/password-input.md
similarity index 78%
rename from docs/examples-docs/zh-CN/password-input.md
rename to docs/markdown/zh-CN/password-input.md
index 56ddb58b44e..70313ba0b2a 100644
--- a/docs/examples-docs/zh-CN/password-input.md
+++ b/docs/markdown/zh-CN/password-input.md
@@ -1,23 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      showKeyboard: true
-    }
-  },
-
-  methods: {
-    onInput(key) {
-      this.value = (this.value + key).slice(0, 6);
-    },
-    onDelete() {
-      this.value = this.value.slice(0, this.value.length - 1);
-    }
-  }
-}
-</script>
-
 ## PasswordInput 密码输入框
 密码输入框组件通常与 [数字键盘](#/zh-CN/component/number-keyboard) 组件配合使用
 
@@ -33,14 +13,13 @@ Vue.component(NumberKeyBoard.name, NumberKeyBoard);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <!-- 密码输入框 -->
 <van-password-input
   :value="value"
   info="密码为 6 位数字"
   @focus="showKeyboard = true"
-></van-password-input>
+/>
 
 <!-- 数字键盘 -->
 <van-number-keyboard
@@ -48,7 +27,7 @@ Vue.component(NumberKeyBoard.name, NumberKeyBoard);
   @input="onInput"
   @delete="onDelete"
   @blur="showKeyboard = false"
-></van-number-keyboard>
+/>
 ```
 
 ```javascript
@@ -57,7 +36,7 @@ export default {
     return {
       value: '',
       showKeyboard: true
-    }
+    };
   },
 
   methods: {
@@ -70,7 +49,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/picker.md b/docs/markdown/zh-CN/picker.md
similarity index 53%
rename from docs/examples-docs/zh-CN/picker.md
rename to docs/markdown/zh-CN/picker.md
index e02b85dad29..83a4ff41a4a 100644
--- a/docs/examples-docs/zh-CN/picker.md
+++ b/docs/markdown/zh-CN/picker.md
@@ -1,43 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-const citys = {
-  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
-  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
-};
-
-export default {
-  data() {
-    return {
-      title: '地区选择',
-      pickerColumns: [
-        {
-          values: Object.keys(citys),
-          className: 'column1'
-        },
-        {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-          className: 'column2'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    handlePickerChange(picker, values) {
-      picker.setColumnValues(1, citys[values[0]]);
-    },
-    handlePickerCancel() {
-      Toast('picker cancel');
-    },
-    handlePickerConfirm() {
-      Toast('picker confirm');
-    }
-  }
-};
-</script>
-
 ## Picker 选择器
 
 ### 使用指南
@@ -51,16 +11,14 @@ Vue.component(Picker.name, Picker);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
-<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
+<van-picker :columns="pickerColumns" @change="onChange" />
 ```
 
 ```javascript
 const citys = {
-  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
-  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
 };
 
 export default {
@@ -72,7 +30,7 @@ export default {
           className: 'column1'
         },
         {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          values: citys['浙江'],
           className: 'column2'
         }
       ]
@@ -80,33 +38,30 @@ export default {
   },
 
   methods: {
-    handlePickerChange(picker, values) {
+    onChange(picker, values) {
       picker.setColumnValues(1, citys[values[0]]);
     }
   }
 };
 ```
-:::
 
-#### 带toolbar的Picker
+#### 带 toolbar 的 Picker
 
-:::demo 带toolbar的Picker
 ```html
 <van-picker
-  show-toolbar
+  showToolbar
   :title="title"
   :columns="pickerColumns"
-  @change="handlePickerChange"
-  @cancel="handlePickerCancel"
-  @confirm="handlePickerConfirm"
-></van-picker>
+  @change="onChange"
+  @cancel="onCancel"
+  @confirm="onConfirm"
+/>
 ```
 
 ```javascript
 const citys = {
-  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
-  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
 };
 
 export default {
@@ -119,7 +74,7 @@ export default {
           className: 'column1'
         },
         {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          values: citys['浙江'],
           className: 'column2'
         }
       ]
@@ -127,19 +82,18 @@ export default {
   },
 
   methods: {
-    handlePickerChange(picker, values) {
+    onChange(picker, values) {
       picker.setColumnValues(1, citys[values[0]]);
     },
-    handlePickerCancel() {
-      alert('picker cancel');
+    onCancel() {
+      Toast('picker cancel');
     },
-    handlePickerConfirm() {
-      alert('picker confirm');
+    onConfirm() {
+      Toast('picker confirm');
     }
   }
 };
 ```
-:::
 
 ### API
 
diff --git a/docs/markdown/zh-CN/popup.md b/docs/markdown/zh-CN/popup.md
new file mode 100644
index 00000000000..7492131b101
--- /dev/null
+++ b/docs/markdown/zh-CN/popup.md
@@ -0,0 +1,48 @@
+## Popup 弹出层
+
+### 使用指南
+``` javascript
+import { Popup } from 'vant';
+
+Vue.component(Popup.name, Popup);
+```
+
+### 代码演示
+
+#### 基础用法
+`popup`默认从中间弹出
+
+```html
+<van-popup v-model="show">内容</van-popup>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false
+    }
+  }
+};
+```
+
+#### 弹出位置
+通过`position`属性设置 Popup 弹出位置
+
+```html
+<van-popup v-model="show" position="top" :overlay="false">
+  内容
+</van-popup>
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
+| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
+| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
+| position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
+| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
+| transition | 弹出层的`transition` | `String` | `popup-slide` | - |
+| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
diff --git a/docs/examples-docs/zh-CN/progress.md b/docs/markdown/zh-CN/progress.md
similarity index 50%
rename from docs/examples-docs/zh-CN/progress.md
rename to docs/markdown/zh-CN/progress.md
index 1f7a0314ca1..d31c09377a6 100644
--- a/docs/examples-docs/zh-CN/progress.md
+++ b/docs/markdown/zh-CN/progress.md
@@ -1,11 +1,3 @@
-<style>
-.demo-progress {
-  .van-progress {
-    margin: 20px 10px;
-  }
-} 
-</style>
-
 ## Progress 进度条
 
 ### 使用指南
@@ -21,37 +13,31 @@ Vue.component(Progress.name, Progress);
 
 进度条默认为蓝色，使用`percentage`属性来设置当前进度
 
-:::demo 基础用法
 ```html
-<van-progress :percentage="0"></van-progress>
-<van-progress :percentage="46"></van-progress>
-<van-progress :percentage="100"></van-progress>
+<van-progress :percentage="0" />
+<van-progress :percentage="46" />
+<van-progress :percentage="100" />
 ```
-:::
 
 
 #### 进度条置灰
 
-:::demo 进度条置灰
 ```html
-<van-progress inactive :percentage="0"></van-progress>
-<van-progress inactive :percentage="46"></van-progress>
-<van-progress inactive :percentage="100"></van-progress>
+<van-progress inactive :percentage="0" />
+<van-progress inactive :percentage="46" />
+<van-progress inactive :percentage="100" />
 ```
-:::
 
 
 #### 样式定制
 
-可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
+可以使用`pivotText`属性自定义文字，`color`属性自定义进度条颜色
 
-:::demo 样式定制
 ```html
-<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
-<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
-<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
+<van-progress pivotText="红色" color="#ed5050" :percentage="26" />
+<van-progress pivotText="橙色" color="#f60" :percentage="46" />
+<van-progress pivotText="黄色" color="#f09000" :percentage="66" />
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/pull-refresh.md b/docs/markdown/zh-CN/pull-refresh.md
similarity index 61%
rename from docs/examples-docs/zh-CN/pull-refresh.md
rename to docs/markdown/zh-CN/pull-refresh.md
index 3326d651db4..cb6ad0f7dac 100644
--- a/docs/examples-docs/zh-CN/pull-refresh.md
+++ b/docs/markdown/zh-CN/pull-refresh.md
@@ -1,55 +1,3 @@
-<style>
-.demo-pull-refresh {
-  .zan-doc-demo-block__title,
-  .zan-doc-demo-block__subtitle {
-    display: none;
-  }
-
-  .van-pull-refresh {
-    height: 450px;
-    background-color: #fff;
-    
-    .zan-doc-demo-block__title {
-      display: block;
-    }
-    
-    p {
-      margin: 10px 0 0 15px;
-    }
-  }
-}
-</style>
-
-<script>
-import { Toast } from 'packages';
-
-export default {
-  data() {
-    return {
-      count: 0,
-      isLoading: false
-    }
-  },
-
-  watch: {
-    isLoading() {
-      if (this.isLoading) {
-        setTimeout(() => {
-          Toast('刷新成功');
-          this.isLoading = false;
-          this.count++;
-        }, 500);
-      }
-    }
-  },
-
-  mounted() {
-    const head = document.querySelector('.van-pull-refresh__head');
-    head.insertAdjacentHTML('afterend', '<h1 class="zan-doc-demo-block__title">PullRefresh 下拉刷新</h1>');
-  }
-}
-</script>
-
 ## PullRefresh 下拉刷新
 
 ### 使用指南
@@ -61,7 +9,6 @@ Vue.component(PullRefresh.name, PullRefresh);
 
 ### 代码演示
 
-:::demo  
 ```html
 <!-- 通过 v-model 控制加载状态 -->
 <van-pull-refresh v-model="isLoading">
@@ -91,7 +38,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/quickstart.md b/docs/markdown/zh-CN/quickstart.md
similarity index 100%
rename from docs/examples-docs/zh-CN/quickstart.md
rename to docs/markdown/zh-CN/quickstart.md
diff --git a/docs/examples-docs/zh-CN/radio.md b/docs/markdown/zh-CN/radio.md
similarity index 50%
rename from docs/examples-docs/zh-CN/radio.md
rename to docs/markdown/zh-CN/radio.md
index 8823f92dde5..2bea771d378 100644
--- a/docs/examples-docs/zh-CN/radio.md
+++ b/docs/markdown/zh-CN/radio.md
@@ -1,28 +1,3 @@
-<style>
-.demo-radio {
-  .van-radios {
-    padding: 0 20px;
-
-    .van-radio {
-      margin: 10px 0;
-    }
-  }
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      radio1: '1',
-      radio2: '2',
-      radio3: '1',
-      radio4: '1'
-    };
-  }
-};
-</script>
-
 ## Radio 单选框
 
 ### 使用指南
@@ -38,97 +13,55 @@ Vue.component(Radio.name, Radio);
 
 通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
 
-:::demo 基础用法
 ```html
-<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>
+<van-radio name="1" v-model="radio">单选框 1</van-radio>
+<van-radio name="2" v-model="radio">单选框 2</van-radio>
 ```
+
 ```javascript
 export default {
   data() {
     return {
-      radio1: '1'
+      radio: '1'
     }
   }
 };
 ```
-:::
 
 #### 禁用状态
 
 设置`disabled`属性即可，此时`Radio`不能点击。
 
-:::demo 禁用状态
 ```html
-<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>
+<van-radio name="1" v-model="radio" disabled>未选中禁用</van-radio>
+<van-radio name="2" v-model="radio" disabled>选中且禁用</van-radio>
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      radio2: '2'
-    }
-  }
-};
-```
-:::
 
-#### radio组
+#### Radio 组
 
 需要与`van-radio-group`一起使用，在`van-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
 
-:::demo radio组
 ```html
-<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>
-```
-  
-```javascript
-export default {
-  data() {
-    return {
-      radio3: '1'
-    }
-  }
-};
+<van-radio-group v-model="radio">
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2">单选框 2</van-radio>
+</van-radio-group>
 ```
-:::
 
 #### 与 Cell 组件一起使用
 
 此时你需要再引入`Cell`和`CellGroup`组件。
 
-:::demo 与 Cell 组件一起使用
 ```html
-<van-radio-group v-model="radio4">
+<van-radio-group v-model="radio">
   <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><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>
 ```
 
-```javascript
-export default {
-  data() {
-    return {
-      radio4: '1'
-    }
-  }
-};
-```
-:::
-
 ### Radio API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
diff --git a/docs/examples-docs/zh-CN/search.md b/docs/markdown/zh-CN/search.md
similarity index 76%
rename from docs/examples-docs/zh-CN/search.md
rename to docs/markdown/zh-CN/search.md
index a4c62a82b2f..baf4e5c65d2 100644
--- a/docs/examples-docs/zh-CN/search.md
+++ b/docs/markdown/zh-CN/search.md
@@ -1,32 +1,3 @@
-<script>
-import { Toast } from 'packages/index';
-
-export default {
-  data() {
-    return {
-      value: '',
-    };
-  },
-
-  methods: {
-    onSearch() {
-      Toast(this.value);
-    },
-    onCancel() {
-      Toast('cancel');
-    }
-  }
-};
-</script>
-
-<style>
-.demo-search {
-  .van-search__action div {
-    padding: 0 10px;
-  }
-}
-</style>
-
 ## Search 搜索
 
 ### 使用指南
@@ -41,44 +12,38 @@ Vue.component(Search.name, Search);
 #### 基础用法
 `van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
 
-:::demo 基础用法
 ```html
-<van-search placeholder="搜索框基础用法" v-model="value" />
+<van-search placeholder="请输入商品名称" v-model="value" />
 ```
-:::
 
 #### 监听对应事件
 `van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
 
 Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮
 
-:::demo 监听对应事件
 ```html
 <form action="/">
   <van-search
     v-model="value"
     placeholder="请输入商品名称"
-    :show-action="true"
+    :showAction="true"
     @search="onSearch"
     @cancel="onCancel">
   </van-search>
 </form>
 ```
-:::
 
 #### 自定义行动按钮
 `van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。
 
-:::demo 自定义行动按钮
 ```html
 <van-search
   v-model="value"
-  :show-action="true"
+  :showAction="true"
   @search="onSearch">
   <div slot="action" @click="onSearch">搜索</div>
 </van-search>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/sku.md b/docs/markdown/zh-CN/sku.md
similarity index 65%
rename from docs/examples-docs/zh-CN/sku.md
rename to docs/markdown/zh-CN/sku.md
index 80d642f94e5..022101b9436 100644
--- a/docs/examples-docs/zh-CN/sku.md
+++ b/docs/markdown/zh-CN/sku.md
@@ -1,50 +1,5 @@
 ## Sku 商品购买组件
 
-<script>
-import data from '../../mock/sku';
-
-const goods = data.goods_info;
-goods.picture = goods.picture[0];
-
-export default {
-  data() {
-    return {
-      showBase: false,
-      showCustomAction: false,
-      sku: data.sku,
-      goods: goods,
-      goodsId: data.goods_id,
-      quota: data.quota,
-      quotaUsed: data.quota_used,
-      disableStepperInput: true,
-      resetStepperOnHide: true,
-      initialSku: {
-        s1: '30349',
-        s2: '1193'
-      }
-    }
-  },
-
-  methods: {
-    handleBuyClicked(data) {
-      alert(JSON.stringify(data));
-    },
-    handleAddCartClicked(data) {
-      alert(JSON.stringify(data));
-    },
-    handlePointClicked() {
-      alert('积分兑换');
-    }
-  }
-}
-</script>
-
-<style>
-  .sku-container {
-    padding: 0 15px;
-  }
-</style>
-
 ### 使用指南
 ```javascript
 import { Sku } from 'vant';
@@ -54,70 +9,58 @@ Vue.component(Sku.name, Sku);
 
 ### 代码演示
 #### 基础用法
-:::demo 
+
 ```html
-<template>
-  <div class="sku-container">
-    <van-sku
-      v-model="showBase"
-      :sku="sku"
-      :goods="goods"
-      :goods-id="goodsId"
-      :hide-stock="sku.hide_stock"
-      :quota="quota"
-      :quota-used="quotaUsed"
-      :reset-stepper-on-hide="resetStepperOnHide"
-      :disable-stepper-input="disableStepperInput"
-      @buy-clicked="handleBuyClicked"
-      @add-cart="handleAddCartClicked"
-    >
-    </van-sku>
-    <van-button type="primary" @click="showBase = true" block>基础用法</van-button>
-  </d>
-</template>
+<van-sku
+  v-model="showBase"
+  :sku="sku"
+  :goods="goods"
+  :goodsId="goodsId"
+  :hideStock="sku.hide_stock"
+  :quota="quota"
+  :quotaUsed="quotaUsed"
+  :resetStepperOnHide="resetStepperOnHide"
+  :disableStepperInput="disableStepperInput"
+  @buy-clicked="handleBuyClicked"
+  @add-cart="handleAddCartClicked"
+/>
 ```
-:::
 
-#### 自定义sku slot区块
-:::demo 
+#### 自定义 sku slot 区块
+
 ```html
-<template>
-  <div class="sku-container">
-    <van-sku
-      v-model="showCustomAction"
-      stepper-title="我要买"
-      :sku="sku"
-      :goods="goods"
-      :goods-id="goodsId"
-      :hide-stock="sku.hide_stock"
-      :show-add-cart-btn="true"
-      :quota="quota"
-      :quota-used="quotaUsed"
-      :reset-stepper-on-hide="true"
-      :initial-sku="initialSku"
-      @buy-clicked="handleBuyClicked"
-      @add-cart="handleAddCartClicked"
-    >
-      <!-- 隐藏sku messages -->
-      <template slot="sku-messages"></template>
-      <!-- 自定义sku actions -->
-      <template slot="sku-actions" slot-scope="props">
-        <div class="van-sku-actions">
-          <button class="van-sku__add-cart-btn" @click="handlePointClicked">
-            积分兑换
-          </button>
-          <!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
-          <button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
-            买买买
-          </button>
-        </div>
-      </template>
-    </van-sku>
-    <van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
-  </d>
-</template>
+<van-sku
+  v-model="showCustomAction"
+  stepperTitle="我要买"
+  :sku="sku"
+  :goods="goods"
+  :goodsId="goodsId"
+  :hideStock="sku.hide_stock"
+  :showAddCartBtn="true"
+  :quota="quota"
+  :quotaUsed="quotaUsed"
+  :resetStepperOnHide="true"
+  :initialSku="initialSku"
+  @buy-clicked="handleBuyClicked"
+  @add-cart="handleAddCartClicked"
+>
+  <!-- 隐藏sku messages -->
+  <template slot="sku-messages"></template>
+  <!-- 自定义sku actions -->
+  <template slot="sku-actions" slot-scope="props">
+    <div class="van-sku-actions">
+      <button class="van-sku__add-cart-btn" @click="handlePointClicked">
+        积分兑换
+      </button>
+      <!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
+      <button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
+        买买买
+      </button>
+    </div>
+  </template>
+</van-sku>
 ```
-:::
+
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/stepper.md b/docs/markdown/zh-CN/stepper.md
similarity index 74%
rename from docs/examples-docs/zh-CN/stepper.md
rename to docs/markdown/zh-CN/stepper.md
index fe24b38b211..8034518f78c 100644
--- a/docs/examples-docs/zh-CN/stepper.md
+++ b/docs/markdown/zh-CN/stepper.md
@@ -1,22 +1,3 @@
-<style>
-.demo-stepper {
-  .van-stepper {
-    margin-left: 15px;
-  }
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      stepper1: 1,
-      stepper2: null,
-    };
-  }
-};
-</script>
-
 ## Stepper 步进器
 
 ### 使用指南
@@ -30,9 +11,8 @@ Vue.component(Stepper.name, Stepper);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
-<van-stepper v-model="stepper1" />
+<van-stepper v-model="value" />
 ```
 
 ```javascript
@@ -44,26 +24,21 @@ export default {
   }
 }
 ```
-:::
 
 #### 禁用状态
 通过设置`disabled`属性来禁用 stepper
 
-:::demo 禁用状态
 ```html
-<van-stepper v-model="stepper1" disabled />
+<van-stepper v-model="value" disabled />
 ```
-:::
 
 #### 高级用法
 
 默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性
 
-:::demo 高级用法
 ```html
-<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9" />
+<van-stepper v-model="value" min="5" max="40" step="2" defaultValue="9" />
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/steps.md b/docs/markdown/zh-CN/steps.md
similarity index 60%
rename from docs/examples-docs/zh-CN/steps.md
rename to docs/markdown/zh-CN/steps.md
index 7a9f6412085..1c2f0608d4a 100644
--- a/docs/examples-docs/zh-CN/steps.md
+++ b/docs/markdown/zh-CN/steps.md
@@ -1,43 +1,3 @@
-<style>
-.demo-steps {
-  .steps-success,
-  .van-icon-location {
-    color: #06bf04;
-  }
-
-  .van-button {
-    margin: 15px 0 0 15px;
-  }
-
-  .van-steps__message + p {
-    margin-bottom: 10px;
-  }
-
-  p,
-  h3 {
-    margin: 0;
-    font-size: inherit;
-    font-weight: normal;
-  }
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      active: 0
-    };
-  },
-
-  methods: {
-    nextStep() {
-      this.active = ++this.active % 4;
-    }
-  }
-}
-</script>
-
 ## Steps 步骤条
 
 ### 使用指南
@@ -52,7 +12,6 @@ Vue.component(Steps.name, Steps);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <van-steps :active="active">
   <van-step>买家下单</van-step>
@@ -60,8 +19,6 @@ Vue.component(Steps.name, Steps);
   <van-step>买家提货</van-step>
   <van-step>交易完成</van-step>
 </van-steps>
-
-<van-button @click="nextStep">下一步</van-button>
 ```
 
 ```javascript
@@ -70,29 +27,20 @@ export default {
     return {
       active: 0
     };
-  },
-
-  methods: {
-    nextStep() {
-      this.active = ++this.active % 4;
-    }
   }
 }
 ```
-:::
 
 #### 物流描述
 
 通过`title`和`description`属性来定义物流描述信息
 
-:::demo 物流描述
 ```html
 <van-steps
   :active="active"
   icon="logistics"
-  icon-class="steps-success"
-  title="等待商家发货"
-  description="物流描述"
+  title="标题"
+  description="描述信息"
 >
   <van-step>买家下单</van-step>
   <van-step>商家接单</van-step>
@@ -100,15 +48,12 @@ export default {
   <van-step>交易完成</van-step>
 </van-steps>
 ```
-:::
 
 #### 竖向步骤条
-
 可以通过设置`direction`属性来改变步骤条的显示方式
 
-:::demo 竖向步骤条
 ```html
-<van-steps direction="vertical" :active="0" active-color="#f60">
+<van-steps direction="vertical" :active="0" activeColor="#f60">
   <van-step>
     <h3>【城市】物流状态1</h3>
     <p>2016-07-12 12:40</p>
@@ -123,23 +68,6 @@ export default {
   </van-step>
 </van-steps>
 ```
-:::
-
-### 高级用法
-使用`slot`增加自定义内容
-
-:::demo 高级用法
-```html
-<van-steps :active="active" title="等待商家发货">
-  <van-icon slot="icon" name="location"></van-icon>
-  <p slot="message-extra">物流进度</p>
-  <van-step>买家下单</van-step>
-  <van-step>商家接单</van-step>
-  <van-step>买家提货</van-step>
-  <van-step>交易完成</van-step>  
-</van-steps>
-```
-:::
 
 ### Steps API
 
diff --git a/docs/examples-docs/zh-CN/submit-bar.md b/docs/markdown/zh-CN/submit-bar.md
similarity index 62%
rename from docs/examples-docs/zh-CN/submit-bar.md
rename to docs/markdown/zh-CN/submit-bar.md
index 6d0617f2284..944ec64c5b5 100644
--- a/docs/examples-docs/zh-CN/submit-bar.md
+++ b/docs/markdown/zh-CN/submit-bar.md
@@ -1,31 +1,5 @@
 ## SubmitBar 提交订单栏
 
-<script>
-import { Toast } from 'packages';
-
-export default {
-  methods: {
-    onClickButton() {
-      Toast('点击按钮');
-    },
-    onClickEditAddress() {
-      Toast('修改地址');
-    }
-  }
-}
-</script>
-
-<style>
-.demo-submit-bar {
-  .van-submit-bar {
-    position: relative;
-  }
-  .van-edit-address {
-    color: #38F;
-  }
-}
-</style>
-
 ### 使用指南
 ``` javascript
 import { SubmitBar } from 'vant';
@@ -37,67 +11,61 @@ Vue.component(SubmitBar.name, SubmitBar);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
 <van-submit-bar
   :price="3050"
-  button-text="提交订单"
+  buttonText="提交订单"
   @submit="onClickButton"
 />
 ```
-:::
 
 #### 禁用状态
 禁用状态下不会触发`submit`事件
 
-:::demo 禁用状态
 ```html
 <van-submit-bar
   disabled
   :price="3050"
-  button-text="提交订单"
+  buttonText="提交订单"
   tip="您的收货地址不支持同城送, 我们已为您推荐快递"
   @submit="onClickButton"
 />
 ```
-:::
 
 #### 加载状态
 加载状态下不会触发`submit`事件
-:::demo 加载状态
+
 ```html
 <van-submit-bar
   loading
   :price="3050"
-  button-text="提交订单"
+  buttonText="提交订单"
   @submit="onClickButton"
 />
 ```
-:::
 
-#### 
+#### 高级用法
 提示文案中的额外操作和说明
-:::demo 提示文案中添加操作
+
 ```html
 <van-submit-bar
   :price="3050"
-  button-text="提交订单"
+  buttonText="提交订单"
   @submit="onClickButton"
 >
   <span slot="tip">
-    您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
+    您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
   </span>
 </van-submit-bar>
 ```
-:::
 
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
 | price | 价格（单位分） |  `Number` | - | 是 |
-| button-text | 按钮文字 | `String` | - | 是 |
-| button-type | 按钮类型 |  `String` | `danger` | 否 |
+| buttonText | 按钮文字 | `String` | - | 是 |
+| buttonType | 按钮类型 |  `String` | `danger` | 否 |
 | tip | 提示文案 |  `String` | - | 否 |
 | disabled | 是否禁用按钮 |  `Boolean` | `false` | 否 |
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` | 否 |
diff --git a/docs/examples-docs/zh-CN/swipe.md b/docs/markdown/zh-CN/swipe.md
similarity index 57%
rename from docs/examples-docs/zh-CN/swipe.md
rename to docs/markdown/zh-CN/swipe.md
index 5470707b8ad..eb7d480837e 100644
--- a/docs/examples-docs/zh-CN/swipe.md
+++ b/docs/markdown/zh-CN/swipe.md
@@ -1,54 +1,3 @@
-<style>
-.demo-swipe {
-  padding-bottom: 30px;
-
-  .van-swipe {
-    cursor: pointer;
-
-    &-item {
-      color: #fff;
-      min-height: 140px;
-      font-size: 20px;
-      text-align: center;
-      line-height: 150px;
-
-      &:nth-child(even) {
-        background-color: #39a9ed;
-      }
-
-      &:nth-child(odd) {
-        background-color: #66c6f2;
-      }
-    }
-
-    img {
-      width: 100%;
-      height: 240px;
-      display: block;
-      padding: 30px 60px;
-      box-sizing: border-box;
-      background-color: #fff;
-      pointer-events: none;
-    }
-  }
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      images: [
-        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
-        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
-      ]
-    };
-  }
-};
-</script>
-
 ## Swipe 轮播
 
 ### 使用指南
@@ -64,7 +13,6 @@ Vue.component(SwipeItem.name, SwipeItem);
 #### 基础用法
 通过`autoplay`属性设置自动轮播间隔
 
-:::demo 基础用法
 ```html
 <van-swipe :autoplay="3000">
   <van-swipe-item>1</van-swipe-item>
@@ -73,12 +21,10 @@ Vue.component(SwipeItem.name, SwipeItem);
   <van-swipe-item>4</van-swipe-item>
 </van-swipe>
 ```
-:::
 
 #### 图片懒加载
 配合 [Lazyload](#/zh-CN/component/lazyload) 组件实现图片懒加载
 
-:::demo 图片懒加载
 ```html
 <van-swipe :autoplay="3000">
   <van-swipe-item v-for="(image, index) in images" :key="index">
@@ -99,7 +45,6 @@ export default {
   }
 }
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/switch-cell.md b/docs/markdown/zh-CN/switch-cell.md
similarity index 79%
rename from docs/examples-docs/zh-CN/switch-cell.md
rename to docs/markdown/zh-CN/switch-cell.md
index 3474e56c754..5064153e75d 100644
--- a/docs/examples-docs/zh-CN/switch-cell.md
+++ b/docs/markdown/zh-CN/switch-cell.md
@@ -2,16 +2,6 @@
 
 `SwitchCell`组件是对`Switch`和`Cell`组件的封装
 
-<script>
-export default {
-  data() {
-    return {
-      checked: true
-    }
-  }
-}
-</script>
-
 ### 使用指南
 ``` javascript
 import { SwitchCell } from 'vant';
@@ -23,7 +13,7 @@ Vue.component(SwitchCell.name, SwitchCell);
 
 #### 基础用法
 
-:::demo 基础用法
+
 ```html
 <van-cell-group>
   <van-switch-cell v-model="checked" title="标题" />
@@ -39,29 +29,24 @@ export default {
   }
 }
 ```
-:::
 
 #### 禁用状态
 通过`disabled`属性可以将组件设置为禁用状态
 
-:::demo 禁用状态
 ```html
 <van-cell-group>
-  <van-switch-cell v-model="checked" :disabled="true" title="标题" />
+  <van-switch-cell v-model="checked" disabled title="标题" />
 </van-cell-group>
 ```
-:::
 
 #### 加载状态
 通过`loading`属性可以将组件设置为加载状态
 
-:::demo 加载状态
 ```html
 <van-cell-group>
-  <van-switch-cell v-model="checked" :loading="true" title="标题" />
+  <van-switch-cell v-model="checked" loading title="标题" />
 </van-cell-group>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/switch.md b/docs/markdown/zh-CN/switch.md
similarity index 64%
rename from docs/examples-docs/zh-CN/switch.md
rename to docs/markdown/zh-CN/switch.md
index 5511d5d6824..3d439c3283b 100644
--- a/docs/examples-docs/zh-CN/switch.md
+++ b/docs/markdown/zh-CN/switch.md
@@ -1,35 +1,3 @@
-<style>
-.demo-switch {
-  .van-switch {
-    margin: 0 15px;
-  }
-}
-</style>
-
-<script>
-import Dialog from 'packages/dialog';
-
-export default {
-  data() {
-    return {
-      checked: true,
-      checked2: true
-    };
-  },
-
-  methods: {
-    onInput(checked) {
-      Dialog.confirm({
-        title: '提醒',
-        message: '是否切换开关？'
-      }).then(() => {
-        this.checked2 = checked;
-      });
-    }
-  }
-};  
-</script>
-
 ## Switch 开关
 
 ### 使用指南
@@ -42,8 +10,6 @@ Vue.component(Switch.name, Switch);
 ### 代码演示
 
 #### 基础用法
-
-:::demo 基础用法
 ```html
 <van-switch v-model="checked" />
 ```
@@ -57,32 +23,27 @@ export default {
   }
 };  
 ```
-:::
 
 #### 禁用状态
-:::demo 禁用状态
 ```html
 <van-switch v-model="checked" disabled />
 ```
-:::
 
 #### 加载状态
-:::demo 加载状态
 ```html
 <van-switch v-model="checked" loading />
 ```
-:::
 
 #### 高级用法
-:::demo 高级用法
 ```html
-<van-switch :value="checked2" @input="onInput" />
+<van-switch :value="checked" @input="onInput" />
 ```
+
 ```js
 export default {
   data() {
     return {
-      checked2: true
+      checked: true
     };
   },
 
@@ -92,13 +53,12 @@ export default {
         title: '提醒',
         message: '是否切换开关？'
       }).then(() => {
-        this.checked2 = checked;
+        this.checked = checked;
       });
     }
   }
 }; 
 ```
-:::
 
 
 ### API
diff --git a/docs/markdown/zh-CN/tab.md b/docs/markdown/zh-CN/tab.md
new file mode 100644
index 00000000000..5e750a0d3f0
--- /dev/null
+++ b/docs/markdown/zh-CN/tab.md
@@ -0,0 +1,129 @@
+<script>
+
+</script>
+
+## Tabs 标签页
+
+### 使用指南
+``` javascript
+import { Tab, Tabs } from 'vant';
+
+Vue.component(Tab.name, Tab);
+Vue.component(Tabs.name, Tabs);
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况下启用第一个 tab，可以通过`active`属性激活对应特定索引的 tab
+
+```html
+<van-tabs :active="active">
+  <van-tab v-for="index in 4" :title="'选项 ' + index">
+    内容 {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+```js
+export default {
+  data() {
+    return {
+      active: 2
+    };
+  }
+}
+```
+
+#### 横向滚动
+
+默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
+
+```html
+<van-tabs>
+  <van-tab v-for="index in 8" :title="'选项 ' + index">
+    内容 {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+#### 禁用标签
+
+在对应的`van-tab`上设置`disabled`属性即可。如果需要监听禁用事件，可以在`van-tabs`上监听`disabled`事件。
+
+```html
+<van-tabs @disabled="onClickDisabled">
+  <van-tab v-for="index in 4" :title="'选项 ' + index" :disabled="index === 2">
+    内容 {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+```javascript
+export default {
+  methods: {
+    onClickDisabled() {
+      Toast('Disabled!')
+    }
+  }
+};
+```
+
+#### 样式风格
+
+`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
+
+```html
+<van-tabs type="card">
+  <van-tab v-for="index in 4" :title="'选项 ' + index">
+    内容 {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+#### 点击事件
+
+可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
+
+```html
+<van-tabs @click="handleTabClick">
+  <van-tab v-for="index in 4" :title="'选项 ' + index">
+    内容 {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+```javascript
+export default {
+  methods: {
+    handleTabClick(index) {
+      Toast(index);
+    }
+  }
+};
+```
+
+### Tabs API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选 |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Tab 样式类型 | `String` | `line` | `card` |
+| active | 默认激活的 tab | `String` `Number` | `0` | - |
+| duration | 切换 tab 的动画时间 | `Number` | `0.3` | - | - |
+| swipeThreshold | 滚动阀值，设置 Tab 超过多少个可滚动 | `Number` | `4` | - | - |
+
+### Tab API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选 |
+|-----------|-----------|-----------|-------------|-------------|
+| title | tab的标题 | `String` | - | - |
+| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
+
+### Tabs Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| click | 某个tab点击事件 | index：点击的`tab`的索引 |
+| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
+
diff --git a/docs/examples-docs/zh-CN/tabbar.md b/docs/markdown/zh-CN/tabbar.md
similarity index 76%
rename from docs/examples-docs/zh-CN/tabbar.md
rename to docs/markdown/zh-CN/tabbar.md
index 0a680de4064..e32c9779edc 100644
--- a/docs/examples-docs/zh-CN/tabbar.md
+++ b/docs/markdown/zh-CN/tabbar.md
@@ -1,32 +1,5 @@
 ## Tabbar 标签栏
 
-<style>
-.demo-tabbar {
-  .van-tabbar {
-    position: relative;
-
-    &-item {
-      cursor: pointer;
-    }
-  }
-}
-</style>
-
-<script>
-export default {
-  data() {
-    return {
-      active: 0,
-      active2: 0,
-      icon: {
-        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
-        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
-      }
-    }
-  }
-}
-</script>
-
 ### 使用指南
 ``` javascript
 import { Tabbar, TabbarItem } from 'vant';
@@ -39,7 +12,7 @@ Vue.component(TabbarItem.name, TabbarItem);
 
 #### 基础用法
 
-:::demo 基础用法
+
 ```html
 <van-tabbar v-model="active">
   <van-tabbar-item icon="shop">标签</van-tabbar-item>
@@ -58,17 +31,17 @@ export default {
   }
 }
 ```
-:::
+
 
 #### 自定义图标
 通过 icon slot 自定义图标
 
-:::demo 自定义图标
+
 ```html
-<van-tabbar v-model="active2">
+<van-tabbar v-model="active">
   <van-tabbar-item icon="shop">
     <span>自定义</span>
-    <img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
+    <img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
   </van-tabbar-item>
   <van-tabbar-item icon="chat">标签</van-tabbar-item>
   <van-tabbar-item icon="records">标签</van-tabbar-item>
@@ -79,7 +52,7 @@ export default {
 export default {
   data() {
     return {
-      active2: 0,
+      active: 0,
       icon: {
         normal: '//img.yzcdn.cn/1.png',
         active: '//img.yzcdn.cn/2.png'
@@ -88,7 +61,7 @@ export default {
   }
 }
 ```
-:::
+
 
 ### Tabbar API
 
diff --git a/docs/examples-docs/zh-CN/tag.md b/docs/markdown/zh-CN/tag.md
similarity index 84%
rename from docs/examples-docs/zh-CN/tag.md
rename to docs/markdown/zh-CN/tag.md
index 11c3479e583..7aa9b06b2ca 100644
--- a/docs/examples-docs/zh-CN/tag.md
+++ b/docs/markdown/zh-CN/tag.md
@@ -1,17 +1,3 @@
-<style>
-.demo-tag {
-  .van-tag + .van-tag {
-    margin-left: 10px;
-  }
-
-  .van-tag {
-    &:first-of-type {
-      margin-left: 15px;
-    }
-  }
-}
-</style>
-
 ## Tag 标记
 
 ### 使用指南
@@ -25,38 +11,33 @@ Vue.component(Tag.name, Tag);
 
 #### 基础用法
 通过 type 属性控制 Tag 颜色，默认为灰色
-:::demo 基础用法
+
 ```html
 <van-tag>标签</van-tag>
 <van-tag type="danger">标签</van-tag>
 <van-tag type="success">标签</van-tag>
 <van-tag type="primary">标签</van-tag>
 ```
-:::
 
 #### 空心样式
 设置`plain`属性设置为空心样式
 
-:::demo 空心样式
 ```html
 <van-tag plain>标签</van-tag>
 <van-tag plain type="danger">标签</van-tag>
 <van-tag plain type="primary">标签</van-tag>
 <van-tag plain type="success">标签</van-tag>
 ```
-:::
 
 #### 标记样式
 通过`mark`设置为标记样式
 
-:::demo 标记样式
 ```html
 <van-tag mark>标签</van-tag>
 <van-tag mark type="danger">标签</van-tag>
 <van-tag mark type="primary">标签</van-tag>
 <van-tag mark type="success">标签</van-tag>
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/theme.md b/docs/markdown/zh-CN/theme.md
similarity index 100%
rename from docs/examples-docs/zh-CN/theme.md
rename to docs/markdown/zh-CN/theme.md
diff --git a/docs/markdown/zh-CN/toast.md b/docs/markdown/zh-CN/toast.md
new file mode 100644
index 00000000000..4ec09d493cc
--- /dev/null
+++ b/docs/markdown/zh-CN/toast.md
@@ -0,0 +1,74 @@
+## Toast 轻提示
+
+### 使用指南
+
+```javascript
+import { Toast } from 'vant';
+```
+
+### 代码演示
+
+#### 文字提示
+
+```javascript
+Toast('我是提示文案，建议不超过十五字~');
+```
+
+
+#### 加载提示
+
+```javascript
+Toast.loading({ mask: true });
+```
+
+
+#### 成功/失败提示
+
+```javascript
+Toast.success('成功文案');
+Toast.fail('失败文案');
+```
+
+
+#### 高级用法
+
+```javascript
+const toast = Toast.loading({
+  duration: 0,       // 持续展示 toast
+  forbidClick: true, // 禁用背景点击
+  message: '倒计时 3 秒'
+});
+
+let second = 3;
+const timer = setInterval(() => {
+  second--;
+  if (second) {
+    toast.message = `倒计时 ${second} 秒`;
+  } else {
+    clearInterval(timer);
+    Toast.clear();
+  }
+}, 1000);
+```
+
+
+### 方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| Toast | `options | message` | toast 实例 | 展示提示 |
+| Toast.loading | `options | message` | toast 实例 | 展示加载提示 |
+| Toast.success | `options | message` | toast 实例 | 展示成功提示 |
+| Toast.fail | `options | message` | toast 实例 | 展示失败提示 |
+| Toast.clear | - | `void` | 关闭提示 |
+
+### Options
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
+| message | 内容 | `String` | `''` | - |
+| position | 位置 | `String` | `middle` | `top` `bottom` |
+| mask | 是否显示背景蒙层 | `Boolean` | `false` | - |
+| forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
+| duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |
diff --git a/docs/examples-docs/zh-CN/tree-select.md b/docs/markdown/zh-CN/tree-select.md
similarity index 55%
rename from docs/examples-docs/zh-CN/tree-select.md
rename to docs/markdown/zh-CN/tree-select.md
index 3fe95add778..e74806120f5 100644
--- a/docs/examples-docs/zh-CN/tree-select.md
+++ b/docs/markdown/zh-CN/tree-select.md
@@ -1,79 +1,3 @@
-<script>
-
-export default {
-  data() {
-    return {
-      items: [{
-        text: '所有城市',
-        children: [{
-          text: '杭州',
-          id: 1001
-        }, {
-          text: '温州',
-          id: 1002
-        }, {
-          text: '海南',
-          id: 1100
-        }, {
-          text: '宁波',
-          id: 1003
-        }, {
-          text: '义乌',
-          id: 1004
-        }, {
-          text: '无锡',
-          id: 1011
-        }, {
-          text: '常州',
-          id: 1012
-        }, {
-          text: '大连',
-          id: 1031
-        }, {
-          text: '诸暨',
-          id: 1005
-        }]
-      }, {
-        text: '浙江',
-        children: [{
-          text: '杭州',
-          id: 1001
-        }, {
-          text: '温州',
-          id: 1002
-        }, {
-          text: '宁波',
-          id: 1003
-        }, {
-          text: '义乌',
-          id: 1004
-        }]
-      }, {
-        text: '江苏',
-        children: [{
-          text: '无锡',
-          id: 1011
-        }, {
-          text: '常州',
-          id: 1012
-        }]
-      }],
-      mainActiveIndex: 0,
-      activeId: 1001
-    };
-  },
-  methods: {
-    onNavClick(index) {
-      this.mainActiveIndex = index;
-    },
-    onItemClick(data) {
-      console.log(data);
-      this.activeId = data.id;
-    }
-  }
-}
-</script>
-
 ## TreeSelect 分类选择
 
 ### 使用指南
@@ -87,7 +11,7 @@ Vue.component(TreeSelect.name, TreeSelect);
 
 #### 基础用法
 
-:::demo 基础用法
+
 ```html
 <van-tree-select
   :items="items"
@@ -95,7 +19,7 @@ Vue.component(TreeSelect.name, TreeSelect);
   :active-id="activeId"
   @navclick="onNavClick"
   @itemclick="onItemClick"
-></van-tree-select>
+/>
 ```
 
 ```javascript
@@ -114,13 +38,11 @@ export default {
       this.mainActiveIndex = index;
     },
     onItemClick(data) {
-      console.log(data);
       this.activeId = data.id;
     }
   }
 }
 ```
-:::
 
 ### API
 
@@ -128,9 +50,9 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
-| items | 分类显示所需的数据，具体数据结构可看 数据结构 |  Array | [] | - |
-| mainActiveIndex | 左侧导航高亮的索引 |  Number | 0 | - |
-| activeId | 右侧选择项，高亮的数据id |  Number | 0 | - |
+| items | 分类显示所需的数据，具体数据结构可看 数据结构 | `Array` | `[]` | - |
+| mainActiveIndex | 左侧导航高亮的索引 | `Number` | `0` | - |
+| activeId | 右侧选择项，高亮的数据id | `Number` | `0` | - |
 
 #### 事件
 | 事件名 | 说明 | 参数 |
diff --git a/docs/examples-docs/zh-CN/uploader.md b/docs/markdown/zh-CN/uploader.md
similarity index 74%
rename from docs/examples-docs/zh-CN/uploader.md
rename to docs/markdown/zh-CN/uploader.md
index 6dfb415cce7..a90dd6833ff 100644
--- a/docs/examples-docs/zh-CN/uploader.md
+++ b/docs/markdown/zh-CN/uploader.md
@@ -1,19 +1,3 @@
-<style>
-.uploader-container {
-  padding: 5px 15px;
-}
-</style>
-
-<script>
-export default {
-  methods: {
-    logContent(file) {
-      console.log(file)
-    }
-  }
-};  
-</script>
-
 ## Uploader 图片上传
 
 ### 使用指南
@@ -27,13 +11,10 @@ Vue.component(Uploader.name, Uploader);
 
 #### 基础用法
 
-:::demo 基础用法
 ```html
-<div class="uploader-container">
-  <van-uploader :after-read="logContent">
-    <van-icon name="photograph"></van-icon>
-  </van-uploader>
-</div>
+<van-uploader :afterRead="logContent">
+  <van-icon name="photograph"></van-icon>
+</van-uploader>
 ```
 
 ```javascript
@@ -43,9 +24,8 @@ export default {
       console.log(file)
     }
   }
-};  
+};
 ```
-:::
 
 ### API
 
diff --git a/docs/examples-docs/zh-CN/waterfall.md b/docs/markdown/zh-CN/waterfall.md
similarity index 67%
rename from docs/examples-docs/zh-CN/waterfall.md
rename to docs/markdown/zh-CN/waterfall.md
index 46aa7ec15ab..ab48739e71f 100644
--- a/docs/examples-docs/zh-CN/waterfall.md
+++ b/docs/markdown/zh-CN/waterfall.md
@@ -28,65 +28,12 @@ export default {
 
 ### 代码演示
 
-<script>
-import { Waterfall } from 'packages';
-
-export default {
-  data() {
-    return {
-      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-      disabled: false
-    };
-  },
-
-  directives: {
-    WaterfallLower: Waterfall('lower')
-  },
-
-  methods: {
-    loadMore() {
-      this.disabled = true;
-      setTimeout(() => {
-        for (let i = 0; i < 5; i ++) {
-          this.list.push(this.list.length);
-        }
-        this.disabled = false;
-      }, 200);
-    }
-  }
-};
-</script>
-
-<style>
-.demo-waterfall {
-  ul {
-    max-height: 360px;
-    overflow: scroll;
-    border-top: 1px solid #e5e5e5;
-  }
-  li {
-    line-height: 50px;
-    border-bottom: 1px solid #e5e5e5;
-    background: #fff;
-    text-align: center;
-  }
-  .page-desc {
-    padding: 5px 0;
-    line-height: 1.4;
-    font-size: 14px;
-    text-align: center;
-    color: #666;
-  }
-}
-</style>
-
 #### 基础用法
 使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 true，禁止 `v-waterfall-lower` 监听滚动事件
 
 注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
-:::demo 基础用法
+
 ```html
-<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
 <ul
   v-waterfall-lower="loadMore"
   waterfall-disabled="disabled"
@@ -121,7 +68,6 @@ export default {
   }
 };
 ```
-:::
 
 ### API
 
diff --git a/docs/src/DocsApp.vue b/docs/src/DocsApp.vue
index 639a165699e..6c591c9ef9f 100644
--- a/docs/src/DocsApp.vue
+++ b/docs/src/DocsApp.vue
@@ -1,14 +1,13 @@
 <template>
   <div class="app">
-    <zan-doc :simulators="simulators" :currentSimulator="currentSimulator" :config="config" :base="base">
+    <van-doc :simulators="simulators" :currentSimulator="currentSimulator" :config="config" :base="base">
       <router-view @changeDemoURL="onChangeDemoURL"></router-view>
-    </zan-doc>
+    </van-doc>
   </div>
 </template>
 
 <script>
 import docConfig from './doc.config';
-import { getLang } from './utils/lang';
 
 export default {
   data() {
@@ -19,28 +18,22 @@ export default {
 
     return {
       simulators: [`/zanui/vant/examples${location.hash}`],
-      demoURL: '',
-      lang: getLang()
+      demoURL: ''
     };
   },
 
   computed: {
     base() {
-      return `/${this.lang}/component`;
+      return `/${this.$vantLang}/component`;
     },
 
     config() {
-      return docConfig[this.lang];
+      return docConfig[this.$vantLang];
     },
 
     currentSimulator() {
-      return this.$route.name === 'zh-CN/demo' ? 1 : 0;
-    }
-  },
-
-  watch: {
-    '$route'(to) {
-      this.lang = to.meta.lang;
+      const { name } = this.$route;
+      return name && name.indexOf('demo') !== -1 ? 1 : 0;
     }
   },
 
diff --git a/docs/src/WapApp.vue b/docs/src/WapApp.vue
index 9085f5c2613..34772928609 100644
--- a/docs/src/WapApp.vue
+++ b/docs/src/WapApp.vue
@@ -9,6 +9,5 @@ body {
   background-color: #f8f8f8;
   font-family: Arial, Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma, sans-serif;
   -webkit-font-smoothing: antialiased;
-  padding-bottom: 20px;
 }
 </style>
diff --git a/docs/src/components/demo-list.vue b/docs/src/components/demo-list.vue
index 154a1f782c8..de24ab53861 100644
--- a/docs/src/components/demo-list.vue
+++ b/docs/src/components/demo-list.vue
@@ -16,39 +16,29 @@
 <script>
 import docConfig from '../doc.config';
 import MobileNav from './mobile-nav';
-import { getLang } from '../utils/lang';
 
 export default {
   data() {
     return {
-      docConfig,
-      lang: getLang()
+      docConfig
     };
   },
 
-  beforeRouteEnter(to, from, next) {
-    next(vm => vm.lang = to.meta.lang);
-  },
-
-  beforeRouteUpdate(to, from, next) {
-    this.lang = to.meta.lang;
-  },
-
   components: {
     MobileNav
   },
 
   computed: {
     base() {
-      return `${this.lang}/component`;
+      return `${this.$vantLang}/component`;
     },
 
     navList() {
-      return this.docConfig[this.lang].nav || [];
+      return this.docConfig[this.$vantLang].nav || [];
     },
 
     description() {
-      return this.lang === 'zh-CN' ? '有赞移动端 Vue 组件库' : 'A Vue.js 2.0 Mobile UI at YouZan';
+      return this.$vantLang === 'zh-CN' ? '有赞移动端 Vue 组件库' : 'A Vue.js 2.0 Mobile UI at YouZan';
     }
   }
 };
diff --git a/docs/src/components/demo.vue b/docs/src/components/demo.vue
deleted file mode 100644
index ac4b101c9ab..00000000000
--- a/docs/src/components/demo.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <section class="zan-doc-demos">
-    <h2>示例</h2>
-    <p>下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。</p>
-    <div class="zan-doc-demos__gallery">
-      <div
-        :class="['zan-doc-demos__item', { 'zan-doc-demos__item--active': index === currentDemo }]"
-        v-for="(demo, index) in demos"
-      >
-        <h4>{{ demo.title }}</h4>
-        <a :href="demo.source" target="_blank">源代码</a>
-        <img :src="demo.preview" @click="onChangeDemo(demo, index)" />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      currentDemo: 0,
-      demos: [{
-        title: '商品详情',
-        preview: 'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
-        url: 'https://chenjiahan.github.io/vant-demo/#/goods',
-        source: 'https://github.com/chenjiahan/vant-demo/tree/master/src/view/goods/index.vue'
-      }, {
-        title: '会员中心',
-        preview: 'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
-        url: 'https://chenjiahan.github.io/vant-demo/#/user',
-        source: 'https://github.com/chenjiahan/vant-demo/tree/master/src/view/user/index.vue'
-      }, {
-        title: '购物车',
-        preview: 'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
-        url: 'https://chenjiahan.github.io/vant-demo/#/cart',
-        source: 'https://github.com/chenjiahan/vant-demo/tree/master/src/view/cart/index.vue'
-      }]
-    };
-  },
-
-  beforeMount() {
-    this.$emit('changeDemoURL', this.demos[0].url);
-  },
-
-  methods: {
-    onChangeDemo(demo, index) {
-      this.currentDemo = index;
-      this.$emit('changeDemoURL', demo.url);
-    }
-  }
-};
-</script>
-
-<style>
-.zan-doc-demos {
-  &__gallery {
-    margin-top: 30px;
-  }
-
-  &__item {
-    width: 28%;
-    text-align: center;
-    margin-bottom: 40px;
-    display: inline-block;
-
-    &:nth-child(3n+1),
-    &:nth-child(3n+2) {
-      margin-right: 4%;
-    }
-
-    h4 {
-      font-size: 14px;
-      line-height: 20px;
-      font-weight: normal;
-    }
-
-    img {
-      width: 100%;
-      cursor: pointer;
-      border-radius: 3px;
-      background-color: #f8f8f8;
-      box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-    }
-
-    a {
-      font-size: 12px;
-      margin: 4px 0 7px;
-      display: inline-block;
-    }
-
-    &--active {
-      img {
-        box-shadow: 0 1px 4px rgba(51, 136, 255, .4), 0 0 0 1px rgba(51, 136, 255, .4);
-      }
-    }
-  }
-}
-</style>
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 6232a9ccea4..f32d349d521 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -305,6 +305,17 @@ module.exports = {
                 path: '/changelog',
                 title: 'Changelog',
                 noExample: true
+              },
+              {
+                path: '/theme',
+                title: 'Theme (In translation)',
+                noExample: true
+              },
+              {
+                path: '/demo',
+                title: 'Demo pages (In translation)',
+                noDocument: true,
+                noExample: true
               }
             ]
           }
@@ -491,35 +502,35 @@ module.exports = {
             list: [
               {
                 path: '/address-edit',
-                title: 'AddressEdit'
+                title: 'AddressEdit (In translation)'
               },
               {
                 path: '/address-list',
-                title: 'AddressList'
+                title: 'AddressList (In translation)'
               },
               {
                 path: '/area',
-                title: 'Area'
+                title: 'Area (In translation)'
               },
               {
                 path: '/contact',
-                title: 'Contact'
+                title: 'Contact (In translation)'
               },
               {
                 path: '/coupon',
-                title: 'Coupon'
+                title: 'Coupon (In translation)'
               },
               {
                 path: '/goods-action',
-                title: 'GoodsAction'
+                title: 'GoodsAction (In translation)'
               },
               {
                 path: '/submit-bar',
-                title: 'SubmitBar'
+                title: 'SubmitBar (In translation)'
               },
               {
                 path: '/sku',
-                title: 'Sku'
+                title: 'Sku (In translation)'
               }
             ]
           }
diff --git a/docs/src/examples.js b/docs/src/examples.js
index 7bf0af32039..398b8012756 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -2,14 +2,13 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './WapApp';
 import routes from './router.config';
-import { setLang } from './utils/lang';
 import Vant, { Lazyload } from 'packages';
-import ZanDoc from 'zan-doc';
+import VantDoc from 'vant-doc';
 import 'packages/vant-css/src/index.css';
-import 'zan-doc/src/helper/touch-simulator';
+import 'vant-doc/src/helper/touch-simulator';
 
 Vue.use(Vant);
-Vue.use(ZanDoc);
+Vue.use(VantDoc);
 Vue.use(Lazyload, {
   lazyComponent: true
 });
@@ -22,14 +21,6 @@ const router = new VueRouter({
   routes: routesConfig
 });
 
-router.afterEach((route) => {
-  const container = document.querySelector('.examples-container');
-  if (container) {
-    document.querySelector('.examples-container').scrollTop = 0;
-  }
-  setLang(route.meta.lang);
-});
-
 window.vueRouter = router;
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/docs/src/index.js b/docs/src/index.js
index 740e1866347..7d37b518738 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -2,11 +2,11 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './DocsApp';
 import routes from './router.config';
-import ZanDoc from 'zan-doc';
+import VantDoc from 'vant-doc';
 import isMobile from './utils/is-mobile';
 
 Vue.use(VueRouter);
-Vue.use(ZanDoc);
+Vue.use(VantDoc);
 
 const routesConfig = routes();
 
diff --git a/docs/src/router.config.js b/docs/src/router.config.js
index 9f681de189e..c9b409fe64b 100644
--- a/docs/src/router.config.js
+++ b/docs/src/router.config.js
@@ -1,18 +1,15 @@
 import docConfig from './doc.config';
-import { getLang } from './utils/lang';
 import DemoList from './components/demo-list';
-import componentDocs from '../examples-dist/entry-docs';
-import componentDemos from '../examples-dist/entry-demos';
-import Demo from './components/demo';
+import componentDocs from '../markdown';
+import componentDemos from '../demos';
+import { Demos } from 'vant-doc';
+import Vue from 'vue';
 import './utils/iframe-router';
 
 const registerRoute = (isExample) => {
   const route = [{
-    path: '/',
-    redirect: to => `/${getLang()}/`
-  }, {
     path: '*',
-    redirect: to => `/${getLang()}/`
+    redirect: to => `/${Vue.prototype.$vantLang}/`
   }];
 
   Object.keys(docConfig).forEach((lang, index) => {
@@ -53,9 +50,9 @@ const registerRoute = (isExample) => {
         let component;
 
         if (path === '/demo') {
-          component = Demo;
+          component = Demos;
         } else {
-          component = isExample ? componentDemos[name] : componentDocs[name];
+          component = isExample ? componentDemos[path.replace('/', '')] : componentDocs[name];
         }
 
         route.push({
diff --git a/docs/src/utils/iframe-router.js b/docs/src/utils/iframe-router.js
index f23769b7306..458045e2e4e 100644
--- a/docs/src/utils/iframe-router.js
+++ b/docs/src/utils/iframe-router.js
@@ -13,19 +13,20 @@ window.syncPath = function(dir) {
   const iframe = document.querySelector('iframe');
 
   if (!isInIframe && !isMobile && iframe) {
+    const pathParts = currentDir.split('/');
+    let lang = pathParts[0];
+    if (currentDir[0] === '/') {
+      lang = pathParts[1];
+    }
+    setLang(lang);
+
     iframeReady(iframe, () => {
-      iframe.contentWindow.changePath(currentDir);
+      iframe.contentWindow.changePath(lang, currentDir);
     });
   }
 };
 
-window.changePath = function(path = '') {
-  const pathParts = path.split('/');
-  let lang = pathParts[0];
-  if (path[0] === '/') {
-    lang = pathParts[1];
-  }
-
+window.changePath = function(lang, path = '') {
   setLang(lang);
   window.vueRouter.replace(path);
 };
diff --git a/docs/src/utils/lang.js b/docs/src/utils/lang.js
index 1a291fd84eb..0f117b40b41 100644
--- a/docs/src/utils/lang.js
+++ b/docs/src/utils/lang.js
@@ -1,16 +1,20 @@
+import Locale from '../../../packages/locale';
+import zhCN from '../../../packages/locale/lang/zh-CN';
+import enUS from '../../../packages/locale/lang/en-US';
+
+const langMap = {
+  'en-US': enUS,
+  'zh-CN': zhCN
+};
+
 const userLang = window.localStorage.getItem('VANT_LANGUAGE') || window.navigator.language || 'en-US';
 let defaultLang = 'en-US';
 if (userLang.indexOf('zh-') !== -1) {
   defaultLang = 'zh-CN';
 }
-
-let currentLang = defaultLang;
-
-export function getLang() {
-  return currentLang;
-}
+setLang(defaultLang);
 
 export function setLang(lang) {
   window.localStorage.setItem('VANT_LANGUAGE', lang);
-  currentLang = lang;
+  Locale.use(lang, langMap[lang]);
 }
diff --git a/package.json b/package.json
index 994ed77e96f..6bf9b3a5fc5 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,6 @@
     "highlight.js": "^9.12.0",
     "html-webpack-plugin": "^2.29.0",
     "isparta-loader": "^2.0.0",
-    "json-templater": "^1.0.4",
     "karma": "^1.7.1",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
@@ -90,7 +89,7 @@
     "karma-sinon-chai": "^1.3.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.31",
-    "karma-webpack": "^2.0.4",
+    "karma-webpack": "^2.0.6",
     "markdown-it": "^8.4.0",
     "markdown-it-container": "^2.0.0",
     "mocha": "^3.4.2",
@@ -107,6 +106,7 @@
     "style-loader": "^0.19.0",
     "uppercamelcase": "^3.0.0",
     "url-loader": "^0.6.2",
+    "vant-doc": "0.3.16",
     "vue": "^2.5.3",
     "vue-loader": "^13.5.0",
     "vue-markdown-loader": "^2.2.3",
@@ -115,9 +115,8 @@
     "vue-style-loader": "^3.0.0",
     "vue-template-compiler": "^2.5.3",
     "webpack": "^3.8.1",
-    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-bundle-analyzer": "^2.9.1",
     "webpack-dev-server": "^2.9.4",
-    "webpack-merge": "^4.1.1",
-    "zan-doc": "0.3.11"
+    "webpack-merge": "^4.1.1"
   }
 }
diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
index c025f4ffe15..5f9bbb4cd43 100644
--- a/packages/address-edit/Detail.vue
+++ b/packages/address-edit/Detail.vue
@@ -1,8 +1,8 @@
 <template>
   <div ref="root">
     <van-field
-      label="详细地址"
-      placeholder="如街道、楼层、门牌号等"
+      :label="$t('label.address')"
+      :placeholder="$t('placeholder.address')"
       maxlength="200"
       type="textarea"
       autosize
@@ -15,7 +15,7 @@
       @blur="handleBlur"
     >
       <div slot="icon">
-        <span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">完成</span>
+        <span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">{{ $t('complete') }}</span>
         <van-icon v-else-if="showIcon" name="clear"  />
       </div>
     </van-field>
@@ -42,10 +42,13 @@ import Field from '../field';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
 import isAndroid from '../utils/env/is-android';
+import { i18n } from '../locale';
 
 export default {
   name: 'van-address-edit-detail',
 
+  mixins: [i18n],
+
   components: {
     [Field.name]: Field,
     [Icon.name]: Icon,
@@ -85,7 +88,7 @@ export default {
     },
 
     handleBlur(e) {
-      // 等待其他地方点击事件完了以后，再触发
+      // wait for click event finished
       setTimeout(() => {
         this.isFocused = false;
         this.$emit('blur', e);
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
index 8af8ec1ca4b..6b2aeeef94e 100644
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@@ -3,24 +3,24 @@
     <van-cell-group>
       <van-field
         maxlength="15"
-        placeholder="名字"
-        :label="addressText + '人'"
+        :placeholder="$t('placeholder.name')"
+        :label="$t('label.name', computedAddressText)"
         v-model="currentInfo.name"
         :error="errorInfo.name"
         @focus="onFocus('name')"
       />
       <van-field
         type="tel"
-        label="联系电话"
-        placeholder="手机或固定电话"
+        :label="$t('label.tel')"
+        :placeholder="$t('placeholder.tel')"
         v-model="currentInfo.tel"
         :error="errorInfo.tel"
         @focus="onFocus('tel')"
       />
-      <van-cell class="van-address-edit__area" title="收件地区" @click="showAreaSelect = true">
-        <span>{{ currentInfo.province || '选择省' }}</span>
-        <span>{{ currentInfo.city || '选择市' }}</span>
-        <span>{{ currentInfo.county || '选择区' }}</span>
+      <van-cell class="van-address-edit__area" :title="$t('areaTitle')" @click="showAreaSelect = true">
+        <span>{{ currentInfo.province || $t('placeholder.province') }}</span>
+        <span>{{ currentInfo.city || $t('placeholder.city') }}</span>
+        <span>{{ currentInfo.county || $t('placeholder.county') }}</span>
       </van-cell>
       <van-address-edit-detail
         :value="currentInfo.address_detail"
@@ -35,8 +35,8 @@
         v-if="showPostal"
         v-show="!hideBottomFields"
         type="tel"
-        label="邮政编码"
-        placeholder="邮政编码(选填)"
+        :label="$t('label.postal')"
+        :placeholder="$t('placeholder.postal')"
         v-model="currentInfo.postal_code"
         maxlength="6"
         class="van-hairline--top"
@@ -47,12 +47,16 @@
         v-if="showSetDefault"
         v-show="!hideBottomFields"
         v-model="currentInfo.is_default"
-        :title="`设为默认${addressText}地址`"
+        :title="$t('defaultAddress', computedAddressText)"
       />
     </van-cell-group>
     <div v-show="!hideBottomFields" class="van-address-edit__buttons">
-      <van-button block :loading="isSaving" @click="onSaveAddress" type="primary">保存</van-button>
-      <van-button block :loading="isDeleting" @click="onDeleteAddress" v-if="isEdit">删除{{ addressText }}地址</van-button>
+      <van-button block :loading="isSaving" @click="onSaveAddress" type="primary">
+        {{ $t('save') }}
+      </van-button>
+      <van-button block :loading="isDeleting" @click="onDeleteAddress" v-if="isEdit">
+        {{ $t('deleteAddress', computedAddressText) }}
+      </van-button>
     </div>
     <van-popup v-model="showAreaSelect" position="bottom">
       <van-area
@@ -77,10 +81,13 @@ import Area from '../area';
 import Detail from './Detail';
 import SwitchCell from '../switch-cell';
 import validateMobile from '../utils/validate/mobile';
+import { i18n } from '../locale';
 
 export default {
   name: 'van-address-edit',
 
+  mixins: [i18n],
+
   components: {
     [Field.name]: Field,
     [Cell.name]: Cell,
@@ -99,10 +106,7 @@ export default {
     showPostal: Boolean,
     showSetDefault: Boolean,
     showSearchResult: Boolean,
-    addressText: {
-      type: String,
-      default: '收货'
-    },
+    addressText: String,
     addressInfo: {
       type: Object,
       default: () => ({
@@ -145,13 +149,16 @@ export default {
         this.isEdit = !!val.id;
       },
       deep: true
-    }
+    },
   },
 
   computed: {
-    // 当地址输入框开启了搜索，并且开始搜索后，隐藏所有地址详情以外的输入框
+    // hide bottom field when use search && detail get focused
     hideBottomFields() {
       return this.searchResult.length && this.detailFocused;
+    },
+    computedAddressText() {
+      return this.addressText || this.$t('addressText');
     }
   },
 
@@ -172,13 +179,13 @@ export default {
 
     onAreaConfirm(values) {
       if (values.length !== 3 || +values[0].code === -1 || +values[1].code === -1 || +values[2].code === -1) {
-        return Toast('请选择正确的收件地区');
+        return Toast(this.$t('areaWrong'));
       }
       Object.assign(this.currentInfo, {
         province: values[0].name,
         city: values[1].name,
         county: values[2].name,
-        'area_code': values[2].code
+        area_code: values[2].code
       });
       this.showAreaSelect = false;
     },
@@ -211,18 +218,19 @@ export default {
 
     getErrorMessageByKey(key) {
       const value = this.currentInfo[key];
+      const { $t } = this;
 
       switch (key) {
         case 'name':
-          return value ? value.length <= 15 ? '' : '名字过长，请重新输入' : '请填写名字';
+          return value ? value.length <= 15 ? '' : $t('nameOverlimit') : $t('nameEmpty');
         case 'tel':
-          return validateMobile(value) ? '' : '请填写正确的手机号码或电话号码';
+          return validateMobile(value) ? '' : $t('telWrong');
         case 'area_code':
-          return value ? +value !== -1 ? '' : '请选择正确的收件地区' : '请选择收件地区';
+          return value ? +value !== -1 ? '' : $t('areaWrong') : $t('areaEmpty');
         case 'address_detail':
-          return value ? value.length <= 200 ? '' : '详细地址不能超过200个字符' : '请填写详细地址';
+          return value ? value.length <= 200 ? '' : $t('addressOverlimit') : $t('addressEmpty');
         case 'postal_code':
-          return value && !/^\d{6}$/.test(value) ? '邮政编码格式不正确' : '';
+          return value && !/^\d{6}$/.test(value) ? $t('postalEmpty') : '';
       }
     },
 
@@ -232,7 +240,7 @@ export default {
       }
 
       Dialog.confirm({
-        message: `确定要删除这个${this.addressText}地址么`
+        message: this.$t('confirmDelete', this.computedAddressText)
       }).then(() => {
         this.$emit('delete', this.currentInfo);
       });
diff --git a/packages/address-edit/theme.md b/packages/address-edit/theme.md
new file mode 100644
index 00000000000..73cfeec5a3a
--- /dev/null
+++ b/packages/address-edit/theme.md
@@ -0,0 +1,55 @@
+## 定制主题
+
+`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面的方法：
+
+### 方案一. PostCSS 插件
+在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量，步骤如下：
+
+```javascript
+// 引入基础样式
+import 'vant/packages/vant-css/src/base.css';
+
+// 引入组价对应的样式
+import 'vant/packages/vant-css/src/button.css';
+import 'vant/packages/vant-css/src/checkbox.css';
+```
+
+接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
+
+```javascript
+module.exports = {
+  plugins: [
+    require('postcss-easy-import')({
+      extensions: ['pcss', 'css']
+    }),
+    require('postcss-theme-variables')({
+      vars: {
+        red: '#F60',
+        gray: '#CCC',
+        blue: '#03A9F4'
+      },
+      prefix: '$'
+    }),
+    require('precss')(),
+    require('postcss-calc')(),
+    require('autoprefixer')({
+      browsers: ['Android >= 4.0', 'iOS >= 7']
+    })
+  ]
+};
+```
+
+### 方案二. 本地构建
+可以通过在本地构建 vant-css 的方式生成所需的主题
+
+```bash
+# 克隆仓库
+git clone git@github.com:youzan/vant.git
+cd packages/vant-css
+```
+
+在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
+```bash
+npm run build
+```
+
diff --git a/packages/area/index.vue b/packages/area/index.vue
index 33efd6138b1..a58731af337 100644
--- a/packages/area/index.vue
+++ b/packages/area/index.vue
@@ -36,9 +36,7 @@ export default {
   props: {
     value: {},
     areaList: Object,
-    /**
-     * 省市县显示列数，3-省市县，2-省市，1-省
-     */
+    // 省市县显示列数，3-省市县，2-省市，1-省
     columnsNum: {
       type: [String, Number],
       default: 3
diff --git a/packages/badge-group/index.vue b/packages/badge-group/index.vue
index e2991a11f32..72babb9cb85 100644
--- a/packages/badge-group/index.vue
+++ b/packages/badge-group/index.vue
@@ -9,7 +9,6 @@ export default {
   name: 'van-badge-group',
 
   props: {
-    // 当前激活 tab 面板的 key
     activeKey: {
       type: [Number, String],
       default: 0
diff --git a/packages/cell-swipe/index.vue b/packages/cell-swipe/index.vue
index 7ab4ce7054a..3555c55f606 100644
--- a/packages/cell-swipe/index.vue
+++ b/packages/cell-swipe/index.vue
@@ -57,8 +57,8 @@ export default {
 
   methods: {
     resetSwipeStatus() {
-      this.swiping = false; // 是否正在拖动
-      this.opened = true; // 记录是否滑动左右 或者 注册
+      this.swiping = false;
+      this.opened = true;
     },
 
     swipeMove(offset = 0) {
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index 7f7e30cbed4..afa02367db4 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -50,7 +50,7 @@ export default {
   },
 
   computed: {
-    // checkbox 是否在 van-checkbox-group 中
+    // whether is in van-checkbox-group
     isGroup() {
       return !!this.findParentByComponentName('van-checkbox-group');
     },
diff --git a/packages/contact-card/index.vue b/packages/contact-card/index.vue
index ffc61b45503..aaa4bf573f3 100644
--- a/packages/contact-card/index.vue
+++ b/packages/contact-card/index.vue
@@ -3,13 +3,13 @@
     <div class="van-contact-card__content">
       <template v-if="type === 'add'">
         <van-icon class="van-contact-card__icon" name="add2" />
-        <div class="van-contact-card__text">{{ addText }}</div>
+        <div class="van-contact-card__text">{{ addText || $t('addText') }}</div>
       </template>
       <template v-else-if="type === 'edit'">
         <van-icon class="van-contact-card__icon" name="contact" />
         <div class="van-contact-card__text">
-          <div>联系人：{{ name }}</div>
-          <div>联系电话：{{ tel }}</div>
+          <div>{{ $t('name') }}：{{ name }}</div>
+          <div>{{ $t('tel') }}：{{ tel }}</div>
         </div>
       </template>
     </div>
@@ -19,15 +19,19 @@
 
 <script>
 import Icon from '../icon';
+import { i18n } from '../locale';
 
 export default {
   name: 'van-contact-card',
 
+  mixins: [i18n],
+
   components: {
     [Icon.name]: Icon
   },
 
   props: {
+    addText: String,
     type: {
       type: String,
       default: 'add'
@@ -37,10 +41,6 @@ export default {
     },
     tel: {
       type: String
-    },
-    addText: {
-      type: String,
-      default: '添加订单联系人信息'
     }
   }
 };
diff --git a/packages/contact-edit/index.vue b/packages/contact-edit/index.vue
index 325db97444b..7f20df22b23 100644
--- a/packages/contact-edit/index.vue
+++ b/packages/contact-edit/index.vue
@@ -2,25 +2,25 @@
   <div class="van-contact-edit">
     <van-cell-group>
       <van-field
-        label="联系人"
-        maxlength="30"
-        placeholder="名字"
         v-model="currentInfo.name"
+        maxlength="30"
+        :label="$t('name')"
+        :placeholder="$t('namePlaceholder')"
         :error="errorInfo.name"
         @focus="onFocus('name')">
       </van-field>
       <van-field
-        type="tel"
-        label="联系电话"
-        placeholder="手机或固定电话"
         v-model="currentInfo.tel"
+        type="tel"
+        :label="$t('tel')"
+        :placeholder="$t('telPlaceholder')"
         :error="errorInfo.tel"
         @focus="onFocus('tel')">
       </van-field>
     </van-cell-group>
     <div class="van-contact-edit__buttons">
-      <van-button block :loading="isSaving" @click="onSaveContact" type="primary">保存</van-button>
-      <van-button block :loading="isDeleting" @click="onDeleteContact" v-if="isEdit">删除联系人</van-button>
+      <van-button block :loading="isSaving" @click="onSaveContact" type="primary">{{ $t('save') }}</van-button>
+      <van-button block :loading="isDeleting" @click="onDeleteContact" v-if="isEdit">{{ $t('delete') }}</van-button>
     </div>
   </div>
 </template>
@@ -32,10 +32,13 @@ import CellGroup from '../cell-group';
 import Dialog from '../dialog';
 import Toast from '../toast';
 import validateMobile from '../utils/validate/mobile';
+import { i18n } from '../locale';
 
 export default {
   name: 'van-contact-edit',
 
+  mixins: [i18n],
+
   components: {
     [Field.name]: Field,
     [Button.name]: Button,
@@ -81,9 +84,9 @@ export default {
       const value = this.currentInfo[key];
       switch (key) {
         case 'name':
-          return value ? value.length <= 15 ? '' : '名字过长，请重新输入' : '请填写名字';
+          return value ? value.length <= 15 ? '' : this.$t('nameOverlimit') : this.$t('nameEmpty');
         case 'tel':
-          return validateMobile(value) ? '' : '请填写正确的手机号码或电话号码';
+          return validateMobile(value) ? '' : this.$t('telInvalid');
       }
     },
 
@@ -113,7 +116,7 @@ export default {
       }
 
       Dialog.confirm({
-        message: `确定要删除这个联系人么`
+        message: this.$t('confirmDelete')
       }).then(() => {
         this.$emit('delete', this.currentInfo);
       });
diff --git a/packages/contact-list/index.vue b/packages/contact-list/index.vue
index 5f6bcbb78d1..42762344192 100644
--- a/packages/contact-list/index.vue
+++ b/packages/contact-list/index.vue
@@ -4,14 +4,14 @@
       <van-cell-group>
         <van-cell v-for="(item, index) in list" :key="item.id">
           <van-radio :name="item.id" @click="$emit('select', item, index)">
-            <p class="van-contact-list__text">联系人：{{ item.name }}</p>
-            <p class="van-contact-list__text">联系电话：{{ item.tel }}</p>
+            <p class="van-contact-list__text">{{ $t('name') }}：{{ item.name }}</p>
+            <p class="van-contact-list__text">{{ $t('tel') }}：{{ item.tel }}</p>
           </van-radio>
           <van-icon name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" />
         </van-cell>
       </van-cell-group>
     </van-radio-group>
-    <van-cell icon="add" class="van-contact-list__add van-hairline--top" @click="$emit('add')" :title="addText" isLink />
+    <van-cell icon="add" class="van-contact-list__add van-hairline--top" @click="$emit('add')" :title="addText || $t('addText')" isLink />
   </div>
 </template>
 
@@ -21,10 +21,13 @@ import Cell from '../cell';
 import Radio from '../radio';
 import CellGroup from '../cell-group';
 import RadioGroup from '../radio-group';
+import { i18n } from '../locale';
 
 export default {
   name: 'van-contact-list',
 
+  mixins: [i18n],
+
   components: {
     [Icon.name]: Icon,
     [Cell.name]: Cell,
@@ -35,10 +38,7 @@ export default {
 
   props: {
     value: {},
-    addText: {
-      type: String,
-      default: '新建联系人'
-    },
+    addText: String,
     list: {
       type: Array,
       default: () => []
diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue
index 8fc026f4f7e..9c85b75eea9 100644
--- a/packages/dialog/dialog.vue
+++ b/packages/dialog/dialog.vue
@@ -14,7 +14,7 @@
           v-show="showCancelButton"
           @click="handleAction('cancel')"
         >
-          {{ cancelButtonText }}
+          {{ cancelButtonText || $t('cancel') }}
         </van-button>
         <van-button
           size="large"
@@ -22,7 +22,7 @@
           v-show="showConfirmButton"
           @click="handleAction('confirm')"
         >
-          {{ confirmButtonText }}
+          {{ confirmButtonText || $t('confirm') }}
         </van-button>
       </div>
     </div>
@@ -32,6 +32,7 @@
 <script>
 import Button from '../button';
 import Popup from '../mixins/popup';
+import { i18n } from '../locale';
 
 export default {
   name: 'van-dialog',
@@ -40,9 +41,11 @@ export default {
     [Button.name]: Button
   },
 
-  mixins: [Popup],
+  mixins: [Popup, i18n],
 
   props: {
+    confirmButtonText: String,
+    cancelButtonText: String,
     title: {
       type: String,
       default: ''
@@ -59,14 +62,6 @@ export default {
       type: Boolean,
       default: false
     },
-    confirmButtonText: {
-      type: String,
-      default: '确认'
-    },
-    cancelButtonText: {
-      type: String,
-      default: '取消'
-    },
     callback: {
       type: Function
     },
diff --git a/packages/dialog/index.js b/packages/dialog/index.js
index 08b98e651e3..1b9e0499649 100644
--- a/packages/dialog/index.js
+++ b/packages/dialog/index.js
@@ -7,8 +7,8 @@ const defaultConfig = {
   value: true,
   title: '',
   message: '',
-  confirmButtonText: '确认',
-  cancelButtonText: '取消',
+  confirmButtonText: '',
+  cancelButtonText: '',
   showCancelButton: false,
   closeOnClickOverlay: false,
   callback: action => {
diff --git a/packages/index.js b/packages/index.js
index 5371e5fce3a..49cec7bcdfa 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,3 +1,4 @@
+// This file is auto gererated by build/bin/build-entry.js
 import Actionsheet from './actionsheet';
 import AddressEdit from './address-edit';
 import AddressList from './address-list';
@@ -27,6 +28,7 @@ import Icon from './icon';
 import ImagePreview from './image-preview';
 import Lazyload from './lazyload';
 import Loading from './loading';
+import Locale from './locale';
 import NavBar from './nav-bar';
 import NoticeBar from './notice-bar';
 import NumberKeyboard from './number-keyboard';
@@ -118,15 +120,12 @@ const components = [
   Uploader
 ];
 
-const install = function(Vue) {
-  if (install.installed) return;
-
+const install = Vue => {
   components.forEach(component => {
     Vue.component(component.name, component);
   });
 };
 
-/* istanbul ignore if */
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
@@ -163,6 +162,7 @@ export {
   ImagePreview,
   Lazyload,
   Loading,
+  Locale,
   NavBar,
   NoticeBar,
   NumberKeyboard,
@@ -195,6 +195,7 @@ export {
   Uploader,
   Waterfall
 };
+
 export default {
   install,
   version
diff --git a/packages/locale/index.js b/packages/locale/index.js
new file mode 100644
index 00000000000..84e536debc6
--- /dev/null
+++ b/packages/locale/index.js
@@ -0,0 +1,45 @@
+import Vue from 'vue';
+import get from '../utils/get';
+import camelize from '../utils/camelize';
+import deepAssign from '../utils/deep-assign';
+import defaultMessages from './lang/zh-CN';
+
+// component mixin
+const i18n = {
+  computed: {
+    $t() {
+      const { name } = this.$options;
+      const prefix = name ? camelize(name) + '.' : '';
+      const messages = this.$vantMessages[this.$vantLang];
+
+      return (path, ...args) => {
+        const message = get(messages, prefix + path) || get(messages, path);
+        return typeof message === 'function' ? message.apply(null, args) : message;
+      };
+    }
+  }
+};
+
+const proto = Vue.prototype;
+const defaultLang = 'zh-CN';
+const locale = {
+  i18n,
+
+  init() {
+    Vue.util.defineReactive(proto, '$vantLang', defaultLang);
+    Vue.util.defineReactive(proto, '$vantMessages', { [defaultLang]: defaultMessages });
+  },
+
+  use(lang, messages) {
+    proto.$vantLang = lang;
+    this.add({ [lang]: messages });
+  },
+
+  add(messages = {}) {
+    deepAssign(proto.$vantMessages, messages);
+  }
+};
+
+locale.init();
+export default locale;
+export { i18n };
diff --git a/packages/locale/lang/en-US.js b/packages/locale/lang/en-US.js
new file mode 100644
index 00000000000..a2cd7596def
--- /dev/null
+++ b/packages/locale/lang/en-US.js
@@ -0,0 +1,68 @@
+export default {
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  save: 'Save',
+  complete: 'Complete',
+  vanAddressEdit: {
+    areaTitle: 'Area',
+    areaWrong: 'Please select the correct receiving area',
+    areaEmpty: 'Please select a receiving area',
+    nameEmpty: 'Name can not be empty',
+    nameOverlimit: 'Name length exceeds limit',
+    telWrong: 'Wrong format of phone number',
+    addressOverlimit: 'The length of the address can not exceed 200 characters',
+    addressEmpty: 'Address can not be empty',
+    postalEmpty: 'Wrong postal code',
+    defaultAddress: 'Set as the default address',
+    deleteAddress: 'Delete the address',
+    confirmDelete: 'Are you sure you want to delete this address?',
+    label: {
+      name: 'Receiver',
+      tel: 'Phone',
+      postal: 'Postal'
+    },
+    placeholder: {
+      name: 'Receiver name',
+      tel: 'Phone',
+      postal: 'Postal code (optional)',
+      province: 'Province',
+      city: 'City',
+      county: 'County'
+    }
+  },
+  vanAddressEditDetail: {
+    label: {
+      address: 'Address'
+    },
+    placeholder: {
+      address: 'Address'
+    }
+  },
+  vanContactCard: {
+    name: 'Name',
+    tel: 'Phone',
+    addText: 'Add contact info'
+  },
+  vanContactList: {
+    name: 'Name',
+    tel: 'Phone',
+    addText: 'Add new contact'
+  },
+  vanContactEdit: {
+    name: 'Name',
+    namePlaceholder: 'Name',
+    nameEmpty: 'Name can not be empty',
+    nameOverlimit: 'Name length exceeds limit',
+    tel: 'Phone',
+    telPlaceholder: 'Phone',
+    telInvalid: 'Malformed phone number',
+    save: 'Save',
+    delete: 'Delete',
+    confirmDelete: 'Are you sure you want to delete this contact?'
+  },
+  vanPullRefresh: {
+    pullingText: 'Pull to refresh...',
+    loosingText: 'Loose to refresh...',
+    loadingText: 'Loading...'
+  }
+};
diff --git a/packages/locale/lang/zh-CN.js b/packages/locale/lang/zh-CN.js
new file mode 100644
index 00000000000..c3d44d2b327
--- /dev/null
+++ b/packages/locale/lang/zh-CN.js
@@ -0,0 +1,72 @@
+export default {
+  confirm: '确认',
+  cancel: '取消',
+  save: '保存',
+  complete: '完成',
+  vanAddressEdit: {
+    areaTitle: '收件地区',
+    addressText: '收货',
+    areaWrong: '请选择正确的收件地区',
+    areaEmpty: '请选择收件地区',
+    nameEmpty: '请填写名字',
+    nameOverlimit: '名字过长，请重新输入',
+    telWrong: '请填写正确的手机号码或电话号码',
+    addressOverlimit: '详细地址不能超过200个字符',
+    addressEmpty: '请填写详细地址',
+    postalEmpty: '邮政编码格式不正确',
+    defaultAddress: text => `设为默认${text}地址`,
+    deleteAddress: text => `删除${text}地址`,
+    confirmDelete: text => `确定要删除这个${text}地址么`,
+    label: {
+      name: text => `${text}人`,
+      tel: '联系电话',
+      postal: '邮政编码'
+    },
+    placeholder: {
+      name: '名字',
+      tel: '手机或固定电话',
+      postal: '邮政编码(选填)',
+      province: '选择省',
+      city: '选择市',
+      county: '选择区'
+    }
+  },
+  vanAddressEditDetail: {
+    label: {
+      address: '详细地址'
+    },
+    placeholder: {
+      address: '如街道、楼层、门牌号等'
+    }
+  },
+  vanContactCard: {
+    name: '联系人',
+    tel: '联系电话',
+    addText: '添加订单联系人信息'
+  },
+  vanContactList: {
+    name: '联系人',
+    tel: '联系电话',
+    addText: '新建联系人'
+  },
+  vanContactEdit: {
+    name: '联系人',
+    namePlaceholder: '名字',
+    nameEmpty: '请填写名字',
+    nameOverlimit: '名字过长，请重新输入',
+    tel: '联系电话',
+    telPlaceholder: '手机或固定电话',
+    telInvalid: '请填写正确的手机号码或电话号码',
+    save: '保存',
+    delete: '删除联系人',
+    confirmDelete: '确定要删除这个联系人么'
+  },
+  vanPicker: {
+    confirm: '完成'
+  },
+  vanPullRefresh: {
+    pullingText: '下拉即可刷新...',
+    loosingText: '释放即可刷新...',
+    loadingText: '加载中...'
+  }
+};
diff --git a/packages/picker/picker-column.vue b/packages/picker/PickerColumn.vue
similarity index 100%
rename from packages/picker/picker-column.vue
rename to packages/picker/PickerColumn.vue
diff --git a/packages/picker/index.vue b/packages/picker/index.vue
index b9084bb26d0..c926835ddde 100644
--- a/packages/picker/index.vue
+++ b/packages/picker/index.vue
@@ -2,8 +2,8 @@
   <div class="van-picker">
     <div class="van-picker__toolbar van-hairline--top-bottom" v-show="showToolbar">
       <slot>
-        <a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
-        <a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>
+        <a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">{{ $t('cancel') }}</a>
+        <a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">{{ $t('confirm') }}</a>
         <div v-if="title" class="van-picker__title">{{ title }}</div>
       </slot>
     </div>
@@ -25,13 +25,16 @@
 </template>
 
 <script>
-import PickerColumn from './picker-column';
+import PickerColumn from './PickerColumn';
+import { i18n } from '../locale';
 
 const DEFAULT_ITEM_HEIGHT = 44;
 
 export default {
   name: 'van-picker',
 
+  mixins: [i18n],
+
   components: {
     [PickerColumn.name]: PickerColumn
   },
diff --git a/packages/pull-refresh/index.vue b/packages/pull-refresh/index.vue
index 2cba3db7ddc..32fa1cd97cb 100644
--- a/packages/pull-refresh/index.vue
+++ b/packages/pull-refresh/index.vue
@@ -10,15 +10,15 @@
     <div class="van-pull-refresh__head">
       <slot name="normal" v-if="status === 'normal'"></slot>
       <slot name="pulling" v-if="status === 'pulling'">
-        <span class="van-pull-refresh__text">{{ pullingText }}</span>
+        <span class="van-pull-refresh__text">{{ pullingText || $t('pullingText') }}</span>
       </slot>
       <slot name="loosing" v-if="status === 'loosing'">
-        <span class="van-pull-refresh__text">{{ loosingText }}</span>
+        <span class="van-pull-refresh__text">{{ loosingText || $t('loosingText') }}</span>
       </slot>
       <slot name="loading" v-if="status === 'loading'">
         <div class="van-pull-refresh__loading">
           <van-loading />
-          <span>{{ loadingText }}</span>
+          <span>{{ loadingText || $t('loadingText') }}</span>
         </div>
       </slot>
     </div>
@@ -29,27 +29,21 @@
 <script>
 import Loading from '../loading';
 import scrollUtils from '../utils/scroll';
+import { i18n } from '../locale';
 
 export default {
   name: 'van-pull-refresh',
 
+  mixins: [i18n],
+
   props: {
+    pullingText: String,
+    loosingText: String,
+    loadingText: String,
     value: {
       type: Boolean,
       required: true
     },
-    pullingText: {
-      type: String,
-      default: '下拉即可刷新...'
-    },
-    loosingText: {
-      type: String,
-      default: '释放即可刷新...'
-    },
-    loadingText: {
-      type: String,
-      default: '加载中...'
-    },
     animationDuration: {
       type: Number,
       default: 300
diff --git a/packages/search/index.vue b/packages/search/index.vue
index 7c35c1e66bc..0c11b0ae918 100644
--- a/packages/search/index.vue
+++ b/packages/search/index.vue
@@ -3,22 +3,23 @@
     class="van-search"
     :class="{ 'van-search--show-action': showAction }"
     :style="{ 'background-color': background }">
-    <div class="van-search__input-wrap" v-clickoutside="handleClickoutside">
-      <van-icon name="search"></van-icon>
+    <div class="van-search__input-wrap" v-clickoutside="onClickoutside">
+      <van-icon name="search" />
       <input
         type="search"
         class="van-search__input"
         v-refocus="focusStatus"
         :value="value"
         :placeholder="placeholder"
-        @input="handleInput"
-        @focus="handleFocus"
-        @keypress.enter.prevent="handleSearch">
-      <van-icon name="clear" @click="handleClean" v-show="isFocus"></van-icon>
+        @input="onInput"
+        @focus="onFocus"
+        @keypress.enter.prevent="onSearch"
+      >
+      <van-icon name="clear" @click="onClean" v-show="isFocus" />
     </div>
     <div class="van-search__action" v-if="showAction">
       <slot name="action">
-        <div class="van-search__action-text" @click="handleBack">取消</div>
+        <div class="van-search__action-text" @click="onBack">{{ $t('cancel') }}</div>
       </slot>
     </div>
   </div>
@@ -27,17 +28,20 @@
 <script>
 import Icon from '../icon';
 import Clickoutside from '../utils/clickoutside';
+import { i18n } from '../locale';
 
 export default {
   name: 'van-search',
 
+  mixins: [i18n],
+
   components: {
     [Icon.name]: Icon
   },
 
   props: {
-    placeholder: String,
     value: String,
+    placeholder: String,
     showAction: {
       type: Boolean,
       default: false
@@ -50,8 +54,8 @@ export default {
 
   data() {
     return {
-      focusStatus: false,
-      isFocus: false
+      isFocus: false,
+      focusStatus: false
     };
   },
 
@@ -67,48 +71,37 @@ export default {
   },
 
   methods: {
-    /**
-     * 进入input焦点，出现close和取消
-     */
-    handleFocus() {
+    onFocus() {
       this.isFocus = true;
     },
 
-    handleInput(event) {
+    onInput(event) {
       this.$emit('input', event.target.value);
     },
 
-    /**
-     * 点击close后清空value后，再聚焦input框
-     */
-    handleClean() {
+    // refocus after click close icon
+    onClean() {
       this.$emit('input', '');
       this.focusStatus = true;
 
-      // 保证多次点击 clean 后，仍能触发 refocus
+      // ensure refocus can work after click clean icon
       this.$nextTick(() => {
         this.focusStatus = false;
       });
     },
 
-    /**
-     * 点击取消后，清空所有回复最初状态
-     */
-    handleBack() {
+    onBack() {
       this.$emit('input', '');
       this.$emit('cancel');
     },
 
-    /**
-     * input输入回车后，发送回调
-     */
-    handleSearch(e) {
+    onSearch(e) {
       e.preventDefault();
       this.$emit('search', this.value);
       return false;
     },
 
-    handleClickoutside() {
+    onClickoutside() {
       this.isFocus = false;
       this.focusStatus = false;
     }
diff --git a/packages/utils/camelize.js b/packages/utils/camelize.js
new file mode 100644
index 00000000000..1dcd75e37d6
--- /dev/null
+++ b/packages/utils/camelize.js
@@ -0,0 +1,4 @@
+const camelizeRE = /-(\w)/g;
+export default function(str) {
+  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '');
+}
diff --git a/packages/utils/deep-assign.js b/packages/utils/deep-assign.js
new file mode 100644
index 00000000000..bf3dd1051f1
--- /dev/null
+++ b/packages/utils/deep-assign.js
@@ -0,0 +1,34 @@
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+function isObj(x) {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+function assignKey(to, from, key) {
+  const val = from[key];
+
+  if (
+    val === undefined ||
+    val === null ||
+    (hasOwnProperty.call(to, key) &&
+      (to[key] === undefined || to[key] === null))
+  ) {
+    return;
+  }
+
+  if (!hasOwnProperty.call(to, key) || !isObj(val)) {
+    to[key] = val;
+  } else {
+    to[key] = assign(Object(to[key]), from[key]);
+  }
+}
+
+export default function assign(to, from) {
+  for (const key in from) {
+    if (hasOwnProperty.call(from, key)) {
+      assignKey(to, from, key);
+    }
+  }
+  return to;
+}
diff --git a/packages/utils/get.js b/packages/utils/get.js
new file mode 100644
index 00000000000..770de7ce966
--- /dev/null
+++ b/packages/utils/get.js
@@ -0,0 +1,9 @@
+export default function(object, path) {
+  const keys = path.split('.');
+  let result = object;
+
+  keys.forEach(key => {
+    result = result[key] || '';
+  });
+  return result;
+}
diff --git a/packages/vant-css/src/contact-card.css b/packages/vant-css/src/contact-card.css
index e9744c6976d..7feec175ab3 100644
--- a/packages/vant-css/src/contact-card.css
+++ b/packages/vant-css/src/contact-card.css
@@ -8,6 +8,7 @@
     line-height: 40px;
 
     .van-contact-card__icon {
+      width: 40px;
       color: $blue;
       font-size: 40px;
     }
diff --git a/packages/vant-css/src/progress.css b/packages/vant-css/src/progress.css
index eebbdba6f8c..bcce448a770 100644
--- a/packages/vant-css/src/progress.css
+++ b/packages/vant-css/src/progress.css
@@ -15,13 +15,15 @@
 
   &__pivot {
     top: 50%;
-    width: 28px;
+    min-width: 28px;
+    padding: 0 5px;
     font-size: 8px;
     margin-top: -6px;
     position: absolute;
     border-radius: 6px;
     line-height: 12px;
     text-align: center;
+    box-sizing: border-box;
     background-color: $gray-light;
   }
 }
diff --git a/test/unit/specs/address-edit.spec.js b/test/unit/specs/address-edit.spec.js
index e31a91ce874..1ca4fe09c7d 100644
--- a/test/unit/specs/address-edit.spec.js
+++ b/test/unit/specs/address-edit.spec.js
@@ -1,7 +1,7 @@
 import { mount } from 'avoriaz';
 import AddressEdit from 'packages/address-edit';
 import AddressDetail from 'packages/address-edit/Detail';
-import areaList from '../../../docs/mock/area.json';
+import areaList from '../mock/area.json';
 
 describe('AddressEdit', () => {
   let wrapper;
diff --git a/test/unit/specs/deep-assign.spec.js b/test/unit/specs/deep-assign.spec.js
new file mode 100644
index 00000000000..d6b15edabb4
--- /dev/null
+++ b/test/unit/specs/deep-assign.spec.js
@@ -0,0 +1,96 @@
+import deepAssign from 'packages/utils/deep-assign';
+
+describe('DatetimePicker', () => {
+  it('basic assign', () => {
+    const a = { foo: 0 };
+    const b = { foo: 0, bar: 1 };
+    const output = { foo: 0, bar: 1 };
+    expect(deepAssign(a, b)).to.eql(output);
+    expect(deepAssign(a, null)).to.eql(a);
+    expect(deepAssign(a, undefined)).to.eql(a);
+  });
+
+  it('same object', () => {
+    const a = { foo: 0 };
+    expect(deepAssign(a, a)).to.eql(a);
+  });
+
+  it('only assign own keys', () => {
+    const Test = function() {};
+    Test.prototype.a = 'many';
+    const test = new Test();
+    test.bar = 1;
+    expect(deepAssign({ foo: 1 }, test, { foo: 1, bar: 1 })).to.eql({
+      foo: 1,
+      bar: 1
+    });
+  });
+
+  it('do not assign undefined values', () => {
+    expect(deepAssign({}, { foo: undefined })).to.eql({});
+  });
+
+  it('do not assign null values', () => {
+    expect(deepAssign({}, { foo: null })).to.eql({});
+  });
+
+  it('assign proprety, if proprety is null in the prototype chain', () => {
+    const Unicorn = function() {};
+    Unicorn.prototype.rainbows = null;
+    const unicorn = new Unicorn();
+    expect(deepAssign(unicorn, { rainbows: 'many' }).rainbows).to.eql('many');
+  });
+
+  it('assign proprety, if proprety is undefined in the prototype chain', () => {
+    const Unicorn = function() {};
+    Unicorn.prototype.rainbows = undefined;
+    const unicorn = new Unicorn();
+    expect(deepAssign(unicorn, { rainbows: 'many' }).rainbows).to.eql('many');
+  });
+
+  it('do not merge with a target proprety in the prototype chain', () => {
+    const amountOfRainbows = { amount: 'many' };
+    const Unicorn = function() {};
+    Unicorn.prototype.rainbows = amountOfRainbows;
+    const unicorn = deepAssign(new Unicorn(), { rainbows: 'none' });
+    expect(unicorn.rainbows).to.eql('none');
+    expect(unicorn.rainbows.amount).to.eql(undefined);
+    expect(Unicorn.prototype.rainbows).to.eql(amountOfRainbows);
+  });
+
+  it('deep assign', () => {
+    const a = {
+      foo: {
+        foo: {
+          foo: true
+        },
+        bar: {
+          bar: false
+        }
+      }
+    };
+    const b = {
+      foo: {
+        foo: {
+          foo: false,
+          bar: true
+        },
+        bar: null
+      },
+      bar: true
+    };
+    const output = {
+      foo: {
+        foo: {
+          foo: false,
+          bar: true
+        },
+        bar: {
+          bar: false
+        }
+      },
+      bar: true
+    };
+    expect(deepAssign(a, b)).to.eql(output);
+  });
+});
diff --git a/test/unit/specs/picker.spec.js b/test/unit/specs/picker.spec.js
index ee2d08e0608..92483cef0dc 100644
--- a/test/unit/specs/picker.spec.js
+++ b/test/unit/specs/picker.spec.js
@@ -1,5 +1,5 @@
 import Picker from 'packages/picker';
-import PickerColumn from 'packages/picker/picker-column';
+import PickerColumn from 'packages/picker/PickerColumn';
 import { mount } from 'avoriaz';
 
 const itemHeight = 44;
diff --git a/test/unit/specs/popup.spec.js b/test/unit/specs/popup.spec.js
index dc13fad465a..5a609dee21d 100644
--- a/test/unit/specs/popup.spec.js
+++ b/test/unit/specs/popup.spec.js
@@ -79,7 +79,7 @@ describe('Popup', () => {
       setTimeout(() => {
         expect(wrapper.element.style.display).to.equal('none');
         done();
-      }, 300);
+      }, 500);
     }, 300);
   });
 
diff --git a/yarn.lock b/yarn.lock
index 3e8e3c181dd..792a934c89a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -58,7 +58,7 @@ acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.1.1:
+acorn@^5.0.0, acorn@^5.1.1, acorn@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.2.1.tgz#317ac7821826c22c702d66189ab8359675f135d7"
 
@@ -306,6 +306,10 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
 async@1.x, async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -1126,10 +1130,10 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     electron-to-chromium "^1.2.7"
 
 browserslist@^2.1.2, browserslist@^2.5.1:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.8.0.tgz#27d64028130a2e8585ca96f7c3b7730eff4de493"
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.9.0.tgz#706aca15c53be15610f466e348cbfa0c00a6a379"
   dependencies:
-    caniuse-lite "^1.0.30000758"
+    caniuse-lite "^1.0.30000760"
     electron-to-chromium "^1.3.27"
 
 buffer-indexof@^1.0.0:
@@ -1218,12 +1222,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000760"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000760.tgz#3ea29473eb78a6ccb09f2eb73ac9e1debfec528d"
+  version "1.0.30000764"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000764.tgz#d73ab11ae62f6a9e2f69867d6d9c23ae3f2e5d8d"
 
-caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000758:
-  version "1.0.30000760"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000760.tgz#ec720395742f1c7ec8947fd6dd2604e77a8f98ff"
+caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000760:
+  version "1.0.30000764"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000764.tgz#97ea7472f9d3e691eede34f21983cfc219ac7842"
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -1400,8 +1404,8 @@ clone@^0.2.0:
   resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f"
 
 clone@^1.0.0, clone@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
 
 co@^4.6.0:
   version "4.6.0"
@@ -1426,8 +1430,8 @@ codecov@^3.0.0:
     urlgrey "0.4.4"
 
 color-convert@^1.3.0, color-convert@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
   dependencies:
     color-name "^1.1.1"
 
@@ -1540,8 +1544,8 @@ concat-stream@1.6.0, concat-stream@^1.5.2:
     typedarray "^0.0.6"
 
 connect-history-api-fallback@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.4.0.tgz#3db24f973f4b923b0e82f619ce0df02411ca623d"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
 
 connect@^3.6.0:
   version "3.6.5"
@@ -2577,10 +2581,10 @@ eslint@^3.18.0:
     user-home "^2.0.0"
 
 espree@^3.4.0:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.1.tgz#0c988b8ab46db53100a1954ae4ba995ddd27d87e"
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
   dependencies:
-    acorn "^5.1.1"
+    acorn "^5.2.1"
     acorn-jsx "^3.0.0"
 
 esprima@2.7.x, esprima@^2.1.0, esprima@^2.6.0, esprima@^2.7.1:
@@ -3111,19 +3115,19 @@ fs-extra@~0.6.4:
     rimraf "~2.2.0"
 
 fs-readdir-recursive@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
 
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
 fsevents@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
   dependencies:
     nan "^2.3.0"
-    node-pre-gyp "^0.6.36"
+    node-pre-gyp "^0.6.39"
 
 fstream-ignore@^1.0.5:
   version "1.0.5"
@@ -4273,10 +4277,6 @@ json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
 
-json-templater@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/json-templater/-/json-templater-1.1.0.tgz#355bb4bc990bd53cc157f761fae03f3f23dd14aa"
-
 json3@3.3.2, json3@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
@@ -4382,15 +4382,15 @@ karma-spec-reporter@^0.0.31:
   dependencies:
     colors "^1.1.2"
 
-karma-webpack@^2.0.4:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-2.0.5.tgz#4f56887e32cf4f9583391c2388415de06af06efd"
+karma-webpack@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-2.0.6.tgz#967918e59750ebe0f40829263435fde7ac81bdb4"
   dependencies:
     async "~0.9.0"
     loader-utils "^0.2.5"
     lodash "^3.8.0"
-    source-map "^0.1.41"
-    webpack-dev-middleware "^1.0.11"
+    source-map "^0.5.6"
+    webpack-dev-middleware "^1.12.0"
 
 karma@^1.7.1:
   version "1.7.1"
@@ -4841,8 +4841,8 @@ log4js@^0.6.31:
     semver "~4.3.3"
 
 loglevel@^1.4.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.5.1.tgz#189078c94ab9053ee215a0acdbf24244ea0f6502"
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.0.tgz#ae0caa561111498c5ba13723d6fb631d24003934"
 
 lolex@^1.6.0:
   version "1.6.0"
@@ -5242,7 +5242,7 @@ node-libs-browser@^2.0.0:
     util "^0.10.3"
     vm-browserify "0.0.4"
 
-node-pre-gyp@^0.6.36:
+node-pre-gyp@^0.6.39:
   version "0.6.39"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
   dependencies:
@@ -6254,8 +6254,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 prettier@^1.7.0:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.8.1.tgz#91064d778c08c85ac1cbe6b23195c34310d039f9"
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.8.2.tgz#bff83e7fd573933c607875e5ba3abbdffb96aeb8"
 
 pretty-error@^2.0.2:
   version "2.1.1"
@@ -6823,10 +6823,6 @@ safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
-safe-buffer@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
-
 samsam@1.x, samsam@^1.1.3:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.3.0.tgz#8d1d9350e25622da30de3e44ba692b5221ab7c50"
@@ -7091,12 +7087,6 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.1.41:
-  version "0.1.43"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
-  dependencies:
-    amdefine ">=0.0.4"
-
 source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -7547,8 +7537,8 @@ type-check@~0.3.2:
     prelude-ls "~1.1.2"
 
 type-detect@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.3.tgz#0e3f2670b44099b0b46c284d136a7ef49c74c2ea"
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.5.tgz#d70e5bc81db6de2a381bcaca0c6e0cbdc7635de2"
 
 type-is@~1.6.15:
   version "1.6.15"
@@ -7585,8 +7575,8 @@ uc.micro@^1.0.1, uc.micro@^1.0.3:
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192"
 
 uglify-js@3.1.x:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.8.tgz#780d08b4f6782fe36ea5484d952362eddaf1d7b8"
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.9.tgz#dffca799308cf327ec3ac77eeacb8e196ce3b452"
   dependencies:
     commander "~2.11.0"
     source-map "~0.6.1"
@@ -7765,6 +7755,18 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "~1.0.0"
     spdx-expression-parse "~1.0.0"
 
+vant-doc@0.3.16:
+  version "0.3.16"
+  resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-0.3.16.tgz#0efffba8173eeb46cc5ec15b4539646d656d63b7"
+  dependencies:
+    cheerio "0.22.0"
+    decamelize "^1.2.0"
+    fs-extra "^4.0.2"
+    markdown-it "^8.3.2"
+    markdown-it-container "^2.0.0"
+    node-watch "^0.5.5"
+    nprogress "^0.2.0"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -7921,9 +7923,9 @@ webidl-conversions@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-2.0.1.tgz#3bf8258f7d318c7443c36f2e169402a1a6703506"
 
-webpack-bundle-analyzer@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.0.tgz#b58bc34cc30b27ffdbaf3d00bf27aba6fa29c6e3"
+webpack-bundle-analyzer@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.1.tgz#c2c8e03e8e5768ed288b39ae9e27a8b8d7b9d476"
   dependencies:
     acorn "^5.1.1"
     chalk "^1.1.3"
@@ -7935,9 +7937,9 @@ webpack-bundle-analyzer@^2.9.0:
     lodash "^4.17.4"
     mkdirp "^0.5.1"
     opener "^1.4.3"
-    ws "^2.3.1"
+    ws "^3.3.1"
 
-webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.11.0:
+webpack-dev-middleware@^1.11.0, webpack-dev-middleware@^1.12.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz#d34efefb2edda7e1d3b5dbe07289513219651709"
   dependencies:
@@ -8034,8 +8036,8 @@ websocket-driver@>=0.5.1:
     websocket-extensions ">=0.1.1"
 
 websocket-extensions@>=0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.2.tgz#0e18781de629a18308ce1481650f67ffa2693a5d"
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
 
 whatwg-fetch@>=0.10.0:
   version "2.0.3"
@@ -8111,11 +8113,12 @@ ws@1.1.2:
     options ">=0.0.5"
     ultron "1.0.x"
 
-ws@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-2.3.1.tgz#6b94b3e447cb6a363f785eaf94af6359e8e81c80"
+ws@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.1.tgz#d97e34dee06a1190c61ac1e95f43cb60b78cf939"
   dependencies:
-    safe-buffer "~5.0.1"
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
 wtf-8@1.0.0:
@@ -8216,15 +8219,3 @@ yauzl@2.4.1:
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
-
-zan-doc@0.3.11:
-  version "0.3.11"
-  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.11.tgz#5a74a409b98a97536a93fb04ca9d634aea182e4d"
-  dependencies:
-    cheerio "0.22.0"
-    decamelize "^1.2.0"
-    fs-extra "^4.0.2"
-    markdown-it "^8.3.2"
-    markdown-it-container "^2.0.0"
-    node-watch "^0.5.5"
-    nprogress "^0.2.0"