Vue2 Laravel5.3从Bootstrap4移动到Bulma0.3

时间:2017-01-29 02:52:31

标签: laravel-5.3 vuejs2 bootstrap-4 bulma

我一直在使用bootstrap 4作为我的laravel项目,但似乎有一些JS问题,我想尝试纯粹的css包,如Bulma,但我不知道如何从bootstrap 4移动到Bulma。

我已经安装了Bulma

npm install bulma

并通过

卸载Bootstrap
npm uninstall bootstrap

然后在我的app.js中删除一行代码,如下所示

require('./bootstrap');

并在localhost:8000 / console日志中出现如下错误:

  

未捕获的ReferenceError:未定义Vue       在eval(eval at(app.js:371),:7:27)       在对象。 (app.js:371)       在 webpack_require (app.js:20)       在app.js:64       在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();
});

因此,当我卸载bootstrap时,现在控制台日志返回

  

未捕获错误:找不到模块“bootstrap”

我认为这是因为在bootstrap.js中需要('bootstrap')所以我将其删除并尝试require('bulma')import bulma from 'bulma';但是可以正常工作。我是否误解了在vue中使用bulma的方法?

1 个答案:

答案 0 :(得分:0)

如果你查看资源/ assets / js / bootstrap.js,你会发现它需要Vue和lodash以及jQuery和你所有的项目依赖,这不是twitter bootstrap的导入,而是for& #34;自举"你的申请。

以下是一些代码:

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

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

此代码将$ jQuery和Vue分配给全局窗口实例,这就是删除此文件后获得Uncaught ReferenceError:Vue is not defined的原因。

您只需在此文件中导入bulma或只在主页中使用<link />标记(它只是css,此处不需要npm,但如果您真的需要,可以使用它)