javascript - 如何在 Vue.js 中导入 bootstrap 或外部 js

标签 javascript jquery html css vue.js

几天前,我决定在一个简单的 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'

在您的 JS 代码中导入它们

例如对于 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/

相关文章:

javascript - 字典键值总是返回未定义

javascript - HTML5/jQuery : Working with custom attributes

javascript - Kendo UI Grid 多层层次结构(n-levels of hierarchy)

javascript - jquery获取父div图片源

html - 如何摆脱div左右两侧的空白区域?

html - 褪色垂直线

HTML & CSS : Positioning and/or Float Issue?

javascript - 对象不支持 IE 10 中的属性或方法 'querySelector'

javascript - jQuery 和原型(prototype)不能与 Array.prototype.reverse 一起工作

javascript - 更改文本的功能不起作用 jQuery