时间戳

首页 > 解决方案 > 如何正确包含外部 JavaScript 库，以便其类在 VueJs 组件中可用？

javascript - 如何正确包含外部 JavaScript 库，以便其类在 VueJs 组件中可用？

问题描述

下面是 JavaScript 库的链接。

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

通过在如下视图中包含这个库，我的 VueJs 组件可以使用它的d3类和该类中的任何方法。

<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 中调用d3类及其select()方法，“my-vuejs-component.js”：

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

它工作正常，但我的 VueJsComponent 抱怨d3没有定义。这是有道理的，因为d3从未在 VueJeComponent 中定义过。

如何正确包含外部 JavaScript 库，以便其类或方法在 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。

标签： javascriptvue.jsd3.js

解决方案

您可以尝试在下面添加脚本吗？

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

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

document.body.appendChild(script);

推荐阅读