'init'

src/views/guide/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="app-container">
+    <aside>
+      {{ 'guide.description' | i18nFilter }}
+      <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
+    </aside>
+    <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
+      {{ 'guide.button' | i18nFilter }}
+    </el-button>
+  </div>
+</template>
+
+<script>
+import Driver from 'driver.js' // import driver.js
+import 'driver.js/dist/driver.min.css' // import driver.js css
+import steps from './steps'
+
+export default {
+  name: 'Guide',
+  data() {
+    return {
+      driver: null
+    }
+  },
+  mounted() {
+    this.driver = new Driver()
+  },
+  methods: {
+    guide() {
+      this.driver.defineSteps(steps)
+      this.driver.start()
+    }
+  }
+}
+</script>

src/views/guide/steps.js

@@ -0,0 +1,53 @@
+const steps = [
+  {
+    element: '#hamburger-container',
+    popover: {
+      title: 'Hamburger',
+      description: 'Open && Close sidebar',
+      position: 'bottom'
+    }
+  },
+  {
+    element: '#breadcrumb-container',
+    popover: {
+      title: 'Breadcrumb',
+      description: 'Indicate the current page location',
+      position: 'bottom'
+    }
+  },
+  {
+    element: '#header-search',
+    popover: {
+      title: 'Page Search',
+      description: 'Page search, quick navigation',
+      position: 'left'
+    }
+  },
+  {
+    element: '#screenfull',
+    popover: {
+      title: 'Screenfull',
+      description: 'Set the page into fullscreen',
+      position: 'left'
+    }
+  },
+  {
+    element: '#size-select',
+    popover: {
+      title: 'Switch Size',
+      description: 'Switch the system size',
+      position: 'left'
+    }
+  },
+  {
+    element: '#tags-view-container',
+    popover: {
+      title: 'Tags view',
+      description: 'The history of the page you visited',
+      position: 'bottom'
+    },
+    padding: 0
+  }
+]
+
+export default steps