将产品导览库与 VueJS 一起使用答案

【问题标题】：Using a product tour library with VueJS将产品导览库与 VueJS 一起使用
【发布时间】：2017-09-14 03:28:50
【问题描述】：

我正在尝试为我的网络应用程序设置功能介绍教程（例如 intro.js）。我在使用 intro.js 时遇到了问题，但什么也没发生（没有错误消息或游览消息）。我尝试设置 intro.js 使用的数据属性并从 App.vue 上的挂载函数调用游览开始，但没有运气。我正在寻找是否有人对结合使用 VueJS 的此类库有经验。

来自 App.vue 的代码：

mounted: function() {
  const introJS = require('intro.js')
  introJS.introJs().start()
}

在它的同一个组件里面是<template>:

<div class="card card-accent-info" v-if="!isLoading" data-intro="Test step here" data-step="1">

我还在 App.vue 中加载了 css：

@import "~intro.js/minified/introjs.min.css";

【问题讨论】：

添加示例代码以显示您卡在哪里，如果没有看到代码就无法帮助您。
@Andrei 抱歉，忘记添加代码。在帖子中添加了它。据我对 intro.js 的理解，我认为这应该是我运行它所需要的全部内容。
你能不能试试console.log introJS 至少确保它已经正确加载。只需一步步调试，从根目录开始。

标签： javascript vue.js intro.js

【解决方案1】：

问题可能是您从<style> 标记导入CSS 的方式。要正确应用样式，请在 JavaScript 中导入 CSS：

<!-- MyComponent.vue -->
<script>
import "intro.js/minified/introjs.min.css";

export default {
  mounted() {
    const introJS = require("intro.js");
    introJS.introJs().start();
  }
};
</script>

demo

【讨论】：