我是VueJS和Webpack的新手。我用VueJS CLI创建了一个项目并试图使用它。我需要在我的代码中插入CDN。
使用标准HTML,CSS& JS解决方案,我……
不幸的是,不,你不能添加一个 <script> 标记到特定组件 的 通过模板 强> 。
<script>
在您的情况下,您有一些选择:
使用有属性地安装依赖项 npm
npm
脚步:
对于你的情况, 你可以登记入住 datatables 官方页面,他们有一个NPM包 。我可以像:
datatables
npm install --save datatables.net-dt
在你的 的 .vue 强> 文件:
<script> require( 'datatables.net-dt' )(); export default { name: 'Index', data() { return { } } } </script>
index.html
找到和dd <script> 标记到你的 index.html
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
</body>
另一种选择是创建 script 当组件被嵌入时,以编程方式在组件处标记。
script
步骤/代码:
<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>
另一种选择是在index.html中添加脚本 v-if 指示
v-if
<script v-if="loadGoogleAPI" async defer src="https://apis.google.com/js/api.js" ... ></script>
在组件文件内( .vue ),如果要加载脚本,请将标志设置为 true :
.vue
true
<script> export default { ... loadGoogleAPI: true, data() { ... } }; </script>