diff --git a/build/genExamples.js b/build/genExamples.js
index 129dc1e0e..3152b4f4d 100644
--- a/build/genExamples.js
+++ b/build/genExamples.js
@@ -5,7 +5,7 @@ var path = require('path');
 var cheerio = require('cheerio');
 var chalk = require('chalk');
 var striptags = require('./strip-tags');
-var navs = require('../docs/nav.config.json');
+var navs = require('../docs/src/nav.config.js');
 navs = navs['zh-CN'];
 
 var parser = markdownIt('default', {
@@ -31,9 +31,9 @@ var renderVueTemplate = function (html, componentName) {
 
   var script = '';
   if (output.script) {
-    script = output.script.replace('<script>', '<script>\nimport Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);');
+    script = output.script.replace('<script>', '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);');
   } else {
-    script = '<script>\nimport Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>';
+    script = '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>';
   }
 
   result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentName}</h1>` + output['example-block'] + '</section></template>\n' +
diff --git a/build/webpack.config.js b/build/webpack.config.js
index d10a4eada..044d6c04d 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -35,8 +35,8 @@ function wrap(render) {
 module.exports = {
   entry: {
     'vendor': ['vue', 'vue-router'],
-    'zan-docs': './docs/index.js',
-    'zan-examples': './docs/examples.js'
+    'zan-docs': './docs/src/index.js',
+    'zan-examples': './docs/src/examples.js'
   },
   output: {
     path: path.join(__dirname, '../docs/dist'),
@@ -55,7 +55,7 @@ module.exports = {
       'src': path.join(__dirname, '../src'),
       'packages': path.join(__dirname, '../packages'),
       'lib': path.join(__dirname, '../lib'),
-      'components': path.join(__dirname, '../docs/components')
+      'components': path.join(__dirname, '../docs/src/components')
     }
   },
   module: {
@@ -150,13 +150,13 @@ module.exports = {
     }),
     new HtmlWebpackPlugin({
       chunks: ['vendor', 'zan-docs'],
-      template: 'docs/index.tpl',
+      template: 'docs/src/index.tpl',
       filename: 'index.html',
       inject: true
     }),
     new HtmlWebpackPlugin({
       chunks: ['vendor', 'zan-examples'],
-      template: 'docs/index.tpl',
+      template: 'docs/src/index.tpl',
       filename: 'examples.html',
       inject: true
     }),
diff --git a/docs/examples-dist/actionsheet.vue b/docs/examples-dist/actionsheet.vue
index 80300646d..8fe60d92a 100644
--- a/docs/examples-dist/actionsheet.vue
+++ b/docs/examples-dist/actionsheet.vue
@@ -43,7 +43,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 import MobileComputed from 'components/mobile-computed';
 
 export default {
diff --git a/docs/examples-dist/badge.vue b/docs/examples-dist/badge.vue
index 7e89ec325..9d0eba259 100644
--- a/docs/examples-dist/badge.vue
+++ b/docs/examples-dist/badge.vue
@@ -17,7 +17,7 @@
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
   export default {
     data() {
       return {
diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue
index ac25d94f9..2a3051d39 100644
--- a/docs/examples-dist/button.vue
+++ b/docs/examples-dist/button.vue
@@ -86,4 +86,4 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/card.vue b/docs/examples-dist/card.vue
index 7545736c2..df1e123ae 100644
--- a/docs/examples-dist/card.vue
+++ b/docs/examples-dist/card.vue
@@ -20,4 +20,4 @@
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/cell.vue b/docs/examples-dist/cell.vue
index 21497667a..7e3a8026b 100644
--- a/docs/examples-dist/cell.vue
+++ b/docs/examples-dist/cell.vue
@@ -36,7 +36,7 @@
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   methods: {
     handleClick() {
diff --git a/docs/examples-dist/checkbox.vue b/docs/examples-dist/checkbox.vue
index d784aee41..531edf027 100644
--- a/docs/examples-dist/checkbox.vue
+++ b/docs/examples-dist/checkbox.vue
@@ -56,7 +56,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/datetime-picker.vue b/docs/examples-dist/datetime-picker.vue
index 2ccbf84f4..9a0e2ced4 100644
--- a/docs/examples-dist/datetime-picker.vue
+++ b/docs/examples-dist/datetime-picker.vue
@@ -7,7 +7,7 @@
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/dialog.vue b/docs/examples-dist/dialog.vue
index d71062379..cc543fd0b 100644
--- a/docs/examples-dist/dialog.vue
+++ b/docs/examples-dist/dialog.vue
@@ -19,7 +19,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 import { Dialog } from 'src/index';
 import MobileComputed from 'components/mobile-computed';
 
diff --git a/docs/examples-dist/field.vue b/docs/examples-dist/field.vue
index 5a5e6fdeb..45aa9d939 100644
--- a/docs/examples-dist/field.vue
+++ b/docs/examples-dist/field.vue
@@ -41,7 +41,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue
index 6b1b711ea..dfe12daae 100644
--- a/docs/examples-dist/icon.vue
+++ b/docs/examples-dist/icon.vue
@@ -143,4 +143,4 @@
 } 
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/image-preview.vue b/docs/examples-dist/image-preview.vue
index 54daf52b4..37d71469b 100644
--- a/docs/examples-dist/image-preview.vue
+++ b/docs/examples-dist/image-preview.vue
@@ -14,7 +14,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 import { ImagePreview } from 'src/index';
 import MobileComputed from 'components/mobile-computed';
 
diff --git a/docs/examples-dist/layout.vue b/docs/examples-dist/layout.vue
index 20dab1011..2b5799282 100644
--- a/docs/examples-dist/layout.vue
+++ b/docs/examples-dist/layout.vue
@@ -68,4 +68,4 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/lazyload.vue b/docs/examples-dist/lazyload.vue
index f3bb7137d..637093324 100644
--- a/docs/examples-dist/lazyload.vue
+++ b/docs/examples-dist/lazyload.vue
@@ -46,7 +46,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/loading.vue b/docs/examples-dist/loading.vue
index 8f761de57..e2fc134ae 100644
--- a/docs/examples-dist/loading.vue
+++ b/docs/examples-dist/loading.vue
@@ -33,4 +33,4 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/panel.vue b/docs/examples-dist/panel.vue
index bdce2d348..aaca6e5a5 100644
--- a/docs/examples-dist/panel.vue
+++ b/docs/examples-dist/panel.vue
@@ -62,4 +62,4 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/picker.vue b/docs/examples-dist/picker.vue
index a99eaa6d4..5e33b9d9f 100644
--- a/docs/examples-dist/picker.vue
+++ b/docs/examples-dist/picker.vue
@@ -11,7 +11,7 @@
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 const citys = {
   '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
   '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
diff --git a/docs/examples-dist/popup.vue b/docs/examples-dist/popup.vue
index 3ee9101d7..6850c194f 100644
--- a/docs/examples-dist/popup.vue
+++ b/docs/examples-dist/popup.vue
@@ -73,7 +73,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 import MobileComputed from 'components/mobile-computed';
 import Dialog from 'packages/dialog';
 
diff --git a/docs/examples-dist/progress.vue b/docs/examples-dist/progress.vue
index 4d1a8b88c..a98a61dff 100644
--- a/docs/examples-dist/progress.vue
+++ b/docs/examples-dist/progress.vue
@@ -43,4 +43,4 @@
   } 
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/quantity.vue b/docs/examples-dist/quantity.vue
index 6e9cd6075..939fa032b 100644
--- a/docs/examples-dist/quantity.vue
+++ b/docs/examples-dist/quantity.vue
@@ -24,7 +24,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/radio.vue b/docs/examples-dist/radio.vue
index c6e78c9b1..cb9c96633 100644
--- a/docs/examples-dist/radio.vue
+++ b/docs/examples-dist/radio.vue
@@ -49,7 +49,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue
index 725fa0555..0a53909e3 100644
--- a/docs/examples-dist/search.vue
+++ b/docs/examples-dist/search.vue
@@ -11,7 +11,7 @@
               </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   methods: {
     goSearch(value) {
diff --git a/docs/examples-dist/steps.vue b/docs/examples-dist/steps.vue
index 7d18a79e1..110976069 100644
--- a/docs/examples-dist/steps.vue
+++ b/docs/examples-dist/steps.vue
@@ -33,7 +33,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/swipe.vue b/docs/examples-dist/swipe.vue
index 19c17c2aa..79e12508b 100644
--- a/docs/examples-dist/swipe.vue
+++ b/docs/examples-dist/swipe.vue
@@ -31,7 +31,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
index 0047ad4e9..cb89d3c1d 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -45,7 +45,7 @@
   }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 import Dialog from 'packages/dialog';
 
 export default {
diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue
index abf38569f..ab3ce0697 100644
--- a/docs/examples-dist/tab.vue
+++ b/docs/examples-dist/tab.vue
@@ -98,7 +98,7 @@
   }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/examples-dist/tag.vue b/docs/examples-dist/tag.vue
index 4f9b86bc6..d8d23cb0c 100644
--- a/docs/examples-dist/tag.vue
+++ b/docs/examples-dist/tag.vue
@@ -37,4 +37,4 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
diff --git a/docs/examples-dist/toast.vue b/docs/examples-dist/toast.vue
index e158fb670..405b649bc 100644
--- a/docs/examples-dist/toast.vue
+++ b/docs/examples-dist/toast.vue
@@ -30,7 +30,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 import { Toast } from 'src/index';
 
 export default {
diff --git a/docs/examples-dist/uploader.vue b/docs/examples-dist/uploader.vue
index 86256ec17..76221e4c2 100644
--- a/docs/examples-dist/uploader.vue
+++ b/docs/examples-dist/uploader.vue
@@ -18,7 +18,7 @@
 }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   methods: {
     logContent(file) {
diff --git a/docs/examples-dist/waterfall.vue b/docs/examples-dist/waterfall.vue
index c2906c7c0..204e79aa3 100644
--- a/docs/examples-dist/waterfall.vue
+++ b/docs/examples-dist/waterfall.vue
@@ -18,7 +18,7 @@
   }
 </style>
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
 export default {
   data() {
     return {
diff --git a/docs/ExamplesApp.vue b/docs/src/ExamplesApp.vue
similarity index 100%
rename from docs/ExamplesApp.vue
rename to docs/src/ExamplesApp.vue
diff --git a/docs/ExamplesDocsApp.vue b/docs/src/ExamplesDocsApp.vue
similarity index 52%
rename from docs/ExamplesDocsApp.vue
rename to docs/src/ExamplesDocsApp.vue
index 8f62fd33f..dddd59aba 100644
--- a/docs/ExamplesDocsApp.vue
+++ b/docs/src/ExamplesDocsApp.vue
@@ -15,8 +15,20 @@
 </template>
 
 <script>
+import Vue from 'vue';
 import 'highlight.js/styles/color-brewer.css';
-import navConfig from './nav.config.json';
+import navConfig from './nav.config.js';
+import SideNav from './components/side-nav';
+import DemoBlock from './components/demo-block';
+import FooterNav from './components/footer-nav';
+import PageHeader from './components/page-header';
+import PageFooter from './components/page-footer';
+
+Vue.component('side-nav', SideNav);
+Vue.component('demo-block', DemoBlock);
+Vue.component('footer-nav', FooterNav);
+Vue.component('page-header', PageHeader);
+Vue.component('page-footer', PageFooter);
 
 export default {
   data() {
@@ -28,5 +40,5 @@ export default {
 </script>
 
 <style lang="css">
-  @import './assets/docs.css';
+  @import '../assets/docs.css';
 </style>
diff --git a/docs/components/demo-block.vue b/docs/src/components/demo-block.vue
similarity index 100%
rename from docs/components/demo-block.vue
rename to docs/src/components/demo-block.vue
diff --git a/docs/components/demo-list.vue b/docs/src/components/demo-list.vue
similarity index 96%
rename from docs/components/demo-list.vue
rename to docs/src/components/demo-list.vue
index 46b148166..3369229e4 100644
--- a/docs/components/demo-list.vue
+++ b/docs/src/components/demo-list.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import navConfig from '../nav.config.json';
+import navConfig from '../nav.config.js';
 import MobileNav from './mobile-nav';
 
 export default {
diff --git a/docs/components/example-block.vue b/docs/src/components/example-block.vue
similarity index 100%
rename from docs/components/example-block.vue
rename to docs/src/components/example-block.vue
diff --git a/docs/components/footer-nav.vue b/docs/src/components/footer-nav.vue
similarity index 98%
rename from docs/components/footer-nav.vue
rename to docs/src/components/footer-nav.vue
index dec1cd707..cdfcbdad7 100644
--- a/docs/components/footer-nav.vue
+++ b/docs/src/components/footer-nav.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import navConfig from '../nav.config.json';
+import navConfig from '../nav.config.js';
 
 export default {
   data() {
diff --git a/docs/components/mobile-computed.js b/docs/src/components/mobile-computed.js
similarity index 86%
rename from docs/components/mobile-computed.js
rename to docs/src/components/mobile-computed.js
index e052c93bb..fa478aa69 100644
--- a/docs/components/mobile-computed.js
+++ b/docs/src/components/mobile-computed.js
@@ -1,4 +1,4 @@
-import MobilePopup from 'components/mobile-popup.vue';
+import MobilePopup from './mobile-popup.vue';
 
 export default {
   components: {
diff --git a/docs/components/mobile-nav.vue b/docs/src/components/mobile-nav.vue
similarity index 100%
rename from docs/components/mobile-nav.vue
rename to docs/src/components/mobile-nav.vue
diff --git a/docs/components/mobile-popup.vue b/docs/src/components/mobile-popup.vue
similarity index 100%
rename from docs/components/mobile-popup.vue
rename to docs/src/components/mobile-popup.vue
diff --git a/docs/components/page-footer.vue b/docs/src/components/page-footer.vue
similarity index 100%
rename from docs/components/page-footer.vue
rename to docs/src/components/page-footer.vue
diff --git a/docs/components/page-header.vue b/docs/src/components/page-header.vue
similarity index 93%
rename from docs/components/page-header.vue
rename to docs/src/components/page-header.vue
index e6aac4797..4d333391d 100644
--- a/docs/components/page-header.vue
+++ b/docs/src/components/page-header.vue
@@ -25,7 +25,7 @@
         <a href="http://zanui.qima-inc.com/captain" class="page-header__link">业务组件</a>
       </li>
       <li class="page-header__item">
-        <span class="page-header__link">V1.0</span>
+        <span class="page-header__link">V{{ version }}</span>
       </li>
       <li class="page-header__item">
         <a href="#" class="page-header__github" target="_blank"></a>
@@ -34,6 +34,16 @@
   </div>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      version: window._global.version
+    };
+  }
+};
+</script>
+
 <style>
 @component-namespace page {
   @b header {
diff --git a/docs/components/side-nav.vue b/docs/src/components/side-nav.vue
similarity index 100%
rename from docs/components/side-nav.vue
rename to docs/src/components/side-nav.vue
diff --git a/docs/examples.js b/docs/src/examples.js
similarity index 96%
rename from docs/examples.js
rename to docs/src/examples.js
index 8d6ac10af..ed1702c74 100644
--- a/docs/examples.js
+++ b/docs/src/examples.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesApp';
-import navConfig from './nav.config.json';
+import navConfig from './nav.config.js';
 import routes from './router.config';
 import ZanUI from '../src/index';
 
diff --git a/docs/index.js b/docs/src/index.js
similarity index 86%
rename from docs/index.js
rename to docs/src/index.js
index d24dc7e21..14a0c2035 100644
--- a/docs/index.js
+++ b/docs/src/index.js
@@ -1,14 +1,15 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesDocsApp';
-import navConfig from './nav.config.json';
+import navConfig from './nav.config.js';
 import routes from './router.config';
-import SideNav from './components/side-nav';
-import DemoBlock from './components/demo-block';
-import FooterNav from './components/footer-nav';
-import PageHeader from './components/page-header';
-import PageFooter from './components/page-footer';
 import ZanUI from 'src/index.js';
+import packagesJson from 'zanui/package.json';
+
+const global = {
+  version: packagesJson.version
+};
+window._global = global;
 
 import 'packages/zanui-css/src/index.css';
 
@@ -23,11 +24,7 @@ Vue.use(ZanUI);
 Vue.use(ZanUI.Lazyload, {
   lazyComponent: true
 });
-Vue.component('side-nav', SideNav);
-Vue.component('demo-block', DemoBlock);
-Vue.component('footer-nav', FooterNav);
-Vue.component('page-header', PageHeader);
-Vue.component('page-footer', PageFooter);
+
 
 let routesConfig = routes(navConfig);
 routesConfig.push({
diff --git a/docs/index.tpl b/docs/src/index.tpl
similarity index 100%
rename from docs/index.tpl
rename to docs/src/index.tpl
diff --git a/docs/nav.config.json b/docs/src/nav.config.js
similarity index 99%
rename from docs/nav.config.json
rename to docs/src/nav.config.js
index 8aae361f9..133eddd40 100644
--- a/docs/nav.config.json
+++ b/docs/src/nav.config.js
@@ -1,4 +1,4 @@
-{
+module.exports = {
   "zh-CN": [
     {
       "name": "开发指南",
diff --git a/docs/router.config.js b/docs/src/router.config.js
similarity index 87%
rename from docs/router.config.js
rename to docs/src/router.config.js
index 308eaf7e1..77c2502e9 100644
--- a/docs/router.config.js
+++ b/docs/src/router.config.js
@@ -23,8 +23,8 @@ const registerRoute = (navConfig, isExample) => {
 
   function addRoute(page) {
     const component = isExample
-      ? require(`./examples-dist${page.path}.vue`)
-      : require(`./examples-docs${page.path}.md`);
+      ? require(`../examples-dist${page.path}.vue`)
+      : require(`../examples-docs${page.path}.md`);
     route.push({
       path: '/component' + page.path,
       component: component.default || component