Bootstrap-Funktionen in eine benutzerdefinierte vuejs-Komponente einschließen

Question

Ich werde gebeten, eine neue HTML-Seite zu einem vuejs-Projekt hinzuzufügen. Diese Seite ist bereits vollständig entwickelt und basiert auf jquery und einigen twitter-bootstrap Funktionen.

Ich habe eine neue Komponente erstellt.

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

Aber das ist offensichtlich nicht funktionieren, weil collapse.js nicht jQuery zugreifen kann, und ich erhalte diese Störung

Uncaught ReferenceError: jQuery is not defined 

Wie behebe ich dieses Problem?

Vorausgesetzt, ich möchte (wenn möglich) Bootstrap und Jquery global zu meinem Projekt hinzufügen, weil dies hier und da in meinen anderen Komponenten sicherlich bricht?

Answer 1

Ich fand es heraus, require funktioniert, während import nicht funktioniert.

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

Answer 2

1. Überprüfen Sie, dass jQuery nicht bereits geladen ist. Wenn Sie es zweimal laden, kann dies zu Problemen führen. Entfernen Sie Ihren jQuery-Import und checken Sie möglicherweise in console.log($) ein, wenn sie es auf jQuery gebaut haben, Chancen sind es bereits dort.
2. Wenn 1. fehlschlägt, müssen Sie jQuery in Ihre Hauptjs-Datei importieren oder global importieren.