#Laravel UI

#简介

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

这个遗留包是一个非常简单的基于 Bootstrap CSS 框架构建的身份验证脚手架。虽然它继续与最新版本的 Laravel 兼容，但你应该考虑对新项目使用 Laravel Breeze。或者，对于更强大的功能，请考虑使用 Laravel Jetstream。

#官方文档

#支持的版本

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

版本	Laravel 版本
1.x	5.8, 6.x
2.x	7.x
3.x	8.x
4.x	9.x, 10.x

#安装

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 使得用 React 脚手架替换 Vue 脚手架变得轻而易举。

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 许可证 许可的开源软件。