将库导入到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 - 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')

祝你好运！ ?

如果出现故障，请检查路径，并让我们知道有关该信息的更多信息

---

替代解决方案（但更糟）

如果要在Internet系统中使用此脚本，则可以在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>

1. 重建

Extracted from WebDataRocks React Example

重要！这是不安全的⚠

• 只有在确定其含义的情况下，才进行此操作
• 如果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,
  ...
})