Question

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

我已经创建了一个新组件。

newPage.vue

asynctask.executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR);

js.js

<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>

但这显然不起作用，因为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

如何解决此问题？

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

Answer 1

验证是否尚未加载jQuery。加载两次可能会导致一些问题。删除你的jquery导入，如果他们已经在jQuery上构建它，可能会检查console.log($)。它是否已经存在。
如果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');

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

2 个答案: