0

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

我已经安装了布尔玛

npm install bulma

并通过以下方式卸载 Bootstrap

npm uninstall bootstrap

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

require('./bootstrap');

并且在 localhost:8000/ 控制台日志有如下错误：

未捕获的 ReferenceError：Vue 未在 Object. (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.js 中的 require('bootstrap') 所以我将其删除并尝试执行require('bulma')或import bulma from 'bulma';但都可以。是不是我误解了vue中bulma的使用方式？

4

1 回答 1

0

如果您查看您的资源/资产/js/bootstrap.js，您会发现它需要 Vue、lodash 和 jQuery 以及您的所有项目依赖项，这不是 twitter 引导程序的导入，而是“引导”您的应用程序。

这是其中的一些代码：

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，但如果你真的想要它也可以）

于 2017-01-29T12:02:42.060 回答