javascript - 将库导入到 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，你必须获取全局变量，要获取全局变量，你必须注入(inject)，就像 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')

祝你好运! 😁

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

<小时/>

替代解决方案(但更糟糕)

如果您要在互联网系统中使用此脚本，您可以在 HTML 中插入脚本和 CSS。为此，请执行以下操作:

1. 打开index.html
2. 在头部添加此代码:

<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 失败，您的应用也会失败。

希望有帮助:)