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

Question

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

我有一个工作小提琴 ，但无法将其翻译成一个工作组件。

尝试的方法：

1. 在<head>标记中加载3个工具提示实现的脚本

   • "TypeError: tooltipAnchor.tooltip is not a function"

2. 在标记编译的vue代码（ build.js ）之前，在<body>标记中加载3个工具提示实现的脚本

   • "TypeError: tooltipAnchor.tooltip is not a function"

3. 在mounted挂钩中的Chart.vue组件中加载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);
  }
  ...
}

4. 需要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导入/ require bootstrap：

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

...

创建和更新工具提示的方法现在可以按预期工作。

Answer 2

看来你正在对这些JS文件发出ajax请求但是你没有对响应做任何事情？ 更好的方法是做到这一点

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

```

<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
  }, // ...

```