前端
简介
Laravel 是一个后端框架，它提供了构建现代 Web 应用程序所需的所有功能，例如路由、验证、缓存、队列、文件存储等等。然而，我们相信为开发者提供优美的全栈体验同样重要，这其中就包括构建应用程序前端的强大方法。
在使用 Laravel 构建应用程序时，处理前端开发主要有两种方式，你的选择取决于你是想利用 PHP 构建前端，还是想使用 React、Svelte 和 Vue 等 JavaScript 框架。我们将在下面讨论这两种选项，以便你能够就应用程序前端开发的最佳方法做出明智的决定。
使用 PHP
PHP 和 Blade
在过去，大多数 PHP 应用程序使用简单的 HTML 模板将 HTML 渲染到浏览器，这些模板中散布着 PHP echo 语句，用于渲染在请求期间从数据库检索的数据：
<div>
<?php foreach ($users as $user): ?>
Hello, <?php echo $user->name; ?> <br />
<?php endforeach; ?>
</div>在 Laravel 中，仍然可以通过视图和 Blade 来实现这种渲染 HTML 的方法。Blade 是一个极其轻量级的模板语言，它提供了方便、简洁的语法来显示数据、遍历数据等等：
<div>
@foreach ($users as $user)
Hello, {{ $user->name }} <br />
@endforeach
</div>以这种方式构建应用程序时，表单提交和其他页面交互通常会从服务器接收一个全新的 HTML 文档，然后浏览器会重新渲染整个页面。即使在今天，许多应用程序也完全可以适合以这种方式使用简单的 Blade 模板来构建其前端。
不断增长的期望
然而，随着用户对 Web 应用程序的期望不断提高，许多开发者发现需要构建更具动态性的前端，其交互感觉更加精致。有鉴于此，一些开发者选择开始使用 React、Svelte 和 Vue 等 JavaScript 框架来构建其应用程序的前端。
另一些开发者则更倾向于坚持使用他们熟悉的后端语言，他们已经开发出了解决方案，使得在主要使用他们选择的后端语言的同时，也能够构建现代 Web 应用程序的 UI。例如，在 Rails 生态系统中，这催生了诸如 Turbo Hotwire 和 Stimulus 等库的诞生。
在 Laravel 生态系统中，主要通过使用 PHP 来创建现代、动态前端的需求催生了 Laravel Livewire 和 Alpine.js 的诞生。
Livewire
Laravel Livewire 是一个用于构建由 Laravel 驱动的框架，其构建的前端感觉就像使用 React、Svelte 和 Vue 等现代 JavaScript 框架构建的前端一样动态、现代和生动。
使用 Livewire 时，你将创建 Livewire“组件”，这些组件渲染 UI 的离散部分，并公开可以从应用程序前端调用和交互的方法和数据。例如，一个简单的“计数器”组件可能如下所示：
<?php
use Livewire\Component;
new class extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
};
?>
<div>
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
</div>如你所见，Livewire 使你能够编写新的 HTML 属性，例如 wire:click，它将 Laravel 应用程序的前端和后端连接起来。此外，你可以使用简单的 Blade 表达式渲染组件的当前状态。
对许多人来说，Livewire 彻底改变了使用 Laravel 进行前端开发的方式，使他们能够在构建现代、动态 Web 应用程序的同时，仍然停留在熟悉的 Laravel 环境中。通常，使用 Livewire 的开发者还会利用 Alpine.js 来在需要的地方（例如为了渲染对话框窗口）将 JavaScript“点缀”到他们的前端。
如果你是 Laravel 新手，我们建议你先熟悉视图和 Blade 的基本用法。然后，查阅官方的 Laravel Livewire 文档，了解如何使用交互式 Livewire 组件将你的应用程序提升到一个新的水平。
启动套件
如果你希望使用 PHP 和 Livewire 构建前端，你可以利用我们的 Livewire 启动套件来快速启动你的应用程序开发。
使用 React、Svelte 或 Vue
尽管可以使用 Laravel 和 Livewire 构建现代前端，但许多开发者仍然倾向于利用 React、Svelte 或 Vue 等 JavaScript 框架的强大功能。这使开发者能够利用通过 NPM 提供的丰富的 JavaScript 包和工具生态系统。
然而，如果没有额外的工具，将 Laravel 与 React、Svelte 或 Vue 配对会使我们需要解决各种复杂的问题，例如客户端路由、数据水合和认证。客户端路由通常通过使用有主见的 React / Svelte / Vue 框架（如 Next 和 Nuxt）来简化；然而，当将像 Laravel 这样的后端框架与这些前端框架配对时，数据水合和认证仍然是复杂且繁琐的需要解决的问题。
此外，开发者需要维护两个独立的代码仓库，通常需要协调两个仓库的维护、发布和部署。虽然这些问题并非不可克服，但我们认为这不是一种高效或愉快的应用程序开发方式。
Inertia
幸运的是，Laravel 提供了两全其美的方案。Inertia 弥合了你的 Laravel 应用程序和你的现代 React、Svelte 或 Vue 前端之间的鸿沟，允许你使用 React、Svelte 或 Vue 构建完整的、现代的前端，同时利用 Laravel 的路由和控制器进行路由、数据水合和认证——所有这些都在一个单一的代码仓库中完成。通过这种方法，你可以享受 Laravel 和 React / Svelte / Vue 的全部功能，而不会削弱任何一个工具的能力。
将 Inertia 安装到你的 Laravel 应用程序后，你将像往常一样编写路由和控制器。但是，你将从一个 Inertia 页面，而不是从你的控制器返回一个 Blade 模板：
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;
class UserController extends Controller
{
/**
* Show the profile for a given user.
*/
public function show(string $id): Response
{
return Inertia::render('users/show', [
'user' => User::findOrFail($id)
]);
}
}一个 Inertia 页面对应一个 React、Svelte 或 Vue 组件，通常存储在应用程序的 resources/js/pages 目录中。通过 Inertia::render 方法提供给页面的数据将用于水合页面组件的“props”：
import Layout from '@/layouts/authenticated';
import { Head } from '@inertiajs/react';
export default function Show({ user }) {
return (
<Layout>
<Head title="Welcome" />
<h1>Welcome</h1>
<p>Hello {user.name}, welcome to Inertia.</p>
</Layout>
)
}如你所见，Inertia 允许你在构建前端时利用 React、Svelte 或 Vue 的全部功能，同时在你由 Laravel 驱动的后端和你由 JavaScript 驱动的前端之间提供了一个轻量级的桥梁。
服务端渲染
如果你因为应用程序需要服务端渲染而担心深入使用 Inertia，别担心。Inertia 提供了服务端渲染支持。并且，当你通过 Laravel Cloud 或 Laravel Forge 部署应用程序时，确保 Inertia 的服务端渲染进程始终运行是轻而易举的。
启动套件
如果你希望使用 Inertia 和 React / Svelte / Vue 构建前端，你可以利用我们的 React、Svelte 或 Vue 应用启动套件来快速启动你的应用程序开发。这些启动套件都使用 Inertia、React / Svelte / Vue、Tailwind 和 Vite 构建了应用程序的后端和前端认证流程，以便你可以开始构建你的下一个伟大想法。
资源打包
无论你选择使用 Blade 和 Livewire 还是使用 React / Svelte / Vue 和 Inertia 来开发前端，你都可能需要将应用程序的 CSS 打包成可用于生产环境的资源。当然，如果你选择使用 React、Svelte 或 Vue 构建应用程序的前端，你还需要将你的组件打包成浏览器可用的 JavaScript 资源。
默认情况下，Laravel 使用 Vite 来打包你的资源。Vite 提供了闪电般的构建速度和在本地开发期间近乎即时的热模块替换（HMR）。在所有新的 Laravel 应用程序中，包括那些使用我们的启动套件的应用程序，你都会找到一个 vite.config.js 文件，它加载了我们轻量级的 Laravel Vite 插件，这使得 Vite 与 Laravel 应用程序一起使用成为一种乐趣。
开始使用 Laravel 和 Vite 的最快方法是使用我们的应用启动套件开始你的应用程序开发，这些套件通过提供前端和后端认证脚手架来快速启动你的应用程序。
NOTE
有关在 Laravel 中使用 Vite 的更详细文档，请参阅我们关于资源打包和编译的专门文档。