diff --git a/.github/CONTRIBUTING.zh-CN.md b/.github/CONTRIBUTING.zh-CN.md
index a01e1b8d5..b74406816 100644
--- a/.github/CONTRIBUTING.zh-CN.md
+++ b/.github/CONTRIBUTING.zh-CN.md
@@ -48,7 +48,7 @@ vant
 
 - 添加 Vue 代码
 
-以添加新组件 `Button` 为例，首先在 `packages` 目录下新建目录 `button`，用 `index.js` 或者 `index.vue` 文件做为组件入口，需要的话可以建其他文件来组织代码。
+以添加新组件 `Button` 为例，首先在 `packages` 目录下新建目录 `button`，用 `index.js` 或者 `index.vue` 文件做为组件入口，需要的话可以建其他文件来组织代码。测试代码放在组件目录下的 `test` 文件夹中，示例代码放在组件目录下的 `demo` 文件夹中。
 
 - 添加样式代码
 
@@ -60,10 +60,6 @@ vant
 
 新组件的文档编写，需要在 `docs/markdown` 下各个语言中新建对应同名文档 `button.md`，在 `docs/demos` 下创建组件示例，并在 `docs/src/doc.config.js` 中进行配置组件名称
 
-- 添加测试代码
-
-需要在 `test/specs` 目录下增加对应组件的测试文件，以 .spec.js 结尾，如：`button.spec.js`。测试框架使用了 karma + mocha + sinon + chai，vue 相关的操作使用了 [avoriaz](https://github.com/eddyerburgh/avoriaz)
-
 
 ## 组件文档如何编写
 
diff --git a/.github/MARKDOWN.md b/.github/MARKDOWN.md
index ade817155..d00d198d5 100644
--- a/.github/MARKDOWN.md
+++ b/.github/MARKDOWN.md
@@ -2,7 +2,7 @@
 
 #### 文件格式
 
-组件文档采用 markdown 格式，和普通 markdown 最大的区别是示例代码是直接写在 markdown 文件里面，所以请确保你写的示例代码是可以正确运行的。
+组件文档采用 markdown 格式编写
 
 #### 文档内的标题规范
 
@@ -40,4 +40,3 @@
 
 - 从简单用法开始介绍，不要上来就同时使用一大堆 API，会让人觉得难以上手
 - 正交性原则，一个示例只演示一个（或者一类）API 的使用方法，如无特殊需求不要在一个示例中同时演示多个 API 混合使用
-- 如果示例的一句话描述无法完整描述整个场景，可以在 `:::demo` 之前写一段详细的说明性文字
diff --git a/build/bin/build-components.js b/build/bin/build-components.js
index d79b28c6b..7725edcc2 100644
--- a/build/bin/build-components.js
+++ b/build/bin/build-components.js
@@ -13,7 +13,7 @@ const compilerOption = {
     extends: path.join(__dirname, '../../.babelrc')
   }
 };
-const whiteList = ['vant-css', 'test'];
+const whiteList = ['vant-css', 'test', 'demo'];
 
 // clear dir
 fs.emptyDirSync(esDir);
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index e6ca9e141..25f64a9fb 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -1,5 +1,5 @@
 const Components = require('./get-components')();
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
 const uppercamelize = require('uppercamelcase');
 const version = process.env.VERSION || require('../../package.json').version;
@@ -49,20 +49,19 @@ export default {
 }
 
 function buildDemoEntry() {
-  const dir = path.join(__dirname, '../../docs/demos/views');
+  const dir = path.join(__dirname, '../../packages');
   const demos = fs.readdirSync(dir)
-    .filter(name => ~name.indexOf('.vue'))
-    .map(name => name.replace('.vue', ''))
-    .map(name => `'${name}': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/${name}'), '${name}')), '${name}'))`);
+    .filter(name => fs.existsSync(path.join(dir, `${name}/demo/index.vue`)))
+    .map(name => `'${name}': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/${name}/demo'), '${name}')), '${name}'))`);
 
   const content = `${tips}
-import { asyncWrapper, componentWrapper } from './common';
+import { asyncWrapper, componentWrapper } from './demo-common';
 
 export default {
   ${demos.join(',\n  ')}
 };
 `;
-  fs.writeFileSync(path.join(dir, '../index.js'), content);
+  fs.writeFileSync(path.join(dir, '../docs/src/demo-entry.js'), content);
 }
 
 function buildDocsEntry() {
diff --git a/docs/demos/index.js b/docs/demos/index.js
deleted file mode 100644
index 98bcc7e6d..000000000
--- a/docs/demos/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-// This file is auto gererated by build/bin/build-entry.js
-import { asyncWrapper, componentWrapper } from './common';
-
-export default {
-  'actionsheet': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/actionsheet'), 'actionsheet')), 'actionsheet')),
-  'address-edit': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/address-edit'), 'address-edit')), 'address-edit')),
-  'address-list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/address-list'), 'address-list')), 'address-list')),
-  'area': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/area'), 'area')), 'area')),
-  'badge': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/badge'), 'badge')), 'badge')),
-  'built-in-style': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/built-in-style'), 'built-in-style')), 'built-in-style')),
-  'button': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/button'), 'button')), 'button')),
-  'card': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/card'), 'card')), 'card')),
-  'cell-swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe')),
-  'cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell'), 'cell')), 'cell')),
-  'checkbox': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/checkbox'), 'checkbox')), 'checkbox')),
-  'circle': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/circle'), 'circle')), 'circle')),
-  'collapse': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/collapse'), 'collapse')), 'collapse')),
-  'contact': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/contact'), 'contact')), 'contact')),
-  'coupon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/coupon'), 'coupon')), 'coupon')),
-  'datetime-picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker')),
-  'dialog': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/dialog'), 'dialog')), 'dialog')),
-  'field': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/field'), 'field')), 'field')),
-  'goods-action': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/goods-action'), 'goods-action')), 'goods-action')),
-  'icon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/icon'), 'icon')), 'icon')),
-  'image-preview': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/image-preview'), 'image-preview')), 'image-preview')),
-  'layout': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/layout'), 'layout')), 'layout')),
-  'lazyload': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/lazyload'), 'lazyload')), 'lazyload')),
-  'list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/list'), 'list')), 'list')),
-  'loading': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/loading'), 'loading')), 'loading')),
-  'nav-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/nav-bar'), 'nav-bar')), 'nav-bar')),
-  'notice-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/notice-bar'), 'notice-bar')), 'notice-bar')),
-  'number-keyboard': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/number-keyboard'), 'number-keyboard')), 'number-keyboard')),
-  'pagination': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/pagination'), 'pagination')), 'pagination')),
-  'panel': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/panel'), 'panel')), 'panel')),
-  'password-input': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/password-input'), 'password-input')), 'password-input')),
-  'picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/picker'), 'picker')), 'picker')),
-  'popup': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/popup'), 'popup')), 'popup')),
-  'progress': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/progress'), 'progress')), 'progress')),
-  'pull-refresh': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/pull-refresh'), 'pull-refresh')), 'pull-refresh')),
-  'radio': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/radio'), 'radio')), 'radio')),
-  'rate': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/rate'), 'rate')), 'rate')),
-  'search': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/search'), 'search')), 'search')),
-  'sku': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/sku'), 'sku')), 'sku')),
-  'slider': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/slider'), 'slider')), 'slider')),
-  'stepper': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/stepper'), 'stepper')), 'stepper')),
-  'steps': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/steps'), 'steps')), 'steps')),
-  'submit-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/submit-bar'), 'submit-bar')), 'submit-bar')),
-  'swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/swipe'), 'swipe')), 'swipe')),
-  'switch-cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/switch-cell'), 'switch-cell')), 'switch-cell')),
-  'switch': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/switch'), 'switch')), 'switch')),
-  'tab': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/tab'), 'tab')), 'tab')),
-  'tabbar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/tabbar'), 'tabbar')), 'tabbar')),
-  'tag': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/tag'), 'tag')), 'tag')),
-  'toast': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/toast'), 'toast')), 'toast')),
-  'tree-select': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/tree-select'), 'tree-select')), 'tree-select')),
-  'uploader': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/uploader'), 'uploader')), 'uploader')),
-  'waterfall': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/waterfall'), 'waterfall')), 'waterfall'))
-};
diff --git a/docs/markdown/en-US/area.md b/docs/markdown/en-US/area.md
index e6bf68523..d29a8c622 100644
--- a/docs/markdown/en-US/area.md
+++ b/docs/markdown/en-US/area.md
@@ -88,7 +88,7 @@ Example of `AreaList`
 }
 ```
 
-All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.js)
+All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area-en.js)
 
 #### argument of callback function confirm
 An array contains selected area objects.
diff --git a/docs/markdown/en-US/layout.md b/docs/markdown/en-US/col.md
similarity index 100%
rename from docs/markdown/en-US/layout.md
rename to docs/markdown/en-US/col.md
diff --git a/docs/markdown/en-US/contact.md b/docs/markdown/en-US/contact-card.md
similarity index 100%
rename from docs/markdown/en-US/contact.md
rename to docs/markdown/en-US/contact-card.md
diff --git a/docs/markdown/en-US/coupon.md b/docs/markdown/en-US/coupon-list.md
similarity index 100%
rename from docs/markdown/en-US/coupon.md
rename to docs/markdown/en-US/coupon-list.md
diff --git a/docs/markdown/en-US/built-in-style.md b/docs/markdown/en-US/vant-css.md
similarity index 100%
rename from docs/markdown/en-US/built-in-style.md
rename to docs/markdown/en-US/vant-css.md
diff --git a/docs/markdown/index.js b/docs/markdown/index.js
index c603df934..e307d687e 100644
--- a/docs/markdown/index.js
+++ b/docs/markdown/index.js
@@ -18,7 +18,6 @@ export default {
   '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/built-in-style': wrapper(r => require.ensure([], () => r(require('./zh-CN/built-in-style.md')), 'zh-CN/built-in-style')),
   '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')),
@@ -27,9 +26,10 @@ export default {
   '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/circle': wrapper(r => require.ensure([], () => r(require('./zh-CN/circle.md')), 'zh-CN/circle')),
+  'zh-CN/col': wrapper(r => require.ensure([], () => r(require('./zh-CN/col.md')), 'zh-CN/col')),
   'zh-CN/collapse': wrapper(r => require.ensure([], () => r(require('./zh-CN/collapse.md')), 'zh-CN/collapse')),
-  '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/contact-card': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact-card.md')), 'zh-CN/contact-card')),
+  'zh-CN/coupon-list': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon-list.md')), 'zh-CN/coupon-list')),
   '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')),
@@ -38,7 +38,6 @@ export default {
   '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/intro': wrapper(r => require.ensure([], () => r(require('./zh-CN/intro.md')), 'zh-CN/intro')),
-  '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/list': wrapper(r => require.ensure([], () => r(require('./zh-CN/list.md')), 'zh-CN/list')),
   'zh-CN/loading': wrapper(r => require.ensure([], () => r(require('./zh-CN/loading.md')), 'zh-CN/loading')),
@@ -71,13 +70,13 @@ export default {
   '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/vant-css': wrapper(r => require.ensure([], () => r(require('./zh-CN/vant-css.md')), 'zh-CN/vant-css')),
   '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/built-in-style': wrapper(r => require.ensure([], () => r(require('./en-US/built-in-style.md')), 'en-US/built-in-style')),
   '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')),
@@ -85,9 +84,10 @@ export default {
   '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/circle': wrapper(r => require.ensure([], () => r(require('./en-US/circle.md')), 'en-US/circle')),
+  'en-US/col': wrapper(r => require.ensure([], () => r(require('./en-US/col.md')), 'en-US/col')),
   'en-US/collapse': wrapper(r => require.ensure([], () => r(require('./en-US/collapse.md')), 'en-US/collapse')),
-  '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/contact-card': wrapper(r => require.ensure([], () => r(require('./en-US/contact-card.md')), 'en-US/contact-card')),
+  'en-US/coupon-list': wrapper(r => require.ensure([], () => r(require('./en-US/coupon-list.md')), 'en-US/coupon-list')),
   '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')),
@@ -96,7 +96,6 @@ export default {
   '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/intro': wrapper(r => require.ensure([], () => r(require('./en-US/intro.md')), 'en-US/intro')),
-  '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/list': wrapper(r => require.ensure([], () => r(require('./en-US/list.md')), 'en-US/list')),
   'en-US/loading': wrapper(r => require.ensure([], () => r(require('./en-US/loading.md')), 'en-US/loading')),
@@ -129,5 +128,6 @@ export default {
   '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/vant-css': wrapper(r => require.ensure([], () => r(require('./en-US/vant-css.md')), 'en-US/vant-css')),
   'en-US/waterfall': wrapper(r => require.ensure([], () => r(require('./en-US/waterfall.md')), 'en-US/waterfall'))
 };
diff --git a/docs/markdown/zh-CN/area.md b/docs/markdown/zh-CN/area.md
index 5dc0d33d8..351217398 100644
--- a/docs/markdown/zh-CN/area.md
+++ b/docs/markdown/zh-CN/area.md
@@ -92,7 +92,7 @@ Vue.use(Area);
 }
 ```
 
-完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.js)
+完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area.js)
 
 #### 点击完成时返回的数据格式
 
diff --git a/docs/markdown/zh-CN/layout.md b/docs/markdown/zh-CN/col.md
similarity index 100%
rename from docs/markdown/zh-CN/layout.md
rename to docs/markdown/zh-CN/col.md
diff --git a/docs/markdown/zh-CN/contact.md b/docs/markdown/zh-CN/contact-card.md
similarity index 100%
rename from docs/markdown/zh-CN/contact.md
rename to docs/markdown/zh-CN/contact-card.md
diff --git a/docs/markdown/zh-CN/coupon.md b/docs/markdown/zh-CN/coupon-list.md
similarity index 100%
rename from docs/markdown/zh-CN/coupon.md
rename to docs/markdown/zh-CN/coupon-list.md
diff --git a/docs/markdown/zh-CN/built-in-style.md b/docs/markdown/zh-CN/vant-css.md
similarity index 100%
rename from docs/markdown/zh-CN/built-in-style.md
rename to docs/markdown/zh-CN/vant-css.md
diff --git a/docs/demos/common.js b/docs/src/demo-common.js
similarity index 100%
rename from docs/demos/common.js
rename to docs/src/demo-common.js
index 27f775f3c..900655b8e 100644
--- a/docs/demos/common.js
+++ b/docs/src/demo-common.js
@@ -19,12 +19,12 @@ Vue
     lazyComponent: true
   });
 
+Vue.mixin(i18n);
 Vue.component('demo-block', DemoBlock);
 Vue.component('demo-section', DemoSection);
 
 window.Toast = Toast;
 window.Dialog = Dialog;
-Vue.mixin(i18n);
 
 Locale.add({
   'zh-CN': {
diff --git a/docs/src/demo-entry.js b/docs/src/demo-entry.js
new file mode 100644
index 000000000..12f456c98
--- /dev/null
+++ b/docs/src/demo-entry.js
@@ -0,0 +1,58 @@
+// This file is auto gererated by build/bin/build-entry.js
+import { asyncWrapper, componentWrapper } from './demo-common';
+
+export default {
+  'actionsheet': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/actionsheet/demo'), 'actionsheet')), 'actionsheet')),
+  'address-edit': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/address-edit/demo'), 'address-edit')), 'address-edit')),
+  'address-list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/address-list/demo'), 'address-list')), 'address-list')),
+  'area': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/area/demo'), 'area')), 'area')),
+  'badge': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/badge/demo'), 'badge')), 'badge')),
+  'button': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/button/demo'), 'button')), 'button')),
+  'card': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/card/demo'), 'card')), 'card')),
+  'cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/cell/demo'), 'cell')), 'cell')),
+  'cell-swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/cell-swipe/demo'), 'cell-swipe')), 'cell-swipe')),
+  'checkbox': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/checkbox/demo'), 'checkbox')), 'checkbox')),
+  'circle': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/circle/demo'), 'circle')), 'circle')),
+  'col': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/col/demo'), 'col')), 'col')),
+  'collapse': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/collapse/demo'), 'collapse')), 'collapse')),
+  'contact-card': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/contact-card/demo'), 'contact-card')), 'contact-card')),
+  'coupon-list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/coupon-list/demo'), 'coupon-list')), 'coupon-list')),
+  'datetime-picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/datetime-picker/demo'), 'datetime-picker')), 'datetime-picker')),
+  'dialog': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/dialog/demo'), 'dialog')), 'dialog')),
+  'field': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/field/demo'), 'field')), 'field')),
+  'goods-action': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/goods-action/demo'), 'goods-action')), 'goods-action')),
+  'icon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/icon/demo'), 'icon')), 'icon')),
+  'image-preview': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/image-preview/demo'), 'image-preview')), 'image-preview')),
+  'lazyload': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/lazyload/demo'), 'lazyload')), 'lazyload')),
+  'list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/list/demo'), 'list')), 'list')),
+  'loading': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/loading/demo'), 'loading')), 'loading')),
+  'nav-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/nav-bar/demo'), 'nav-bar')), 'nav-bar')),
+  'notice-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/notice-bar/demo'), 'notice-bar')), 'notice-bar')),
+  'number-keyboard': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/number-keyboard/demo'), 'number-keyboard')), 'number-keyboard')),
+  'pagination': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/pagination/demo'), 'pagination')), 'pagination')),
+  'panel': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/panel/demo'), 'panel')), 'panel')),
+  'password-input': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/password-input/demo'), 'password-input')), 'password-input')),
+  'picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/picker/demo'), 'picker')), 'picker')),
+  'popup': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/popup/demo'), 'popup')), 'popup')),
+  'progress': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/progress/demo'), 'progress')), 'progress')),
+  'pull-refresh': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/pull-refresh/demo'), 'pull-refresh')), 'pull-refresh')),
+  'radio': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/radio/demo'), 'radio')), 'radio')),
+  'rate': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/rate/demo'), 'rate')), 'rate')),
+  'search': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/search/demo'), 'search')), 'search')),
+  'sku': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/sku/demo'), 'sku')), 'sku')),
+  'slider': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/slider/demo'), 'slider')), 'slider')),
+  'stepper': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/stepper/demo'), 'stepper')), 'stepper')),
+  'steps': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/steps/demo'), 'steps')), 'steps')),
+  'submit-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/submit-bar/demo'), 'submit-bar')), 'submit-bar')),
+  'swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/swipe/demo'), 'swipe')), 'swipe')),
+  'switch': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/switch/demo'), 'switch')), 'switch')),
+  'switch-cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/switch-cell/demo'), 'switch-cell')), 'switch-cell')),
+  'tab': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/tab/demo'), 'tab')), 'tab')),
+  'tabbar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/tabbar/demo'), 'tabbar')), 'tabbar')),
+  'tag': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/tag/demo'), 'tag')), 'tag')),
+  'toast': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/toast/demo'), 'toast')), 'toast')),
+  'tree-select': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/tree-select/demo'), 'tree-select')), 'tree-select')),
+  'uploader': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/uploader/demo'), 'uploader')), 'uploader')),
+  'vant-css': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/vant-css/demo'), 'vant-css')), 'vant-css')),
+  'waterfall': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('../../packages/waterfall/demo'), 'waterfall')), 'waterfall'))
+};
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index d34b0ed1d..f9e54d1dc 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -38,7 +38,7 @@ module.exports = {
                 noExample: true
               },
               {
-                path: '/built-in-style',
+                path: '/vant-css',
                 title: '内置样式'
               },
               {
@@ -69,7 +69,7 @@ module.exports = {
             groupName: '基础组件',
             list: [
               {
-                path: '/layout',
+                path: '/col',
                 title: 'Layout - 布局'
               },
               {
@@ -277,12 +277,12 @@ module.exports = {
                 title: 'Card - 卡片'
               },
               {
-                path: '/contact',
+                path: '/contact-card',
                 title: 'Contact - 联系人'
               },
               {
-                path: '/coupon',
-                title: 'Coupon - 优惠券选择器'
+                path: '/coupon-list',
+                title: 'Coupon - 优惠券'
               },
               {
                 path: '/goods-action',
@@ -340,7 +340,7 @@ module.exports = {
                 noExample: true
               },
               {
-                path: '/built-in-style',
+                path: '/vant-css',
                 title: 'Built-in style'
               },
               {
@@ -371,7 +371,7 @@ module.exports = {
             groupName: 'Basic Components',
             list: [
               {
-                path: '/layout',
+                path: '/col',
                 title: 'Layout'
               },
               {
@@ -579,11 +579,11 @@ module.exports = {
                 title: 'Card'
               },
               {
-                path: '/contact',
+                path: '/contact-card',
                 title: 'Contact'
               },
               {
-                path: '/coupon',
+                path: '/coupon-list',
                 title: 'Coupon'
               },
               {
diff --git a/docs/src/router.js b/docs/src/router.js
index 08c8fff13..c7031e214 100644
--- a/docs/src/router.js
+++ b/docs/src/router.js
@@ -1,7 +1,7 @@
 import docConfig from './doc.config';
 import DemoList from './components/DemoList';
 import componentDocs from '../markdown';
-import componentDemos from '../demos';
+import componentDemos from './demo-entry';
 import DemoPages from './components/DemoPages';
 import Vue from 'vue';
 import './utils/iframe-router';
diff --git a/docs/demos/views/actionsheet.vue b/packages/actionsheet/demo/index.vue
similarity index 99%
rename from docs/demos/views/actionsheet.vue
rename to packages/actionsheet/demo/index.vue
index 77f47277e..0854d726d 100644
--- a/docs/demos/views/actionsheet.vue
+++ b/packages/actionsheet/demo/index.vue
@@ -62,7 +62,7 @@ export default {
     onClick(item) {
       Toast(item.name);
     },
-    
+
     handleCancel() {
       Toast('cancel');
     }
diff --git a/docs/demos/views/address-edit.vue b/packages/address-edit/demo/index.vue
similarity index 96%
rename from docs/demos/views/address-edit.vue
rename to packages/address-edit/demo/index.vue
index 97774dfec..922fba0e7 100644
--- a/docs/demos/views/address-edit.vue
+++ b/packages/address-edit/demo/index.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import areaList from '../mock/area';
+import areaList from '../../area/demo/area';
 
 export default {
   i18n: {
diff --git a/docs/demos/views/address-list.vue b/packages/address-list/demo/index.vue
similarity index 100%
rename from docs/demos/views/address-list.vue
rename to packages/address-list/demo/index.vue
diff --git a/docs/demos/mock/areaEn.js b/packages/area/demo/area-en.js
similarity index 99%
rename from docs/demos/mock/areaEn.js
rename to packages/area/demo/area-en.js
index 8150cac2e..aec2f8573 100644
--- a/docs/demos/mock/areaEn.js
+++ b/packages/area/demo/area-en.js
@@ -68,4 +68,4 @@ export default {
     '810307': 'Tsuen Wan',
     '810309': 'Lantau Island'
   }
-}
\ No newline at end of file
+};
diff --git a/docs/demos/mock/area.js b/packages/area/demo/area.js
similarity index 99%
rename from docs/demos/mock/area.js
rename to packages/area/demo/area.js
index 8e531b57f..775710198 100644
--- a/docs/demos/mock/area.js
+++ b/packages/area/demo/area.js
@@ -3603,4 +3603,4 @@ export default {
     '820101': '澳门半岛',
     '820201': '离岛'
   }
-}
\ No newline at end of file
+};
diff --git a/docs/demos/views/area.vue b/packages/area/demo/index.vue
similarity index 90%
rename from docs/demos/views/area.vue
rename to packages/area/demo/index.vue
index e0c377b57..688805cb3 100644
--- a/docs/demos/views/area.vue
+++ b/packages/area/demo/index.vue
@@ -15,8 +15,8 @@
 </template>
 
 <script>
-import AreaList from '../mock/area';
-import AreaListEn from '../mock/areaEn';
+import AreaList from './area';
+import AreaListEn from './area-en';
 
 export default {
   i18n: {
diff --git a/docs/demos/views/badge.vue b/packages/badge/demo/index.vue
similarity index 100%
rename from docs/demos/views/badge.vue
rename to packages/badge/demo/index.vue
diff --git a/docs/demos/views/button.vue b/packages/button/demo/index.vue
similarity index 100%
rename from docs/demos/views/button.vue
rename to packages/button/demo/index.vue
diff --git a/docs/demos/views/card.vue b/packages/card/demo/index.vue
similarity index 100%
rename from docs/demos/views/card.vue
rename to packages/card/demo/index.vue
diff --git a/docs/demos/views/cell-swipe.vue b/packages/cell-swipe/demo/index.vue
similarity index 100%
rename from docs/demos/views/cell-swipe.vue
rename to packages/cell-swipe/demo/index.vue
diff --git a/docs/demos/views/cell.vue b/packages/cell/demo/index.vue
similarity index 100%
rename from docs/demos/views/cell.vue
rename to packages/cell/demo/index.vue
diff --git a/docs/demos/views/checkbox.vue b/packages/checkbox/demo/index.vue
similarity index 100%
rename from docs/demos/views/checkbox.vue
rename to packages/checkbox/demo/index.vue
diff --git a/docs/demos/views/circle.vue b/packages/circle/demo/index.vue
similarity index 100%
rename from docs/demos/views/circle.vue
rename to packages/circle/demo/index.vue
diff --git a/docs/demos/views/layout.vue b/packages/col/demo/index.vue
similarity index 98%
rename from docs/demos/views/layout.vue
rename to packages/col/demo/index.vue
index 8d023225c..905c33865 100644
--- a/docs/demos/views/layout.vue
+++ b/packages/col/demo/index.vue
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <style lang="postcss">
-.demo-layout {
+.demo-col {
   .van-doc-demo-block {
     padding: 0 15px;
   }
diff --git a/packages/col/test/__snapshots__/index.spec.js.snap b/packages/col/test/__snapshots__/index.spec.js.snap
index 5c8dd5618..eb199ee56 100644
--- a/packages/col/test/__snapshots__/index.spec.js.snap
+++ b/packages/col/test/__snapshots__/index.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders layout correctly 1`] = `
+exports[`renders col correctly 1`] = `
 <div>
   <div>
     <div class="van-row">
diff --git a/packages/col/test/index.spec.js b/packages/col/test/index.spec.js
index b6ab064fb..9836e60da 100644
--- a/packages/col/test/index.spec.js
+++ b/packages/col/test/index.spec.js
@@ -1,3 +1,4 @@
+import Col from '..';
 import demoTest from '../../../test/demo-test';
 
-demoTest('layout');
+demoTest(Col);
diff --git a/docs/demos/views/collapse.vue b/packages/collapse/demo/index.vue
similarity index 100%
rename from docs/demos/views/collapse.vue
rename to packages/collapse/demo/index.vue
diff --git a/docs/demos/views/contact.vue b/packages/contact-card/demo/index.vue
similarity index 99%
rename from docs/demos/views/contact.vue
rename to packages/contact-card/demo/index.vue
index 68e8d1669..39220cc3d 100644
--- a/docs/demos/views/contact.vue
+++ b/packages/contact-card/demo/index.vue
@@ -125,7 +125,7 @@ export default {
 </script>
 
 <style lang="postcss">
-.demo-contact {
+.demo-contact-card {
   .van-popup {
     height: 100%;
   }
diff --git a/packages/contact-card/test/__snapshots__/index.spec.js.snap b/packages/contact-card/test/__snapshots__/index.spec.js.snap
index 0d92e0fe7..5dee2d8df 100644
--- a/packages/contact-card/test/__snapshots__/index.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/index.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders contact correctly 1`] = `
+exports[`renders contact-card correctly 1`] = `
 <div>
   <div>
     <div class="van-contact-card van-contact-card--add">
diff --git a/packages/contact-card/test/index.spec.js b/packages/contact-card/test/index.spec.js
index eca614449..8af41b3ea 100644
--- a/packages/contact-card/test/index.spec.js
+++ b/packages/contact-card/test/index.spec.js
@@ -1,3 +1,4 @@
+import ContactCard from '../';
 import demoTest from '../../../test/demo-test';
 
-demoTest('contact');
+demoTest(ContactCard);
diff --git a/docs/demos/views/coupon.vue b/packages/coupon-list/demo/index.vue
similarity index 99%
rename from docs/demos/views/coupon.vue
rename to packages/coupon-list/demo/index.vue
index 842a3522c..d42f0ecc0 100644
--- a/docs/demos/views/coupon.vue
+++ b/packages/coupon-list/demo/index.vue
@@ -123,7 +123,7 @@ export default {
 </script>
 
 <style lang="postcss">
-.demo-coupon {
+.demo-coupon-list {
   .van-popup {
     height: 100%;
   }
diff --git a/packages/coupon-cell/test/__snapshots__/index.spec.js.snap b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
similarity index 99%
rename from packages/coupon-cell/test/__snapshots__/index.spec.js.snap
rename to packages/coupon-list/test/__snapshots__/index.spec.js.snap
index d1a00e917..449c5c8ba 100644
--- a/packages/coupon-cell/test/__snapshots__/index.spec.js.snap
+++ b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -30,7 +30,7 @@ exports[`coupon cell 2`] = `
 </div>
 `;
 
-exports[`renders coupon correctly 1`] = `
+exports[`renders coupon-list correctly 1`] = `
 <div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
diff --git a/packages/coupon-cell/test/index.spec.js b/packages/coupon-list/test/index.spec.js
similarity index 97%
rename from packages/coupon-cell/test/index.spec.js
rename to packages/coupon-list/test/index.spec.js
index aa339a2c9..6d4073c82 100644
--- a/packages/coupon-cell/test/index.spec.js
+++ b/packages/coupon-list/test/index.spec.js
@@ -3,7 +3,7 @@ import CouponList from '../../coupon-list';
 import CouponCell from '../../coupon-cell';
 import { mount } from '@vue/test-utils';
 
-demoTest('coupon');
+demoTest(CouponList);
 
 test('exchange coupon', () => {
   const wrapper = mount(CouponList);
diff --git a/docs/demos/views/datetime-picker.vue b/packages/datetime-picker/demo/index.vue
similarity index 100%
rename from docs/demos/views/datetime-picker.vue
rename to packages/datetime-picker/demo/index.vue
diff --git a/docs/demos/views/dialog.vue b/packages/dialog/demo/index.vue
similarity index 100%
rename from docs/demos/views/dialog.vue
rename to packages/dialog/demo/index.vue
diff --git a/docs/demos/views/field.vue b/packages/field/demo/index.vue
similarity index 100%
rename from docs/demos/views/field.vue
rename to packages/field/demo/index.vue
diff --git a/docs/demos/views/goods-action.vue b/packages/goods-action/demo/index.vue
similarity index 100%
rename from docs/demos/views/goods-action.vue
rename to packages/goods-action/demo/index.vue
diff --git a/docs/demos/views/icon.vue b/packages/icon/demo/index.vue
similarity index 100%
rename from docs/demos/views/icon.vue
rename to packages/icon/demo/index.vue
diff --git a/docs/demos/views/image-preview.vue b/packages/image-preview/demo/index.vue
similarity index 100%
rename from docs/demos/views/image-preview.vue
rename to packages/image-preview/demo/index.vue
diff --git a/docs/demos/views/lazyload.vue b/packages/lazyload/demo/index.vue
similarity index 100%
rename from docs/demos/views/lazyload.vue
rename to packages/lazyload/demo/index.vue
diff --git a/docs/demos/views/list.vue b/packages/list/demo/index.vue
similarity index 100%
rename from docs/demos/views/list.vue
rename to packages/list/demo/index.vue
diff --git a/docs/demos/views/loading.vue b/packages/loading/demo/index.vue
similarity index 100%
rename from docs/demos/views/loading.vue
rename to packages/loading/demo/index.vue
diff --git a/docs/demos/views/nav-bar.vue b/packages/nav-bar/demo/index.vue
similarity index 100%
rename from docs/demos/views/nav-bar.vue
rename to packages/nav-bar/demo/index.vue
diff --git a/docs/demos/views/notice-bar.vue b/packages/notice-bar/demo/index.vue
similarity index 100%
rename from docs/demos/views/notice-bar.vue
rename to packages/notice-bar/demo/index.vue
diff --git a/docs/demos/views/number-keyboard.vue b/packages/number-keyboard/demo/index.vue
similarity index 100%
rename from docs/demos/views/number-keyboard.vue
rename to packages/number-keyboard/demo/index.vue
diff --git a/docs/demos/views/pagination.vue b/packages/pagination/demo/index.vue
similarity index 100%
rename from docs/demos/views/pagination.vue
rename to packages/pagination/demo/index.vue
diff --git a/docs/demos/views/panel.vue b/packages/panel/demo/index.vue
similarity index 100%
rename from docs/demos/views/panel.vue
rename to packages/panel/demo/index.vue
diff --git a/docs/demos/views/password-input.vue b/packages/password-input/demo/index.vue
similarity index 100%
rename from docs/demos/views/password-input.vue
rename to packages/password-input/demo/index.vue
diff --git a/docs/demos/views/picker.vue b/packages/picker/demo/index.vue
similarity index 100%
rename from docs/demos/views/picker.vue
rename to packages/picker/demo/index.vue
diff --git a/docs/demos/views/popup.vue b/packages/popup/demo/index.vue
similarity index 100%
rename from docs/demos/views/popup.vue
rename to packages/popup/demo/index.vue
diff --git a/docs/demos/views/progress.vue b/packages/progress/demo/index.vue
similarity index 100%
rename from docs/demos/views/progress.vue
rename to packages/progress/demo/index.vue
diff --git a/docs/demos/views/pull-refresh.vue b/packages/pull-refresh/demo/index.vue
similarity index 100%
rename from docs/demos/views/pull-refresh.vue
rename to packages/pull-refresh/demo/index.vue
diff --git a/docs/demos/views/radio.vue b/packages/radio/demo/index.vue
similarity index 100%
rename from docs/demos/views/radio.vue
rename to packages/radio/demo/index.vue
diff --git a/docs/demos/views/rate.vue b/packages/rate/demo/index.vue
similarity index 100%
rename from docs/demos/views/rate.vue
rename to packages/rate/demo/index.vue
diff --git a/docs/demos/views/search.vue b/packages/search/demo/index.vue
similarity index 100%
rename from docs/demos/views/search.vue
rename to packages/search/demo/index.vue
diff --git a/docs/demos/mock/sku.js b/packages/sku/demo/data.js
similarity index 100%
rename from docs/demos/mock/sku.js
rename to packages/sku/demo/data.js
diff --git a/docs/demos/views/sku.vue b/packages/sku/demo/index.vue
similarity index 99%
rename from docs/demos/views/sku.vue
rename to packages/sku/demo/index.vue
index 8810988a3..d3c307ab8 100644
--- a/docs/demos/views/sku.vue
+++ b/packages/sku/demo/index.vue
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import data from '../mock/sku';
+import data from './data';
 import { LIMIT_TYPE } from '../../../packages/sku/constants';
 
 export default {
diff --git a/docs/demos/views/slider.vue b/packages/slider/demo/index.vue
similarity index 100%
rename from docs/demos/views/slider.vue
rename to packages/slider/demo/index.vue
diff --git a/docs/demos/views/stepper.vue b/packages/stepper/demo/index.vue
similarity index 100%
rename from docs/demos/views/stepper.vue
rename to packages/stepper/demo/index.vue
diff --git a/docs/demos/views/steps.vue b/packages/steps/demo/index.vue
similarity index 100%
rename from docs/demos/views/steps.vue
rename to packages/steps/demo/index.vue
diff --git a/docs/demos/views/submit-bar.vue b/packages/submit-bar/demo/index.vue
similarity index 100%
rename from docs/demos/views/submit-bar.vue
rename to packages/submit-bar/demo/index.vue
diff --git a/docs/demos/views/swipe.vue b/packages/swipe/demo/index.vue
similarity index 100%
rename from docs/demos/views/swipe.vue
rename to packages/swipe/demo/index.vue
diff --git a/docs/demos/views/switch-cell.vue b/packages/switch-cell/demo/index.vue
similarity index 100%
rename from docs/demos/views/switch-cell.vue
rename to packages/switch-cell/demo/index.vue
diff --git a/docs/demos/views/switch.vue b/packages/switch/demo/index.vue
similarity index 100%
rename from docs/demos/views/switch.vue
rename to packages/switch/demo/index.vue
diff --git a/docs/demos/views/tab.vue b/packages/tab/demo/index.vue
similarity index 100%
rename from docs/demos/views/tab.vue
rename to packages/tab/demo/index.vue
diff --git a/docs/demos/views/tabbar.vue b/packages/tabbar/demo/index.vue
similarity index 100%
rename from docs/demos/views/tabbar.vue
rename to packages/tabbar/demo/index.vue
diff --git a/docs/demos/views/tag.vue b/packages/tag/demo/index.vue
similarity index 100%
rename from docs/demos/views/tag.vue
rename to packages/tag/demo/index.vue
diff --git a/docs/demos/views/toast.vue b/packages/toast/demo/index.vue
similarity index 100%
rename from docs/demos/views/toast.vue
rename to packages/toast/demo/index.vue
diff --git a/docs/demos/views/tree-select.vue b/packages/tree-select/demo/index.vue
similarity index 100%
rename from docs/demos/views/tree-select.vue
rename to packages/tree-select/demo/index.vue
diff --git a/docs/demos/views/uploader.vue b/packages/uploader/demo/index.vue
similarity index 100%
rename from docs/demos/views/uploader.vue
rename to packages/uploader/demo/index.vue
diff --git a/docs/demos/views/built-in-style.vue b/packages/vant-css/demo/index.vue
similarity index 98%
rename from docs/demos/views/built-in-style.vue
rename to packages/vant-css/demo/index.vue
index 1c1a6a670..65b80a8ae 100644
--- a/docs/demos/views/built-in-style.vue
+++ b/packages/vant-css/demo/index.vue
@@ -51,7 +51,7 @@ export default {
 </script>
 
 <style lang="postcss">
-.demo-built-in-style {
+.demo-vant-css {
   .van-ellipsis {
     font-size: 13px;
     margin-left: 15px;
diff --git a/docs/demos/views/waterfall.vue b/packages/waterfall/demo/index.vue
similarity index 100%
rename from docs/demos/views/waterfall.vue
rename to packages/waterfall/demo/index.vue
diff --git a/test/demo-test.js b/test/demo-test.js
index 026ce116f..46459e179 100644
--- a/test/demo-test.js
+++ b/test/demo-test.js
@@ -1,5 +1,5 @@
 import { renderToString } from '@vue/server-test-utils';
-import '../docs/demos/common';
+import '../docs/src/demo-common';
 import { Locale } from '../packages';
 import { camelize } from '../packages/utils';
 import Vue from 'vue';
@@ -15,7 +15,7 @@ export default function(component) {
   const name = typeof component === 'string' ? component : component.name.replace('van-', '');
 
   test(`renders ${name} correctly`, () => {
-    const demo = require(`../docs/demos/views/${name}.vue`).default;
+    const demo = require(`../packages/${name}/demo`).default;
     const { i18n } = demo;
     demo.name = 'demo-' + name;