几天前,我决定在一个简单的 html5、css3 和 javascript web 中实现 vue.js。但是现在我不能像这样导入我的库:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LiloTechnology</title>
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="../assets/js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../assets/js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="../assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../assets/js/jquery.isotope.js"></script>
<script type="text/javascript" src="../assets/js/wow.js"></script>
<script type="text/javascript" src="../assets/js/classie.js"></script>
</body>
</html>
你能告诉我如何导入外部 .js 文件吗?
谢谢。
最佳答案
您可以像这样添加外部(从外部)资源:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
等等... CSS 在链接中的工作方式相同 rel="externalUrlTo.css"
对于生产就绪的应用程序;也许考虑使用像 Webpack 和 npm 这样的模块 bundler 来安装依赖项。因此,您不必依赖外部服务的启动或关闭,并且可以更严格地控制捆绑。
如果你在 ES6 或 ES5 风格的 CommonJS 环境中并使用 Webpack,你应该考虑使用 npm 安装你的依赖项
npm install module --save
然后使用 var module = require('module')
或在 ES6 中 import module from 'module'
例如对于 jQuery 它将是 npm install jquery --save
(--save 顺便将它存储到您的 package.json 以便能够使用 npm install 轻松恢复您的依赖项)和使用 var $ = require('jquery')
导入它(同样是 ES6:import {$, jQuery} from 'jquery'
)。
特别考虑到 jQuery,一些库依赖于它在全局范围内可用。因此,请确保首先导入它并将其分配给窗口(或全局),如 How to import jquery using ES6 syntax? 中所示)
如果您需要特定版本,您可能还想将它添加到您的 package.json 或使用 npm install module@version
直接安装它。希望能有所帮助!
关于javascript - 如何在 Vue.js 中导入 bootstrap 或外部 js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44111230/