1

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

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

4

2 回答 2

2

这有点重。

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

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

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

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

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

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

第二部分 - 添加 CSS

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

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

祝你好运！

如果出现故障，请检查路径并让我们了解有关它的更多信息

替代解决方案（但更糟）

如果您打算在互联网系统中使用此脚本，您可以在 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>
  1. 重建

摘自 WebDataRocks React 示例

重要的！这是不安全的☣⚠</h3>
  • 仅当您确定这意味着什么时才进行此操作
  • 如果 webdatarocks CDN 失败，您的应用程序也会失败。

希望能帮助到你 ：）

于 2019-06-15T18:51:53.993 回答
1

我这样做了，它有效：

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

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

WebDataRocks({
  container: '#pivot',
  toolbar: false,
  ...
})
于 2019-09-11T13:12:40.970 回答