Vue2 Laravel5.3從Bootstrap4移動到Bulma0.3

我一直在爲我的laravel項目使用引導程序4，但似乎有一些JS問題，我想嘗試像布爾瑪這樣的純CSS程序包，但我不知道如何從Bootstrap 4移到Bulma。Vue2 Laravel5.3從Bootstrap4移動到Bulma0.3

我已經

npm install bulma

安裝布爾瑪和

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

編輯＃1 so bootstrap.js不是它引用的引導程序4。和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';，但要麼工作。我誤解了在vue中使用bulma的方式嗎？

來源

2017-01-29 warmjaijai

如果你看看你的資源/ assets/js/bootstrap.js，你會發現它需要Vue和lodash以及jQuery和你所有的項目依賴，這不是twitter引導的導入，而是「bootstrapping 「你的申請。

下面是一些代碼在那裏：

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，沒有必要在這裏NPM，但你可以，如果你真的想要它）

來源

2017-01-29 12:02:42 AfikDeri

是非常有意義到目前爲止，感謝你的回覆@AfikDeri。我在我的問題中更新了我的代碼bootstrap.js。所以仍然有一些關於這個問題，你可以再次看看這個問題嗎？謝謝。 – warmjaijai

或者我應該導入app.scss中的bulma，因爲它是css，但不需要js，所以對Vue無關緊要？ – warmjaijai

Vue2 Laravel5.3從Bootstrap4移動到Bulma0.3

回答

相關問題