将引导功能包含到自定义 vuejs 组件中

Question

我被要求向vuejs 项目添加一个新的html 页面。此页面已经完全开发并基于jquery 和一些twitter-bootstrap 功能。

我创建了一个新组件。

newPage.vue

<template>
    <div id="my-new-page">
        ...
    </div>
</template>

<style src="path/to/_bootstrap.scss" lang="scss" scoped></style>
<style src="path/to/font-awesome.scss" lang="scss" scoped></style>
<style src="path/to/animate.css" scoped></style>
<style src="path/to/custom/css.css" scoped></style>


<script src="path/to/custom/js.js"></script>

js.js

   import jQuery from 'jquery';
   // Same error even with window.$ = window.jQuery = jQuery;
   import collapse from 'path/to/bootstrap/feature/collapse.js";

   export default {
       created() {
           runjQuery(jQuery);
       },
   };

   function runjQuery($) {
       // here is how I thought integrate the jquery script of the new html page
       $(function () {
            ....
            $('#navbar').collapse('hide');
       });
   }

但这显然不起作用，因为collapse.js 无法访问jQuery，我收到此错误

Uncaught ReferenceError: jQuery is not defined

我该如何解决这个问题？

鉴于我不希望（如果可能）将 bootstrap 和 jquery 全局添加到我的项目中，因为这肯定会在我的其他组件中到处中断？

Answer 1

1. 确认 jQuery 尚未加载。加载两次可能会导致一些问题。删除您的 jquery 导入，如果他们已经在 jQuery 上构建它，也许可以签入 console.log($)，它可能已经存在了。
2. 如果 1. 失败，您必须在主 js 文件中导入 jQuery 或全局导入。

Answer 2

我想通了，require 有效，而 import 无效。

 // Declare $ and jQuery globally into my whole app :(
 window.$ = window.jQuery = jQuery;
 // this does not work
 // import collapse from 'path/to/bootstrap/feature/collapse.js";
 require('path/to/bootstrap/feature/collapse.js');