vue-tour快速入门：VUE项目中如何使用vue-tour新手引导指引插件？怎样使用？包含具体实例

最新推荐文章于 2025-03-27 12:57:33 发布

南北极之间

最新推荐文章于 2025-03-27 12:57:33 发布

阅读量6.1k

点赞数 3

分类专栏：前端开发前端进阶文章标签： vue.js 前端 vue-tour 新手指引插件新手指导插件

本文链接：https://blog.csdn.net/qq_22182989/article/details/125412262

版权

前端开发同时被 2 个专栏收录

601 篇文章

订阅专栏

前端进阶

15 篇文章

订阅专栏

VueTour是一个易于使用且高度可定制的Vue.js插件，用于创建用户引导。通过简单的安装和配置，可以指导用户熟悉应用程序的各个部分。在模板中添加<v-tour>组件和步骤定义，指定目标DOM元素，即可实现向导式的用户体验。支持自定义内容、定位等，提供快速上手的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网：

Vue Tour | A lightweight and customizable tour plugin for use with Vue.jshttps://pulsardev.github.io/vue-tour/

效果图：

简介及使用教程

Vue Tour是轻巧、简单且可自定义的新手指引插件，可与Vue.js一起使用。

它提供了一种快速简便的方法来指导用户使用您的应用程序。

安装

Npm

npm i  vue-tour

Yarn

yarn add vue-tour

使用

import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

new Vue({
  render: h => h(App)
}).$mount('#app')

在应用程序中的任何模板中(通常在App.vue中)，放置一个<v-tour>组件，并传递给它一系列步骤。

每个步骤的目标属性都可以将应用程序的任何组件中的DOM元素作为目标。

<template>
  <div>
    <div id="v-step-0">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.</div>
    <div class="v-step-1">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.</div>
    <div data-v-step="2">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.</div>

    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

<script>
  export default {
    name: 'my-tour',
    data () {
      return {
        steps: [
          {
            target: '#v-step-0',  // We're using document.querySelector() under the hood
            header: {
              title: 'Get Started',
            },
            content: `Discover <strong>Vue Tour</strong>!`
          },
          {
            target: '.v-step-1',
            content: 'An awesome plugin made with Vue.js!'
          },
          {
            target: '[data-v-step="2"]',
            content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
            params: {
              placement: 'top' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
            }
          }
        ]
      }
    },
    mounted: function () {
      this.$tours['myTour'].start()
    }
  }
</script>