使用 vue-tour 引导用户浏览 Vue.js 应用程序

开发Web应用程序是困难的。有这么多事情要考虑的。方式,方式,是太多。很容易被细节抓住,忘记一个重要的小事:用户如何知道如何使用您的应用程序一旦完成?最简单的方法是添加一个小型旅游指南组件,它会出现并解释每个步骤。除了这些,你很难实现自己。幸运的是,如果你使用Vue.js, vue-tour已经覆盖了你。

依赖性

如果您尚未设置项目,请继续使用 vue-cli 3.0 beta启动项目,并且默认选项 $ vue create my-new-project 和点击 enter 两次就足够了。

然后,你会想从 npm 安装vue-tour:

1$ npm install vue-tour
2
3# or with Yarn:
4$ yarn add vue-tour

设立

启用插件并加载CSS...

 1[label main.js]
 2import Vue from 'vue';
 3import App from './App.vue';
 4import VueTour from 'vue-tour';
 5// You could use your own fancy-schmancy custom styles.
 6// We'll use the defaults here because we're lazy.
 7import 'vue-tour/dist/vue-tour.css';
 8
 9Vue.use(VueTour);
10
11new Vue({
12  el: '#app',
13  render: h => h(App)
14});

使用

现在所有的形式都没有完成,这里是关于如何工作的Vue-tour的四步指南。

步骤 1. 将您的步骤定义为您组件的数据属性(或其他任何地方)中的一个对象组合,每一个包含一个目标属性,这是您上面修改的相关元素的CSS选择器。添加一个内容属性,包含您想要的该步骤的文本
步骤 3. 添加一个<vue-tour name="whateverMyTourNameIs :steps="mySteps">`组件在您的应用程序中某个地方 步骤 4. Runthis.$tours[whateverMyTourName'Is'].()开始在您的山顶上,或者当您想要开始旅游到MBR1_K)

完成了!这对你来说有点快吗?这里又是代码形式的指南:

 1[label App.vue]
 2<template>
 3  <div id="app">
 4    <!-- Note the data-tour-step property hiding in plain sight. -->
 5    <button data-tour-step="1">Complicated Button</button>
 6    <a data-tour-step="2" href="https://alligator.io">Confounding Link</a>
 7    <h1 data-tour-step="3">Perplexing Header Element</h1>
 8    <p>Self describing paragraph. It needs no tour step. Really.</p>
 9
10    <!-- The helpful tour guide that will make all things clear. -->
11    <vue-tour name="explanatoryTour" :steps="steps"></vue-tour>
12  </div>
13</template>
14
15<script>
16export default {
17  data () {
18    return {
19      steps: [
20        {
21          // I prefer using data attributes, but you can use
22          // classes, ids, or whatever else you want!
23          // (So long as document.querySelector() likes it.)
24          target: '[data-tour-step="1"]',
25          content: `This button doesn't actually do anything.`
26        },
27        {
28          target: '[data-tour-step="2"]',
29          // You can even use HTML!
30          content: `This link will take you to <a href="https://alligator.io">https://alligator.io</a>!`
31        },
32        {
33          target: '[data-tour-step="3"]',
34          content: `This is a header element. It's big. Not much else to say about it.`,
35          params: {
36            // You can control the position of the tour popup easily.
37            placement: 'bottom'
38          }
39        }
40      ]
41    }
42  },
43
44  mounted () {
45    // TODO: Hide me after the first visit so returning users don't get annoyed!
46    this.$tours['explanatoryTour'].start();
47  }
48}
49</script>

如果你想改變這個模板,你也可以這樣做(LINK0)。

所以做你的用户(和你自己!)一个好处. 使用vue-tour来澄清你所设计的伟大而美妙的应用程序的使用。