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 应用程序提供了一种表达式的 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 许可证 许可。