將自舉功能包含到自定義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組件中

回答

相關問題