README

简介

虽然Laravel没有指定你使用哪些JavaScript或CSS预处理器，但它提供了一个基于Bootstrap的基本起点，这对许多应用程序都有帮助。默认情况下，Laravel使用NPM来安装这两个前端包。

这个遗留包是在Bootstrap CSS框架上构建的一个非常简单的身份验证脚手架。虽然它仍然可以与最新的Laravel版本一起工作，但你应该考虑为新项目使用Laravel Breeze。或者，为了更强大的功能，考虑使用Laravel Jetstream。

官方文档

支持的版本

只有最新的主要版本Laravel UI会收到错误修复。下表列出了兼容的Laravel版本

安装

Laravel提供的Bootstrap和Vue脚手架位于fmohican/laravel-bootstrap-ui Composer包中，可以使用Composer安装

composer require fmohican/laravel-bootstrap-ui

安装完fmohican/laravel-bootstrap-ui包后，您可以使用ui Artisan命令安装前端脚手架

// Generate basic scaffolding...
php artisan ui bootstrap

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth

CSS

Laravel Mix提供了一个干净的、易于表达的API，用于编译SASS或Less，这些是CSS的扩展，增加了变量、混入等强大的功能，使得使用CSS更加愉快。在本文档中，我们将简要讨论CSS编译的一般情况；但是，您应参考Laravel Mix的完整文档，以获取有关编译SASS或Less的更多信息。

JavaScript

Laravel不需要你使用特定的JavaScript框架或库来构建你的应用程序。实际上，你甚至不需要使用JavaScript。然而，Laravel确实包含了一些基本的脚手架，以便更容易地使用Vue库开始编写现代JavaScript。Vue提供了一个用于构建强大JavaScript应用程序的组件的可表达API。与CSS一样，我们可以使用Laravel Mix轻松编译JavaScript组件到一个单一的、浏览器就绪的JavaScript文件中。

编写CSS

安装完laravel/ui Composer包并生成前端脚手架后，Laravel的package.json文件将包括bootstrap包，帮助你开始使用Bootstrap进行应用程序前端的原型设计。但是，请根据您自己的应用程序需求，自由地添加或删除package.json文件中的包。您不需要使用Bootstrap框架来构建您的Laravel应用程序 - 它被提供作为选择使用它的用户的良好起点。

在编译您的CSS之前，使用Node包管理器（NPM）安装您的项目的前端依赖项

npm install

使用npm install安装依赖项后，您可以使用Laravel Mix将您的SASS文件编译成纯CSS。执行npm run dev命令将处理您的webpack.mix.js文件中的指令。通常，您的编译CSS将放置在public/css目录中

npm run dev

包含在Laravel前端脚手架中的webpack.mix.js文件将编译resources/sass/app.scss SASS文件。这个app.scss文件导入了一个SASS变量文件，并加载了Bootstrap，这为大多数应用提供了良好的起点。您可以自由地自定义app.scss文件，甚至可以通过配置Laravel Mix使用完全不同的预处理器。

编写JavaScript

您的应用需要的所有JavaScript依赖项都可以在项目根目录下的package.json文件中找到。这个文件类似于composer.json文件，但它指定了JavaScript依赖项而不是PHP依赖项。您可以使用Node包管理器（NPM）来安装这些依赖项。

npm install

默认情况下，Laravel的package.json文件包含一些包，如lodash和axios，以帮助您开始构建JavaScript应用。根据您自己的应用需求，您可以在package.json文件中添加或删除这些包。一旦安装了这些包，您可以使用npm run dev命令来编译您的资源。Webpack是一个现代JavaScript应用的模块打包器。当您运行npm run dev命令时，Webpack将执行您的webpack.mix.js文件中的指令。

npm run dev

默认情况下，Laravel的webpack.mix.js文件会编译您的SASS和resources/js/app.js文件。在app.js文件中，您可以注册Vue组件或配置您自己的JavaScript应用（如果您偏好不同的框架）。编译后的JavaScript通常会被放置在public/js目录下。

app.js文件将加载resources/js/bootstrap.js文件，该文件负责启动和配置Vue、Axios、jQuery以及所有其他JavaScript依赖项。如果您有其他需要配置的JavaScript依赖项，您也可以在这个文件中配置。

添加预设

预设是“可宏化的”，这允许您在运行时向UiCommand类添加额外的方法。例如，以下代码向UiCommand类添加了一个nextjs方法。通常，您应该在服务提供者中声明预设宏。

use Laravel\Ui\UiCommand;
UiCommand::macro('nextjs', function (UiCommand $command) {
    // Scaffold your frontend...
});

然后，您可以通过ui命令调用新的预设。

php artisan ui nextjs

许可证

laravel-bootstrap-ui是开源软件，根据MIT许可证发布，是laravel/ui的分支。