Vue2 Laravel5.3 Перемещение с Bootstrap4 на Bulma0.3

Question

Я использую bootstrap 4 для моего проекта laravel, но, похоже, есть проблема с JS, и я хотел бы попробовать чистый пакет css, такой как Bulma, но я понятия не имею, как для перехода от бутстрапа 4 к Бульме.

Я установил Бульм по

npm install bulma 

и удалить Bootstrap по

npm uninstall bootstrap 

затем удалить строку коды в моем app.js как следующие

require('./bootstrap'); 

и на локальном хосте : 8000/консольный журнал имеет ошибку, как показано ниже:

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 так что bootstrap.js - это не bootstrap4, о котором идет речь. и в bootstrap.js у меня есть следующие коды

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

Так как я удалить самозагрузки и теперь консоль журнал возвращается

Uncaught Error: Cannot find module "bootstrap"

Я думаю, что это потому, что требуется («самозагрузки») в этом загрузчике. js, поэтому я удаляю его и пытаюсь сделать require('bulma') или import bulma from 'bulma';, но либо работает. Я неправильно понял, как использовать bulma в vue?

Answer 1

Если вы заглянете в свои ресурсы/активы/js/bootstrap.js, вы увидите, что для него требуются Vue и lodash и jQuery и все ваши зависимости проекта. Это не импорт для загрузочного твита, но для «начальной загрузки» " ваше приложение.

Вот некоторые из кода там:

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

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

Этот код assignes в $ для JQuery и Vue для глобального экземпляра окна, и это является причиной, вы получаете Uncaught ReferenceError:Vue is not defined, как только вы удалите этот файл.

Вы можете просто импортировать Бульм внутри этого файл или просто использовать <link /> тега в вашей главной странице (Это просто CSS, нет необходимости в НОМ, но вы можете, если вы действительно хотите)