首页 文章

如何在没有NPM或Webpack的情况下将CDN包含到VueJS CLI中？

提问于
浏览 次
0

我是VueJS和Webpack的新手 . 我用VueJS CLI创建了一个项目并试图使用它 . 我需要在我的代码中插入CDN .

使用标准的HTML，CSS和JS解决方案时，我会包含这样的CDN：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>False Merge</title>

    <!-- CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css"/>

    <!-- StyleSheets -->
    <link rel="stylesheet" href="public/stylesheets/index.css" />
</head>

<body>


    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>

    <script src="public/javascripts/index.js"></script>

</body>

</html>

如您所见，您可以添加带有HTML脚本标记的CDN脚本，并开始在JS中使用它 .

我试图在组件中对VueJS做同样的事情 . 我已准备好模板和样式部分 .

不幸的是，我不知道如何以简单的方式添加CDN以在Vue组件内的脚本标记中立即使用 . 我试图这样做，但它不起作用 .

<template>
  <div class="index">
    <div class="container">
      <table id="table_dataset" class="display">
      </table>
    </div>
  </div>
  
</template>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script>
  export default {
    name: 'Index',
    data() {
      return { 
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

有没有办法将CDN（没有Webpack或NPM）添加到VueJS组件？

javascript webpack vue.js datatables cdn

2 回答

  • 8

    不幸的是，不能，你不能将 <script> 标签添加到特定组件 via template .

    在您的情况下，您有一些选择：

    1：使用NPM

    使用 npm 属性安装依赖项

    npm install --save datatables.net-dt
    • 并在您的 .vue 文件中：
    <script>
  require( 'datatables.net-dt' )();
  export default {
    name: 'Index',
    data() {
      return { 
      }
    }
  }
</script>

    2：将<script>标记添加到index.html

    找到并将 <script> 标签添加到 index.html

    • Pros: <script> 标记清楚地（并以声明方式）添加到HTML源代码中 . 该脚本只会加载一次 .

    • Cons: 脚本将全局加载 .

    • 步骤：

    • 只需将 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script> 添加到 index.html 文件的末尾，最好是在 </body> 之前 .

    3：以编程方式创建<script>标记

    另一种方法是在组件构建时以编程方式在组件上创建 script 标记 .

    • Pros: 代码仅保留在组件中 . 只有在加载组件时才会加载外部脚本 .

    • Cons: 加载后，脚本仍将全局可用 .

    • 步骤/代码：

    <script>
  export default {
    name: 'Index',
    data() {
      return { 
      }
    },
    mounted() {
      if (document.getElementById('my-datatable')) return; // was already loaded
      var scriptTag = document.createElement("script");
      scriptTag.src = "https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js";
      scriptTag.id = "my-datatable";
      document.getElementsByTagName('head')[0].appendChild(scriptTag);
    }
  }
</script>
    回复于
  • 0

    另一种选择是使用 v-if 指令在index.html中添加脚本

    <script v-if="loadGoogleAPI" async defer src="https://apis.google.com/js/api.js" ... ></script>

    在组件文件（ .vue ）中，如果要加载脚本，请将标志设置为 true ：

    <script>
export default {
  ...
  loadGoogleAPI: true,
  data() {
  ...
  }
};
</script>
    回复于

相关问题