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

我被要求将新的html页面添加到vuejs项目中。此页面已经完全开发，基于jquery和一些twitter-bootstrap功能。将自举功能包含到自定义vuejs组件中

我创建了一个新组件。

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全局添加到我的项目中，因为这肯定会在我的其他组件中出现断点续传吗？

来源

2017-08-16 smarber

你看过vue-strap吗？ https://wffranco.github.io/vue-strap/ – enriqg9

@ enriqg9有没有我需要的所有功能，例如崩溃 – smarber

我怀疑你需要括号形式的'import'。请参阅https://stackoverflow.com/a/43546877/392102 –

我想通了，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');

来源

2017-08-16 13:40:09 smarber

确认jQuery尚未加载。加载两次可能会导致一些问题。删除你的jQuery导入，也许登录console.log($)，如果他们已经建立在jQuery上的机会，它已经在那里。
如果1.失败，则必须在您的主js文件中导入jQuery或将其全局导入。

来源

2017-08-16 13:30:26

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

回答

相关问题