README

简介

虽然 Laravel 并未规定使用哪种 JavaScript 或 CSS 预处理器，但它提供了基于 Bootstrap、React 和/或 Vue 的基本起点，这对于许多应用来说都是非常有帮助的。默认情况下，Laravel 使用 NPM 安装这两个前端包。

此遗留包是在 Bootstrap CSS 框架上构建的一个非常简单的身份验证脚手架。虽然它与 Laravel 的最新版本仍然兼容，但对于新项目，您应考虑使用 Laravel Breeze。或者，对于更健壮的解决方案，请考虑 Laravel Jetstream。

官方文档

支持版本

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

安装

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

composer require zhaolinlau/ui

安装完 zhaolinlau/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

安装完 zhaolinlau/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组件

当使用zhaolinlau/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 zhaolinlau/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 许可证发布。许可证详情。