Vue2 Laravel5.3 Umzug von Bootstrap4 nach Bulma0.3

Question

Ich habe Bootstrap 4 für mein Laravel-Projekt verwendet, aber es scheint ein JS-Problem zu geben und ich würde gerne reines CSS-Paket wie Bulma ausprobieren, aber ich habe keine Ahnung wie von Bootstrap 4 zu Bulma wechseln.

Ich habe Bulma installiert von

npm install bulma 

und Bootstrap deinstallieren

npm uninstall bootstrap 

dann eine Zeile Code in meinem app.js als Anhänger

require('./bootstrap'); 

und auf localhost löschen : 8000/console log hat den folgenden Fehler:

Uncaught ReferenceError: Vue is not defined at eval (eval at (app.js:371), :7:27) at Object. (app.js:371) at webpack_require (app.js:20) at app.js:64 at app.js:67

EDIT # 1 so bootstrap.js ist nicht der bootstrap4 es bezieht sich auf. und innerhalb bootstrap.js habe ich die folgenden Codes

window._ = require('lodash'); 

window.$ = window.jQuery = require('jquery'); 
require('bootstrap'); 

window.Vue = require('vue'); 
require('vue-resource'); 

Vue.http.interceptors.push((request, next) => { 
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken); 

    next(); 
}); 

So wie ich deinstallieren Bootstrap und jetzt Konsole kehrt log

Uncaught Error: Cannot find module "bootstrap"

Ich würde denken, das ist, weil erfordern ('Bootstrap') in diesem Bootstrap. js so entferne ich es und versuche, require('bulma') oder import bulma from 'bulma'; tun, aber entweder funktioniert. Habe ich den Weg missverstanden, Bulma in vue zu benutzen?

Answer 1

Wenn Sie in Ihre Ressourcen/assets/js/bootstrap.js schauen, werden Sie sehen, dass Vue und lodash und jQuery und alle Projektabhängigkeiten benötigt werden. Dies ist kein Import für das Bootstrap von Twitter, sondern für "Bootstrapping" " Ihre Bewerbung.

Hier einige der Code dort:

import _ from 'lodash'; 
import $ from 'jquery'; 
import Vue from 'vue'; 

window._ = _; 
window.$ = window.jQuery = $; 
window.Vue = Vue; 

Dieser Code assignes die $ für jQuery und Vue auf die globale Window-Instanz und das ist der Grund, warum Sie Uncaught ReferenceError:Vue is not defined erhalten, sobald Sie diese Datei entfernen.

können Sie einfach importieren bulma in dieser Datei oder einfach nur einen <link />-Tag in der Masterseite verwenden (es ist nur CSS, keine Notwendigkeit für npm in hier, aber Sie können, wenn Sie wirklich wollen, dass es)