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 Mix 提供了一个干净的、表达式的 API，用于编译 SASS 或 Less，它们是普通 CSS 的扩展，增加了变量、混入和其他强大的功能，使处理 CSS 更加愉快。在本文档中，我们将简要讨论 CSS 编译的一般情况；然而，您应该参考完整的 Laravel Mix 文档 以获取有关编译 SASS 或 Less 的更多信息。

JavaScript

Laravel 不要求您使用特定的 JavaScript 框架或库来构建您的应用。实际上，您甚至不必使用 JavaScript。但是，Laravel 包含一些基本的脚手架，使您更容易开始使用 Vue 库编写现代 JavaScript。Vue 提供了一个表达式的 API，用于使用组件构建强大的 JavaScript 应用程序。与 CSS 一样，我们可以使用 Laravel Mix 将 JavaScript 组件编译成一个单一的、浏览器就绪的 JavaScript 文件。

编写 CSS

在安装了 laravel/ui Composer 包和 生成前端脚手架 之后，Laravel 的 package.json 文件将包含 bootstrap 包，以帮助您开始使用 Bootstrap 模拟您应用的前端。但是，请随意根据您自己的应用需求添加或删除 package.json 文件中的包。您不需要使用 Bootstrap 框架来构建您的 Laravel 应用 - 它是提供给选择使用它的用户的一个良好的起点。

在编译您的 CSS 之前，请使用 Node 包管理器 (NPM) 安装您项目的所有前端依赖项。

npm install

使用 npm install 安装依赖后，您可以使用 Laravel Mix 编译您的 SASS 文件为普通 CSS。运行 npm run dev 命令会处理您的 webpack.mix.js 文件中的指令。通常，编译后的 CSS 将被放置在 public/css 目录中。

npm run dev

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

编写 JavaScript

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

npm install

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

安装好包后，您可以使用 npm run dev 命令 编译您的资源。Webpack 是一个用于现代 JavaScript 应用的模块打包器。运行 npm run dev 命令时，Webpack 将执行您的 webpack.mix.js 文件中的指令。

npm run dev

默认情况下，Laravel 的 webpack.mix.js 文件会编译您的 SASS 和 resources/js/app.js 文件。在 app.js 文件中，您可以注册 Vue 组件，或者如果您更喜欢其他框架，则可以配置自己的 JavaScript 应用程序。您的编译后的 JavaScript 通常会放置在 public/js 目录中。

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 文件中注册。

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

要在您的应用程序中使用该组件，您可以将它放入您的 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许可证。