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

Question

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

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

Answer 1

这有点重。

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

一个好的库就像const WebDataRocks = require("WebDataRocks"); 或使用导入，但该库仅适用于最终客户端。

第一部分 - 将 JS 文件添加到全局 Web 客户端

要使用 WebDataRocks，您必须获取全局变量，要获取必须输入的全局变量，就像 html 上的常见 javascript 但使用 webpack。

以下是此Webpack的解决方案- 如何将非模块脚本加载到全局范围 | 窗户

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

第二部分 - 添加 CSS

您有一些选择，我发现这样做的简单方法是在您的<script>区域中使用require ：

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

祝你好运！ 😁

如果某些事情失败，请检查路径并让我们知道有关它的更多信息

---

替代解决方案（但更糟）

如果您打算在 Internet 系统中使用此脚本，则可以在 HTML 中插入脚本和 CSS。 为此，请执行以下操作：

1. 打开 index.html
2. 在 head 部分添加此代码：

<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>

3. 重建

摘自 WebDataRocks React 示例

重要的！ 这是不安全的☣ ⚠

• 仅当您确定这意味着什么时才进行此操作
• 如果 webdatarocks CDN 失败，您的应用程序也会失败。

希望能帮助到你 ：）

Answer 2

我这样做了，它有效：

import WebDataRocks from 'webdatarocks'
import '@/../node_modules/webdatarocks/webdatarocks.min.css' // @ is resolved to src/ folder

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

WebDataRocks({
  container: '#pivot',
  toolbar: false,
  ...
})