如何在 Vue.js 中导入引导程序或外部 js答案

【问题标题】：How to import bootstrap or external js in Vue.js如何在 Vue.js 中导入引导程序或外部 js
【发布时间】：2017-10-22 00:21:21
【问题描述】：

几天前，我决定在一个简单的 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 文件吗？

谢谢。

【问题讨论】：

标签： javascript jquery html css vue.js

【解决方案1】：

您可以像这样添加外部（从外部）资源：

<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 这样的模块捆绑器来安装依赖项。因此，您不必依赖外部服务的启动或关闭，并对捆绑进行更严格的控制。

如果你在 ES6 或 ES5 风格的 CommonJS 环境中并使用 Webpack，你应该考虑使用 npm 安装你的依赖项

npm install module --save

然后在你的 JS 代码中使用 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 直接安装它。希望对您有所帮助！

【讨论】：