docs

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

build/webpack.config.js

@@ -35,8 +35,8 @@ function wrap(render) {
 module.exports = {
   entry: {
     'vendor': ['vue', 'vue-router'],
-    'zan-docs': './docs/index.js',
+    'zan-docs': './docs/src/index.js',
-    'zan-examples': './docs/examples.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
     }),

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 {

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 {

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>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>

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>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>

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

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 {

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 {

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

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 {

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>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>

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

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>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>

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 {

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>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>

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>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>

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 = {
   '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
   '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],

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

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>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>

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 {

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 {

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

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 {

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 {

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 {

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 {

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>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>

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 {

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

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 {

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>

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 {

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

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

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 {

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

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

docs/src/nav.config.js

@@ -1,4 +1,4 @@
-{
+module.exports = {
   "zh-CN": [
     {
       "name": "开发指南",

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-dist${page.path}.vue`)
-      : require(`./examples-docs${page.path}.md`);
+      : require(`../examples-docs${page.path}.md`);
     route.push({
       path: '/component' + page.path,
       component: component.default || component