如何正確包含外部 JavaScript 庫，以便其 class 在 VueJs 組件中可用？

Question

下面是 JavaScript 庫的鏈接。

https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js

通過在如下視圖中包含這個庫，我的 VueJs 組件可以只使用它的d3 class 和 class 中的任何方法。

<html>
   <body>
      <div class="my-div-class"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
      <script src="{{ url (mix('/js/my-vuejs-component.js')) }}" type="text/javascript"></script>
  </body>
</html>

在 VueJsComponent，“my-vuejs-component.js”中調用d3 class 及其select()方法：

  const el = d3.select('.my-div-class');

它工作正常，但我的 VueJsComponent 抱怨d3沒有定義。 這是有道理的，因為d3從未在 VueJeComponent 中定義過。

如何正確包含外部 JavaScript 庫，以便其 class 或方法在 VueJs 組件中可用？

如果我們可以在 VueJsComponent 中實現，這樣的事情會很棒：

 <script>
       // This line of code is not working, just give an idea if we can convert this library into a module and import its class inside VueJs component.
       import d3 from "https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js";

       export default {
            methods: {
                test() {
                    const el = d3.select(".my-div-class");
                }  
            }
       }
 </script>

具體來說，我正在使用 Laravel 6。

Answer 1

您可以嘗試在下面添加腳本嗎？

const script = document.createElement('script');

script.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js';

document.body.appendChild(script);

如何正確包含外部 JavaScript 庫，以便其 class 在 VueJs 組件中可用？

問題描述

1 個解決方案

解決方案1
0 2019-11-20 08:29:47

如何正確包含外部 JavaScript 庫，以便其 class 在 VueJs 組件中可用？

問題描述

1 個解決方案

解決方案1 0 2019-11-20 08:29:47

解決方案1
0 2019-11-20 08:29:47