Javascript 将库导入到vue.js的单个文件组件中

我需要在我的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>

var pivot=新的WebDataRocks({
容器：“#wdr组件”，
工具栏：对，
报告：{
数据源：{
文件名：“https://cdn.webdatarocks.com/data/data.csv"
}
}
});

那么，在我的组件中，调用它的最佳方式是什么呢？

这有点重

该库不是在模块式系统中开发的，因此解决方案是将js文件作为全局导入

一个好的库应该是

constwebdatarocks=require（“WebDataRocks”）或带有导入，但库仅为最终客户端创建

第一部分-将JS文件添加到全局web客户端
要使用WebDataRocks，您必须获取全局变量，要获取全局变量，您必须将其作为html上的通用javascript，但要使用webpack

这里有一个解决方案

您必须为webdatarocks.toolbar.min.js和webdatarocks.js执行此操作

第二部分-添加CSS
你有一些选择，我发现最简单的方法是在你的
区域中使用
require
：

require('../node_modules/webdatarocks/webdatarocks.js')

祝你好运 我做到了这一点，它起了作用：

从“WebDataRocks”导入WebDataRocks
导入'@/./node_modules/webdatarocks/webdatarocks.min.css'/@解析为src/文件夹

我没有导入工具栏，因为我不需要它：

WebDataRocks({
容器：“#枢轴”，
工具栏：false，
...
})