將庫導入到 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,
  ...
})