我需要在vue组件中导入库，在文档中，我解释了如何使用npm进行安装（已执行此步骤），而不是如何将其导入到vue组件中，这就是它说明如何使用的方式文件：
<link href="node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="node_modules/webdatarocks/webdatarocks.js"></script>
这是实例化库的方法：
<script>
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
</script>
那么在我的组件中调用此方法的最佳方法是什么？
最佳答案
这有点重。
该库不是在类似模块的系统中开发的，因此解决方案是将js文件导入为全局文件。
一个好的库就像const WebDataRocks = require("WebDataRocks");或带有导入，但是该库仅针对最终客户。
第一部分-将JS文件添加到全局Web客户端
要使用WebDataRocks，您必须获取全局变量，要获取全局变量，必须像html上的普通javascript一样使用webpack。
这是一个解决方案
Webpack - How to load non module scripts into global scope | window
您必须对webdatarocks.toolbar.min.js和webdatarocks.js执行此操作
第二部分-添加CSS
您有一些选择，我发现执行此操作的简单方法是在您的require区域中使用<script>：
require('../node_modules/webdatarocks/webdatarocks.js')
祝好运！ 😁
如果出现故障，请检查路径，并让我们知道有关它的更多信息。
替代解决方案（但更糟）
如果要在Internet系统中使用此脚本，则可以在HTML中插入脚本和CSS。为此：
打开index.html
将此代码添加到头部：
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
重建
Extracted from WebDataRocks React Example
重要！这是不安全的☣
仅当您确定这意味着什么时才进行此操作
如果webdatarocks CDN失败，您的应用程序也会失败。
希望能帮助到你 ：）
关于javascript - 将库导入到vue.js的单个文件组件中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56611936/