一、安装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部分
<div v-intro="'The content of tooltip'" v-intro-step="2"></div>
五、参考链接
https://github.com/alex-oleshkevich/vue-introjs
https://introjs.com/
