README

简介

虽然Laravel没有规定您使用哪些JavaScript或CSS预处理器，但它确实提供了一个基本起点，使用Bootstrap、React和/或Vue，这对许多应用程序都有帮助。默认情况下，Laravel使用NPM安装这两个前端包。

此遗留包是在Bootstrap CSS框架上构建的一个非常简单的身份验证框架。虽然它与Laravel的最新版本继续工作，但您应考虑为新的项目使用Laravel Breeze。或者，为了更强大的功能，请考虑使用Laravel Jetstream。

官方文档

支持的版本

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

安装

Laravel提供的Bootstrap和Vue框架位于laravel/ui Composer包中，可以使用Composer进行安装

composer require laravel/ui

安装laravel/ui包后，您可以使用ui Artisan命令安装前端框架

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

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

CSS

Laravel官方支持Vite，这是一种现代的前端构建工具，提供极快的开发环境，并将您的代码捆绑到生产环境中。Vite支持多种CSS预处理器语言，包括SASS和Less，它们是CSS的扩展，添加了变量、混合等功能，使CSS工作更加愉快。在本文档中，我们将简要讨论CSS编译的一般情况；然而，您应查阅完整的Vite文档以获取有关编译SASS或Less的更多信息。

JavaScript

Laravel不需要您使用特定的JavaScript框架或库来构建您的应用程序。实际上，您甚至不需要使用JavaScript。但是，Laravel包含一些基本的框架，以方便您使用Vue库开始编写现代JavaScript。Vue提供了一种表达式的API，用于使用组件构建健壮的JavaScript应用程序。与CSS一样，我们可以使用Vite轻松编译JavaScript组件到一个单一的、浏览器就绪的JavaScript文件中。

编写CSS

安装laravel/ui Composer包并生成前端框架后，Laravel的package.json文件将包括bootstrap包，帮助您使用Bootstrap开始构建应用程序的前端原型。但是，请随意根据您自己的应用程序需要添加或删除package.json文件中的包。您不需要使用Bootstrap框架来构建Laravel应用程序 - 它为选择使用它的用户提供了一个良好的起点。

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

npm install

使用npm install安装依赖项后，您可以使用Vite将您的SASS文件编译为纯CSS。运行npm run dev命令将处理您的vite.config.js文件中的指令。通常，编译后的CSS将被放置在public/build/assets目录中。

npm run dev

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

编写JavaScript

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

npm install

默认情况下，Laravel的package.json文件包含了一些包，如lodash和axios，以帮助您开始构建JavaScript应用程序。您可以根据自己的应用程序需要添加或删除package.json文件中的内容。

安装完这些包后，您可以使用npm run dev命令来编译您的资源。Vite是一个现代JavaScript应用程序的模块打包器。运行npm run dev命令时，Vite将执行您的vite.config.js文件中的指令。

npm run dev

默认情况下，Laravel的vite.config.js文件将编译您的SASS和resources/js/app.js文件。在app.js文件中，您可以注册Vue组件或配置自己的JavaScript应用程序（如果您更喜欢不同的框架）。编译后的JavaScript通常放置在public/build/assets目录中。

app.js文件将加载resources/js/bootstrap.js文件，该文件初始化并配置Vue、Axios、jQuery以及其他所有JavaScript依赖项。如果您有其他JavaScript依赖项需要配置，您也可以在此文件中配置。

编写Vue组件

当使用laravel/ui包来搭建您的前端时，一个ExampleComponent.vue Vue组件将被放置在resources/js/components目录中。ExampleComponent.vue文件是一个单文件Vue组件的示例，它在同一个文件中定义了其JavaScript和HTML模板。单文件组件为构建JavaScript驱动应用程序提供了一种非常方便的方法。该示例组件已在app.js文件中注册。

import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);

要使用该组件在您的应用程序中，您可以将它放入HTML模板中的一个。例如，在运行了php artisan ui vue --auth Artisan命令来搭建您的应用程序的身份验证和注册界面后，您可以将组件放入home.blade.php Blade模板中。

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

请注意，每次您更改Vue组件时，都应该运行npm run dev命令。或者，您也可以运行npm run watch命令以监控并在组件更改时自动重新编译它们。

如果您想了解更多关于编写Vue组件的信息，您应该阅读Vue文档，它提供了一个全面且易于阅读的Vue框架概述。

使用React

如果您更喜欢使用React来构建JavaScript应用程序，Laravel可以让您轻松地将Vue脚手架与React脚手架互换。

composer require laravel/ui

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

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

添加预设

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

use Jefter\Ui\UiCommand;

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

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

php artisan ui nextjs

贡献

感谢您考虑为 UI 做出贡献！贡献指南可以在 Laravel 文档 中找到。

行为准则

为了确保 Laravel 社区对所有成员都友好，请阅读并遵守 行为准则。

安全漏洞

请参阅 我们的安全策略 了解如何报告安全漏洞。

许可证

Laravel UI 是开源软件，使用 MIT 许可证。