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 提供了一个用于使用组件构建健壮 JavaScript 应用程序的 expressive API。与 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 Laravel\Ui\UiCommand;

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

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

php artisan ui nextjs

贡献

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

行为准则

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

安全漏洞

请查看我们的安全策略，了解如何报告安全漏洞。

许可

Laravel UI 是开源软件，遵循MIT 许可证。