【问题标题】：import a library into a single file component of vue.js将库导入到 vue.js 的单个文件组件中
【发布时间】：2019-10-29 21:41:21
【问题描述】：

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

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

【问题讨论】：

标签： javascript vue.js npm webdatarocks

【解决方案1】：

这有点重。

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

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

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

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

这里有一个解决方案 Webpack - How to load non module scripts into global scope | window

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

第二部分 - 添加 CSS

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

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

祝你好运！ ?

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

替代解决方案（但更糟）

如果您打算在互联网系统中使用此脚本，您可以在 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 失败，您的应用也会失败。

希望对你有帮助:)

【讨论】：

【解决方案2】：

我这样做了，它有效：

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

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

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

【讨论】：