README

Buefy前端预设用于Laravel

此预设提供UI组件，将Bulma和VueJS结合在一起，以Buefy的形式为任何新的Laravel站点/网络应用程序提供。按照Buefy自己的话，它提供

基于Bulma的轻量级UI组件。

功能

• 移除bootstrap，改用bulma，并提供VueJS组件，以便轻松使用所有（以及更多...）Bulma组件。
• 移除的其他NPM包：lodash、jquery、popper.js。
• 添加基于Bulma的Blade布局：resources/views/buefy/layouts/app.blade.php。
• 添加基于Bulma的Blade视图：resources/views/buefy/welcome.blade.php。
• 添加基于Bulma的"Navbar" Blade组件：resources/views/buefy/shared/bulma-nav.blade.php。
• 添加基于Vue和Bulma的"Navbar" Blade组件：resources/views/buefy/shared/bulma-nav.blade.php。
• 添加基于Vue和Bulma的"登录"和"注册"表单组件：resources/js/components/shared/LoginForm.vue、resources/js/components/shared/RegisterForm.vue。
• 在您的webpack.mix.js中添加CSS和JS资产的版本控制和缓存破坏。

警告!!

提供的Blade视图由自己的目录/buefy命名空间，因此在这方面不应该有问题，但是对于非全新项目，它将100%压缩您可能编写的任何自定义JS、SASS、Mix代码。已经警告过您了！

开始使用

• 在您的全新 Laravel项目中运行cd。
• 运行composer require pratyushpundir/laravel-buefy-preset。
• 然后运行php artisan preset buefy。这将构建您需要用Bulma替换Bootstrap以及设置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('buefy.welcome');
});

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

额外内容

生产环境中的资产版本控制和缓存破坏

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

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