Question

我正在使用几个外部库在vue应用程序中使用工具提示构建图表。我正在使用单文件组件

我有一个working fiddle，但无法将其翻译成工作组件。

尝试的方法：

在<head>标记
中加载3个工具提示实现的脚本
- "TypeError: tooltipAnchor.tooltip is not a function"
在编译的vue代码（<body>）
的标记之前，在build.js标记中加载3个工具提示实现的脚本
- "TypeError: tooltipAnchor.tooltip is not a function"
在Chart.vue挂钩中的mounted组件中加载3个工具提示实现的脚本
- "TypeError: tooltipAnchor.tooltip is not a function"

Chart.vue：

mounted: function mounted() {
  this.loadJS('https://code.jquery.com/jquery-3.2.1.slim.min.js')
  .then(() => {
    console.log('jquery loaded');
    return this.loadJS('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js');
  })
  .then(() => {
    console.log('popper loaded');
    return this.loadJS('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js')
  })
  .then(() => {
    console.log('bootstrap loaded');
    this.buildChart();
  });
},
methods: {
  loadJS: function loadJS(url) {
    return this.$http.get(url);
  }
  ...
}

要求Chart.vue顶部的所有三个脚本：
- 无法加载Bootstrap，因为jQuery不是可用的全局变量

我怀疑订单脚本加载到index.html时出现了错误，但我不知道是什么。有谁知道jsfiddle如何编译其HTML？我还缺少什么？

Answer 1

终于找到了解决方案：

在index.html中包含jquery：

<body>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <div id="app"></div>
  <!-- inject:js -->
  <script src="/js/build.js"></script>
  <!-- endinject -->
</body>

并在vue组件Chart.vue中导入/要求引导程序：

<template>
    <div id="chart"></div>
</template>
<script type="text/javascript">
  var d3 = require('d3');
  var Plottable = require('plottable');
  var bootstrap = require('bootstrap');

...

创造＆amp;的方法更新工具提示现在可以按预期工作。

Answer 2

您似乎正在向这些JS文件发出ajax请求但是您没有对响应做任何事情？更好的方法是

在本地下载文件
将它们放在与单个文件组件相同的目录中
导入组件正上方的本地文件

```

<script>
  // assuming you're using a transpiler? use appropriate syntax here
  import './popper.min'
  import './bootstrap.min';

  var vm = new Vue({
  el: '#app',
  data: {
    data_2017: [{
    x: '6th Grade',
    y: 12
  }, // ...

```

在Vuejs单文件组件中包含bootstrap.js外部脚本

尝试的方法：

2 个答案: