javascript - 在VueJS中使用产品导览库

我正在尝试为我的Web应用程序（如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";

最佳答案

问题可能是您从<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