vue-tourを使用してVue.jsアプリを介してユーザーをガイドする

getdocs

2年前

Webアプリの開発は難しいです。考えるべきことがたくさんあります。ちなみに、わぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁ詳細にとらわれて、重要な小さなことを忘れるのは簡単です。ユーザーは、アプリが完成したら、アプリを使用する方法をどのように知るのでしょうか。最も簡単な方法は、ポップアップして各ステップを説明する小さなツアーガイドコンポーネントを追加することです。それらを除いて、自分で実装するのはちょっと難しいです。ありがたいことに、Vue.jsを使用している場合は、vue-tourで対応できます。これは、ツアーガイドの作成を可能な限り簡単にする非常にシンプルなライブラリです。

依存関係

プロジェクトをまだ設定していない場合は、 vue-cli 3.0betaとデフォルトのオプションを使用してプロジェクトを開始してください。 $ vue create my-new-project Enterキーを数回押すだけで十分です。

次に、インストールする必要があります vue-tour npmから：

$ npm install vue-tour

# or with Yarn:
$ yarn add vue-tour

設定

プラグインを有効にしてCSSをロードします…

main.js

import Vue from 'vue';
import App from './App.vue';
import VueTour from 'vue-tour';
// You could use your own fancy-schmancy custom styles.
// We'll use the defaults here because we're lazy.
import 'vue-tour/dist/vue-tour.css';

Vue.use(VueTour);

new Vue({
  el: '#app',
  render: h => h(App)
});

使用法

すべての手続きが邪魔になったので、ここに方法に関する4つのステップのガイドがあります vue-tour 動作します。

ステップ1.ツアーステップで対象とする要素に一意のクラスまたはプロパティを追加します。
ステップ2.ステップを、コンポーネントのデータプロパティ（またはその他の場所）のオブジェクトの配列として定義します。各オブジェクトには、 target 上で変更した関連要素のCSSセレクターであるプロパティ。追加する content 隣のプロパティ target そのステップに含めるテキストが含まれています。
ステップ3.を追加します <vue-tour name="whateverMyTourNameIs" :steps="mySteps"></vue-tour> アプリのどこかにあるコンポーネント。
ステップ4.実行 this.$tours['whateverMyTourNameIs'].start() マウントされたフックで、またはツアーを開始したいときはいつでも。

終わり！それはあなたにとって少し速かったですか？これがコード形式のガイドです。

App.vue

<template>
  <div id="app">
    <!-- Note the data-tour-step property hiding in plain sight. -->
    <button data-tour-step="1">Complicated Button</button>
    <a data-tour-step="2" href="https://alligator.io">Confounding Link</a>
    <h1 data-tour-step="3">Perplexing Header Element</h1>
    <p>Self describing paragraph. It needs no tour step. Really.</p>

    <!-- The helpful tour guide that will make all things clear. -->
    <vue-tour name="explanatoryTour" :steps="steps"></vue-tour>
  </div>
</template>

<script>
export default {
  data () {
    return {
      steps: [
        {
          // I prefer using data attributes, but you can use
          // classes, ids, or whatever else you want!
          // (So long as document.querySelector() likes it.)
          target: '[data-tour-step="1"]',
          content: `This button doesn't actually do anything.`
        },
        {
          target: '[data-tour-step="2"]',
          // You can even use HTML!
          content: `This link will take you to <a href="https://alligator.io">https://alligator.io</a>!`
        },
        {
          target: '[data-tour-step="3"]',
          content: `This is a header element. It's big. Not much else to say about it.`,
          params: {
            // You can control the position of the tour popup easily.
            placement: 'bottom'
          }
        }
      ]
    }
  },

  mounted () {
    // TODO: Hide me after the first visit so returning users don't get annoyed!
    this.$tours['explanatoryTour'].start();
  }
}
</script>

ああ、ポップアップテンプレートを変更したい場合は、それも可能です。

だからあなたのユーザー（そしてあなた自身！）に好意を持ってください。使用する vue-tour あなたが思いついた素晴らしい素晴らしいアプリの使い方を明確にするために。