[Improvement] Reorganize demos (#1052)

.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)
-
 
 ## 组件文档如何编写
 

.github/MARKDOWN.md

@@ -2,7 +2,7 @@
 
 #### 文件格式
 
-组件文档采用 markdown 格式，和普通 markdown 最大的区别是示例代码是直接写在 markdown 文件里面，所以请确保你写的示例代码是可以正确运行的。
+组件文档采用 markdown 格式编写
 
 #### 文档内的标题规范
 
@@ -40,4 +40,3 @@
 
 - 从简单用法开始介绍，不要上来就同时使用一大堆 API，会让人觉得难以上手
 - 正交性原则，一个示例只演示一个（或者一类）API 的使用方法，如无特殊需求不要在一个示例中同时演示多个 API 混合使用
-- 如果示例的一句话描述无法完整描述整个场景，可以在 `:::demo` 之前写一段详细的说明性文字

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

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() {

docs/demos/index.js

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

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.

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

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)
 
 #### 点击完成时返回的数据格式
 

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': {

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

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'
               },
               {

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

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: {

packages/area/demo/area-en.js

@@ -68,4 +68,4 @@ export default {
     '810307': 'Tsuen Wan',
     '810309': 'Lantau Island'
   }
-}
+};

packages/area/demo/area.js

@@ -3603,4 +3603,4 @@ export default {
     '820101': '澳门半岛',
     '820201': '离岛'
   }
-}
+};

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: {

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

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">

packages/col/test/index.spec.js

@@ -1,3 +1,4 @@
+import Col from '..';
 import demoTest from '../../../test/demo-test';
 
-demoTest('layout');
+demoTest(Col);

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

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">

packages/contact-card/test/index.spec.js

@@ -1,3 +1,4 @@
+import ContactCard from '../';
 import demoTest from '../../../test/demo-test';
 
-demoTest('contact');
+demoTest(ContactCard);

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

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">

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

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 {

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;

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;