在 Vuejs 单文件组件中包含 bootstrap.js 个外部脚本
Include bootstrap.js external script in Vuejs single-file components
我正在使用几个外部库在 vue 应用程序中构建带有工具提示的图表。我正在使用单文件组件
我有一个 working fiddle，但无法将其转换为工作组件。
尝试的方法：
在 <head> 标签中加载 3 个工具提示相关的脚本
"TypeError: tooltipAnchor.tooltip is not a function"
在已编译的 vue 代码 (build.js)
标签之前的 <body> 标签中加载 3 个工具提示相关的脚本
"TypeError: tooltipAnchor.tooltip is not a function"
在 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);
}
...
}
需要 Chart.vue 顶部的所有三个脚本：
- Bootstrap 无法加载，因为
jQuery 不是可用的全局变量
我怀疑当我将它们放入 index.html 时加载的订单脚本有问题，但我不知道是什么。有谁知道 jsfiddle 是如何编译它的 html 的？我还缺少什么？
您似乎正在向这些 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
}, // ...
```
终于找到解决方案：
在 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组件中的和import/requirebootstrapChart.vue:
<template>
<div id="chart"></div>
</template>
<script type="text/javascript">
var d3 = require('d3');
var Plottable = require('plottable');
var bootstrap = require('bootstrap');
...
创建和更新工具提示的方法现在可以按预期工作。
我正在使用几个外部库在 vue 应用程序中构建带有工具提示的图表。我正在使用单文件组件
我有一个 working fiddle，但无法将其转换为工作组件。
尝试的方法：
在
<head>标签中加载 3 个工具提示相关的脚本"TypeError: tooltipAnchor.tooltip is not a function"
在已编译的 vue 代码 (
标签之前的build.js)<body>标签中加载 3 个工具提示相关的脚本"TypeError: tooltipAnchor.tooltip is not a function"
在
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);
}
...
}
需要
Chart.vue顶部的所有三个脚本：- Bootstrap 无法加载，因为
jQuery不是可用的全局变量
- Bootstrap 无法加载，因为
我怀疑当我将它们放入 index.html 时加载的订单脚本有问题，但我不知道是什么。有谁知道 jsfiddle 是如何编译它的 html 的？我还缺少什么？
您似乎正在向这些 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
}, // ...
```
终于找到解决方案：
在 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>
和import/requirebootstrapChart.vue:
<template>
<div id="chart"></div>
</template>
<script type="text/javascript">
var d3 = require('d3');
var Plottable = require('plottable');
var bootstrap = require('bootstrap');
...
创建和更新工具提示的方法现在可以按预期工作。