Question

我一直在使用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的方法？

Answer 1

如果你查看资源/ assets / js / bootstrap.js，你会发现它需要Vue和lodash以及jQuery和你所有的项目依赖，这不是twitter bootstrap的导入，而是for＆＃34;自举＆＃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，但如果您真的需要，可以使用它）

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

1 个答案: