Vue-tourを使用してVue.jsアプリを介してユーザーをガイドする
提供:Dev Guides
Webアプリの開発は難しいです。 考えるべきことがたくさんあります。 ちなみに、わぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁ 詳細にとらわれて、重要な小さなことを忘れるのは簡単です。ユーザーは、アプリが完成したら、アプリを使用する方法をどのように知るのでしょうか。 最も簡単な方法は、ポップアップして各ステップを説明する小さなツアーガイドコンポーネントを追加することです。 それらを除いて、自分で実装するのはちょっと難しいです。 ありがたいことに、Vue.jsを使用している場合は、vue-tourで対応できます。 これは、ツアーガイドの作成を可能な限り簡単にする非常にシンプルなライブラリです。
依存関係
プロジェクトをまだ設定していない場合は、 vue-cli 3.0betaとデフォルトのオプションを使用してプロジェクトを開始してください。 $ vue create my-new-project
とEnterキーを数回押すだけで十分です。
次に、npmからvue-tour
をインストールします。
$ 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) });
使用法
すべての手続きが邪魔になったので、vue-tour
がどのように機能するかについての4つのステップのガイドを次に示します。
- ステップ1.ツアーステップで対象とする要素に一意のクラスまたはプロパティを追加します。
- ステップ2.コンポーネントのデータプロパティ(またはその他の場所)のオブジェクトの配列としてステップを定義します。各オブジェクトには、上記で変更した関連要素のCSSセレクターである
target
プロパティが含まれます。 。target
の横にcontent
プロパティを追加します。このプロパティには、そのステップに含めるテキストが含まれています。 - ステップ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
を使用して、思いついたすばらしいアプリの使用法を明確にします。