README

Laravel的Bulma前端预设

这个预设将Bootstrap替换为出色的Bulma。用它自己的话说

Bulma是一个基于Flexbox的免费、开源CSS框架，由超过10万名开发者使用。

它能做什么

• 用bulma替换bootstrap。
• 其他移除的NPM包：lodash、jquery、popper.js。
• 添加基于Bulma的Blade布局：resources/views/bulma/layouts/app.blade.php。
• 添加基于Bulma的Blade视图：resources/views/bulma/welcome.blade.php。
• 添加基于Bulma的"Navbar" Blade组件：resources/views/bulma/shared/bulma-nav.blade.php。
• 在webpack.mix.js中添加CSS和JS资源的版本化/缓存破坏功能，用于生产环境。

安装

此预设的Blade视图保存在其自己的目录中，所以在这方面不应该出现问题，但对于非新项目，它将100%压扁您可能编写的任何自定义JS、SASS、Mix代码。警告！

• cd到您的新 Laravel项目。
• 运行composer require pratyushpundir/laravel-bulma-preset。
• 然后运行php artisan preset bulma。这将为您构建所有替换Bootstrap为Bulma以及设置JS、SASS和Blade视图所需的内容。
• 使用yarn && yarn watch或npm install && npm run watch（但yarn要好得多！）安装和编译您的资源。
• 访问routes/web.php并更改以下代码

Route::get('/', function () {
    // Change this...
    return view('welcome');
});

为

Route::get('/', function () {
    // To this!
    return view('bulma.welcome');
});

就这样！运行php artisan serve并访问https://:8000以查看全新的基于Bulma的欢迎页面！

附加功能

生产环境中的资源版本化/缓存破坏

为了使此功能正常工作，您需要确保以下两点：

1. SASS和JS资源需要使用production设置进行编译。为此，运行yarn production或yarn prod。当然，您也可以使用NPM。但我们已经谈过了这一点！
2. 您的Laravel应用程序需要处于production环境。在.env文件中这样做。

在bulma-nav.blade.php中启用版本号徽章

1. 将'version' => env('APP_VERSION', '1.0.0'),添加到您的config/app.php文件。
2. 将APP_VERSION=YOUR_VERSION_NUMBER添加到您的.env文件。用您需要的任何内容替换"YOUR_VERSION_NUMBER"。

配置环境指示器

此预设还添加了一个环境指示器，帮助您区分您的Laravel应用程序可能处于的各种环境（本地、开发、预发布、生产等）。它显示在页面顶部的彩色细条中。条的颜色表示应用程序环境。

这是通过添加一个与您在.env文件中设置的名称相同的类名来实现的。然后，您可以在resources/sass/app.scss中配置您希望指示器具有的颜色。查找以下代码片段并按需更改：

// Configure environment-wise colors you need per environment
#env-indicator.local {
    background-color: $primary;
}

#env-indicator.dev {
    background-color: $primary-invert;
}

// Hide the environment indicator on your choice of environments
#env-indicator.production,
#env-indicator.staging {
    display: none !important;
}

作者

Pratyush Pundir
电子邮件：pratyushpundir@icloud.com