龙空技术网

前端开发之vue-tour的使用和实例

庸人的快乐生活 645

前言:

现在大家对“vue应用案例”大约比较关怀,兄弟们都需要学习一些“vue应用案例”的相关资讯。那么小编也在网摘上搜集了一些关于“vue应用案例””的相关资讯,希望同学们能喜欢,姐妹们快快来了解一下吧!

前言

vue-tour官方文档:

vue-tour git文档:

可以快速便捷的指导用户使用您的程序

目前vue3导入报错为找到解决方案,可能是没有兼容到vue3,如果有请您留言共同成长

效果图

可在官网使用测试操作

一、vue2中简单案例1、安装组件

npm install vue-tour
2、在man.js文件中引用
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')
3、.vue文件
<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             }          }        ]      }    },    mounted: function () {      this.$tours['myTour'].start()    }  }</script>
二、vue3中调用–main.js文件引用
import VueTour from 'vue-tour'require('vue-tour/dist/vue-tour.css')const app = createApp(App).use(VueTour).mount('#app')
报错为未解决如果您有好的解决方案请留言

标签: #vue应用案例