add site

examples/demo.js

@@ -0,0 +1,18 @@
+export { default as avatar } from 'antd/avatar/demo/index.vue'
+export { default as badge } from 'antd/badge/demo/index.vue'
+export { default as breadcrumb } from 'antd/breadcrumb/demo/index.vue'
+export { default as button } from 'antd/button/demo/index.vue'
+export { default as card } from 'antd/card/demo/index.vue'
+export { default as checkbox } from 'antd/checkbox/demo/index.vue'
+export { default as grid } from 'antd/grid/demo/index.vue'
+export { default as input } from 'antd/input/demo/index.vue'
+export { default as menu } from 'antd/menu/demo/index.vue'
+export { default as pagination } from 'antd/pagination/demo/index.vue'
+export { default as popconfirm } from 'antd/popconfirm/demo/index.vue'
+export { default as popover } from 'antd/popover/demo/index.vue'
+export { default as radio } from 'antd/radio/demo/index.vue'
+export { default as rate } from 'antd/rate/demo/index.vue'
+export { default as tabs } from 'antd/tabs/demo/index.vue'
+export { default as tag } from 'antd/tag/demo/index.vue'
+export { default as tooltip } from 'antd/tooltip/demo/index.vue'
+

examples/demo.vue

@@ -1,22 +1,28 @@
-<template>
-<div>
-<Components/>
-</div>
-</template>
 <script>
 import { Menu } from 'antd'
+import * as AllDemo from './demo'
+const MenuItem = Menu.Item
 export default {
   data () {
     console.log('routes', this.$route.params)
     return {}
   },
-  components: {
+  render () {
-    Menu,
+    const { name, demo } = this.$route.params // eslint-disable-line
-    'Components': () => {
+    const Demo = AllDemo[name]
-      console.log(this.$route)
+    return (
-      const { name, demo } = this.$route.params
+      <div class='site'>
-      return import(`../components/${name}/demo/index.vue`)
+        <Menu class='nav' selectedKeys={[name]}>
-    },
+          {Object.keys(AllDemo).map(d => <MenuItem key={d}>
+            <router-link to={{ path: `/components/${d}` }}>{d}</router-link>
+          </MenuItem>)}
+        </Menu>
+        <div class='content'>
+          {Demo ? <Demo /> : '正在紧急开发中...'}
+        </div>
+
+      </div>
+    )
   },
 }
 </script>

examples/index.less

@@ -1,3 +1,12 @@
 #app {
-  padding: 50px;
+}
+.site{
+  display: flex;
+  .nav{
+    width: 200px;
+  }
+  .content{
+    flex: 1;
+    padding: 20px;
+  }
 }

examples/routes.js

@@ -1,13 +1,11 @@
-import Demo from './demo'
+import Demo from './demo.vue'
 const AsyncComp = () => {
-  const pathnameArr = window.location.pathname.split('/')
-    const com = pathnameArr[1] || 'button' // eslint-disable-line
-  const demo = pathnameArr[2] || 'index'
   return {
-    component: import(`../components/card/demo/${demo}.vue`),
+    component: import(`../components/card/demo/basic.vue`),
   }
 }
 export default [
   { path: '/components/:name/:demo?', component: Demo },
-  // { path: '/*', component: AsyncComp },
+  { path: 'test/:name/:demo', component: AsyncComp },
+  { path: '/*', redirect: '/components/menu' },
 ]