我一直在使用bootstrap 4作为我的laravel项目,但似乎有一些JS问题,我想尝试纯粹的css包,如Bulma,但我不知道如何从bootstrap 4移动到Bulma。
我已经安装了Bulma
npm install bulma
并通过
卸载Bootstrapnpm 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的方法?
答案 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,但如果您真的需要,可以使用它)