Fab*_*con 9 javascript cdn datatables webpack vue.js
我是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组件？
acd*_*ior 20
遗憾的是,不能,您无法通过模板<script>向特定组件添加标签.
在您的情况下,您有一些选择:
使用有属性地安装依赖项 npm
脚步:
对于您的情况,您可以在datatables官方页面查看他们有NPM包.我可以像:
npm install --save datatables.net-dt
在你的.vue文件中:
<script>
require( 'datatables.net-dt' )();
export default {
name: 'Index',
data() {
return {
}
}
}
</script>
<script>标签 index.html找到<script>你的标签和标签index.html
<script>标签是清楚地(和声明)添加到HTML源.该脚本只会加载一次.<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>.<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>
| 归档时间： |
|
| 查看次数： |
17408 次 |
| 最近记录： |