鍍金池/ 問答/HTML/ 使用vue-introjs報錯

使用vue-introjs報錯

按照https://github.com/alex-olesh... 介紹在webpack.dev.conf.js webpack.prod.conf.js下分別加入了

new webpack.ProvidePlugin({
  introJs: ['intro.js', 'introJs']
})

情況（1）
在需要使用的vue文件中

mounted(){
    this.intro().start(); // start the guide
    this.intro().showHints(); // show hints
},

然后報 Error in mounted hook: "TypeError: this.intro is not a function"

情況（2）
webpack配置不變（如上）
在main.js中
import VueIntro from 'vue-introjs'
Vue.use(VueIntro);

報錯 Can't resolve 'intro.js'

求大神解惑

packags.json部分截圖

clipboard.png

回答
編輯回答
清夢

yarn add intro.js 是否安裝了 ？？？

2017年7月28日 06:01
編輯回答
怣痛

總結一下：
1.npm i vue-introjs npm i intro.js

2.在webpack.dev.conf.js webpack.prod.conf.js下分別加入

new webpack.ProvidePlugin({
  introJs: ['intro.js', 'introJs']
})

3.在main.js中
import VueIntro from 'vue-introjs'
Vue.use(VueIntro);
import 'intro.js/introjs.css';

4.在.vue文件中

this.$nextTick(()=>{
    this.$intro().setOptions({'prevLabel':'← 上一步','nextLabel':'下一步 →','skipLabel':'跳過'}).start();
})
2018年8月7日 15:58