init

package.json

@@ -29,6 +29,7 @@
     "axios": "0.17.1",
     "clipboard": "1.7.1",
     "codemirror": "5.32.0",
+    "driver.js": "0.5.2",
     "dropzone": "5.2.0",
     "echarts": "3.8.5",
     "element-ui": "2.3.2",

src/icons/svg/guide.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1526033837694" class="icon" style="" viewBox="0 0 1117 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10274" xmlns:xlink="http://www.w3.org/1999/xlink" width="218.1640625" height="200"><defs><style type="text/css"></style></defs><path d="M53.865 558.08l289.92 121.6 560-492.16-491.52 530.56 371.84 140.8c8.96 3.2 19.2-1.28 22.4-10.24V848l260.48-816.64-1014.4 494.72c-8.96 4.48-12.16 14.72-8.32 23.68 2.56 3.84 5.76 7.04 9.6 8.32z m357.76 434.56l144.64-155.52-144.64-58.88v214.4z" p-id="10275"></path></svg>

src/lang/en.js

@@ -3,6 +3,7 @@ export default {
     dashboard: 'Dashboard',
     introduction: 'Introduction',
     documentation: 'Documentation',
+    guide: 'Guide',
     permission: 'Permission',
     pagePermission: 'Page Permission',
     directivePermission: 'Directive Permission',

src/lang/zh.js

@@ -3,6 +3,7 @@ export default {
     dashboard: '首页',
     introduction: '简述',
     documentation: '文档',
+    guide: '引导页',
     permission: '权限测试页',
     pagePermission: '页面权限',
     directivePermission: '指令权限',

src/router/index.js

@@ -53,6 +53,17 @@ export const constantRouterMap = [
       name: 'documentation',
       meta: { title: 'documentation', icon: 'documentation', noCache: true }
     }]
+  },
+  {
+    path: '/guide',
+    component: Layout,
+    redirect: '/guide/index',
+    children: [{
+      path: 'index',
+      component: _import('guide/index'),
+      name: 'guide',
+      meta: { title: 'guide', icon: 'guide', noCache: true }
+    }]
   }
 ]
 

src/views/guide/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="app-container documentation-container">
+    <el-button type="primary" @click.prevent.stop="guide">Show Guide</el-button>
+  </div>
+</template>
+<script>
+
+import * as Driver from 'driver.js'
+import 'driver.js/dist/driver.min.css'
+
+export default {
+  name: 'guide',
+  components: { },
+  mounted() {
+    this.driver = new Driver()
+  },
+  data() {
+    return {
+      driver: null
+    }
+  },
+  methods: {
+    guide() {
+      this.driver.defineSteps([
+        {
+          element: '.screenfull',
+          popover: {
+            title: 'Screenfull',
+            description: 'Body of the popover',
+            position: 'left'
+          }
+        },
+        {
+          element: '.international-icon',
+          popover: {
+            title: 'Lang Switch',
+            description: 'Body of the popover',
+            position: 'left'
+          }
+        },
+
+        {
+          element: '.theme-switch',
+          popover: {
+            title: 'Theme Switch',
+            description: 'Body of the popover',
+            position: 'left'
+          }
+        }
+      ])
+      this.driver.start()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.documentation-container {
+  margin: 50px;
+  .document-btn {
+    float: left;
+    margin-left: 50px;
+    vertical-align: middle;
+    display: block;
+    cursor: pointer;
+    background: black;
+    color: white;
+    height: 60px;
+    width: 200px;
+    line-height: 60px;
+    font-size: 20px;
+    text-align: center;
+  }
+}
+</style>