README

Laravel 的 Buefy 前端预设

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

基于 Bulma 的轻量级 UI 组件，适用于 Vue.js。

功能

• 移除 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 项目。
• 运行 composer require feldsam-inc/laravel-buefy-preset。
• 然后运行 php artisan ui buefy。这将生成替换 Bootstrap 为 Bulma 以及设置您的 JS、SASS 和 Blade 视图所需的所有内容。
• 使用 yarn 和 yarn watch 安装和编译您的资产。
• 访问 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