some modify

src/views/demo/borderBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="border-box-demo">
+  <div id="border-box">
     <border-box-1 class="border-box-item">
       border-box-1
     </border-box-1>
@@ -39,12 +39,12 @@
 
 <script>
 export default {
-  name: 'BorderBoxDemo'
+  name: 'BorderBox'
 }
 </script>
 
 <style lang="less">
-#border-box-demo {
+#border-box {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

src/views/demo/chart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="chart-demo">
+  <div id="chart">
     <border-box-4 class="chart-item">
       <capsule-chart :data="capsuleChartData" class="chart" />
 
@@ -278,7 +278,7 @@ color: ['#00baff', '#3de7c9', '#ffc53d', '#342432']
 
 <script>
 export default {
-  name: 'ChartDemo',
+  name: 'Chart',
   data () {
     return {
       capsuleChartData: {
@@ -599,7 +599,7 @@ export default {
 </script>
 
 <style lang="less">
-#chart-demo {
+#chart {
   display: flex;
   flex-direction: column;
 

src/views/demo/decoration.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="decoration-demo">
+  <div id="decoration">
     <border-box-6 class="decoration-container">
       <decoration-1 class="decoration d1 center" />
       decoration-1
@@ -44,7 +44,7 @@ export default {
 </script>
 
 <style lang="less">
-#decoration-demo {
+#decoration {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

src/views/demo/document.vue

@@ -0,0 +1,35 @@
+<template>
+  <div id="datav-document">
+    <div class="document">
+      将src下的components及plugins复制至你的项目内
+      并在main.js中引入他们即可使用
+
+      <highlight-code>
+import datavComponents from './components/index.js'
+import datavPlugins from './plugin/index.js'
+
+Vue.use(datavComponents)
+Vue.use(datavPlugins)
+      </highlight-code>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DatavDocument'
+}
+</script>
+
+<style lang="less">
+#datav-document {
+  font-size: 15px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  .document {
+    width: 800px;
+  }
+}
+</style>

src/views/demo/index.vue

@@ -1,33 +1,49 @@
 <template>
   <div class="demo">
     <div class="menu-bar">
-      <div @click="status = 'borderBox'">Border-Box</div>
-      <div @click="status = 'decoration'">Decoration</div>
-      <div @click="status = 'chart'">Charts</div>
-      <div @click="status = 'other'">Other</div>
+      <div :class="`menu-item ${activeIndex === index && 'active'}`"
+        v-for="(item, index) in menuData"
+        :key="item.title"
+        @click="$router.push({ name: item.routerName }) & (activeIndex = index)">
+        {{ item.title }}
+      </div>
     </div>
 
-    <border-box-demo v-if="status === 'borderBox'" />
-    <decoration-demo v-if="status === 'decoration'" />
-    <chart-demo v-if="status === 'chart'" />
+    <div class="router-container">
+      <router-view />
+    </div>
   </div>
 </template>
 
 <script>
-import borderBoxDemo from './borderBoxDemo'
-import decorationDemo from './decorationDemo'
-import chartDemo from './chartDemo'
-
 export default {
   name: 'Demo',
-  components: {
-    borderBoxDemo,
-    decorationDemo,
-    chartDemo
-  },
   data () {
     return {
-      status: 'borderBox'
+      activeIndex: 0,
+
+      menuData: [
+        {
+          title: 'Document',
+          routerName: 'document'
+        },
+        {
+          title: 'Border-Box',
+          routerName: 'borderBox'
+        },
+        {
+          title: 'Decoration',
+          routerName: 'decoration'
+        },
+        {
+          title: 'Chart',
+          routerName: 'chart'
+        },
+        {
+          title: 'Table',
+          routerName: 'table'
+        }
+      ]
     }
   }
 }
@@ -37,30 +53,49 @@ export default {
 .demo {
   width: 100%;
   height: 100%;
+  background-image: url('../../assets/img/bg.png');
+  background-size: 100%;
+  color: #fff;
 
   .menu-bar {
-    height: 50px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-weight: bold;
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin: 10px 0px;
+  }
 
-    div {
-      width: 150px;
-      height: 100%;
-      text-align: center;
-      margin: 0px 20px;
-      line-height: 50px;
-      font-weight: bold;
-      box-sizing: border-box;
-      border: 2px solid #00baff;
-      cursor: pointer;
+  .active {
+    border-bottom: 3px solid #0084ff;
+  }
 
-      &:active {
-        color: #00baff;
-        border-color: #fff;
-      }
+  .menu-item {
+    width: 120px;
+    text-align: center;
+    margin: 0px 20px;
+    cursor: pointer;
+    z-index: 9;
+
+    &:hover {
+      border-bottom: 3px solid #0084ff;
     }
+
+    &:active {
+      color: #0084ff;
+    }
+  }
+
+  .router-container {
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+    padding-top: 70px;
   }
 }
 </style>

src/views/demo/table.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="table">
+    this is table
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Table'
+}
+</script>
+
+<style lang="less">
+#table {
+  width: 100%;
+  height: 100%;
+}
+</style>