Vue中使用新手引导功能：intro.js

一、安装intro.js

npm install intro.js --save

二、安装vue-introjs（该工具包是在introjs基础上开发的，故先要安装introjs）

npm i vue-introjs

三、相关配置

1.webpack相关配置

// webpack.config.js
{
    plugins: [
        new webpack.ProvidePlugin({
            // other modules
            introJs: ['intro.js']
        })
    ]
}

2.如果是vue-cli3的项目，则在vue.config.js

chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      // other modules
      introJs: ['intro.js']
    }])    
}

四、使用

1.引入

import VueIntro from 'vue-introjs'
Vue.use(VueIntro)

import 'intro.js/introjs.css';

2.初始化

this.$intro().setOptions({
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳过",
        doneLabel: "完成"
      }).oncomplete(()=> {
          //点击结束按钮后执行的事件
      }).onexit(()=> {
          //点击跳过按钮后执行的事件
      }).start()

3.html部分

五、参考链接

https://github.com/alex-oleshkevich/vue-introjs
https://introjs.com/