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

Question

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

我创建了一个新组件。

新页面.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

如何解决此问题？

鉴于我不想(如果可能的话(将引导和 jquery 全局添加到我的项目中，因为这肯定会在我的其他组件中到处中断？

Answer 1

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

Answer 2

我想通了，require有效，而导入不起作用。

// 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');