Laravel 是一个后端框架，它提供了构建现代 Web 应用程序所需的所有功能，例如路由、验证、缓存、队列、文件存储等等。然而，我们认为为开发者提供美妙的全栈体验非常重要，这包括构建应用程序前端的强大方法。
在使用 Laravel 构建应用程序时，处理前端开发主要有两种方式，而你选择哪种方式，则取决于你是希望通过利用 PHP 来构建前端，还是使用 Vue 和 React 等 JavaScript 框架。我们将在下面讨论这两种选项，以便你能够就哪种前端开发方法最适合你的应用程序做出明智的决定。
在过去，大多数 PHP 应用程序使用简单的 HTML 模板将 HTML 渲染到浏览器，这些模板中散布着用于渲染在请求期间从数据库中检索到的数据的 PHP echo 语句：
<div>
<?php foreach ($users as $user): ?>
Hello, <?php echo $user->name; ?> <br />
<?php endforeach; ?>
</div>在 Laravel 中，这种渲染 HTML 的方法仍然可以通过使用 视图 和 Blade 来实现。Blade 是一个非常轻量级的模板语言，它提供了方便、简洁的语法来显示数据、迭代数据等等：
<div>
@foreach ($users as $user)
Hello, {{ $user->name }} <br />
@endforeach
</div>以这种方式构建应用程序时，表单提交和其他页面交互通常会从服务器接收一个全新的 HTML 文档，并且整个页面由浏览器重新渲染。即使在今天，许多应用程序可能仍然非常适合使用简单的 Blade 模板以这种方式构建其前端。
然而，随着用户对 Web 应用的期望日趋成熟，许多开发人员发现有必要构建交互感觉更精致的动态前端。鉴于此，一些开发人员选择开始使用 JavaScript 框架（例如 Vue 和 React）构建其应用程序的前端。
另一些人则倾向于沿用他们熟悉的后端语言，并开发了允许构建现代 Web 应用程序 UI 的解决方案，同时仍主要利用他们选择的后端语言。例如，在 Rails 生态系统中，这催生了诸如 Turbo Hotwire，以及 Stimulus 等库的创建。
在 Laravel 生态系统中，主要是通过使用 PHP 来创建现代化、动态前端的需求促成了 Laravel Livewire 和 Alpine.js 的创建。
Laravel Livewire 是一个用于构建由 Laravel 提供支持的前端框架这些前端感觉动态、现代、充满活力 就像使用现代 JavaScript 框架如 Vue 和 React 构建的前端一样。
当使用 Livewire 时，你将创建 Livewire“组件”，渲染你 UI 的一个离散部分，并暴露可从你应用程序前端调用和交互的方法和数据。例如，一个简单的“计数器”组件可能如下所示：
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}并且，用于计数器的相应模板将这样编写：
<div>
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
</div>如你所见，Livewire 使你能够编写新的 HTML 属性例如 wire:click 连接你的 Laravel 应用程序的前端和后端。此外，你可以使用简单的 Blade 表达式渲染你组件的当前状态。
对许多人来说，Livewire 已经彻底改变了 Laravel 的前端开发，让他们能够舒适地停留在 Laravel 生态中，同时构建现代、动态的 Web 应用程序。通常，使用 Livewire 的开发者也会利用 Alpine.js 在他们的前端“点缀”JavaScript，仅在需要的地方，例如为了渲染对话框窗口。
如果您是 Laravel 新手，我们建议您先熟悉 视图 和 Blade 的基本用法。然后，查阅官方的 Laravel Livewire 文档，学习如何利用交互式 Livewire 组件将您的应用程序提升到一个新的水平。
如果您希望使用 PHP 和 Livewire 构建前端，您可以利用我们的 Livewire 入门套件 来加速您的应用程序开发。
尽管可以使用 Laravel 和 Livewire 构建现代前端，但许多开发者仍然喜欢利用像 React 或 Vue 这样的 JavaScript 框架的强大功能。这使得开发者能够利用通过 NPM 获得的丰富的 JavaScript 包和工具生态系统。
然而，在没有额外工具的情况下，将Laravel与React或Vue结合使用，将会使我们面临需要解决的各种复杂问题，例如客户端路由、数据注水和认证。客户端路由通常通过使用有主见的React/Vue框架得到简化，例如 Next 和 Nuxt；然而，当将像Laravel这样的后端框架与这些前端框架结合使用时，数据注水和认证仍然是复杂且繁琐的问题，需要解决。
此外，开发者们不得不维护两个独立的代码仓库，常常需要在这两个仓库之间协调维护、发布和部署。尽管这些问题并非不可克服，但我们不认为这是一种富有成效或令人愉悦的应用程序开发方式。
值得庆幸的是, Laravel 兼具两者的优点. Inertia 弥合了您的 Laravel 应用程序与您的现代 React 或 Vue 前端之间的鸿沟, 让您能够使用 React 或 Vue 构建功能齐全的现代前端, 同时利用 Laravel 路由和控制器进行路由、数据填充和身份验证 — 所有这些都在一个代码仓库中. 通过这种方法, 您可以享受 Laravel 和 React / Vue 的全部强大功能, 而不会削弱任何一种工具的能力.
在将 Inertia 安装到你的 Laravel 应用程序后，你将像往常一样编写路由和控制器。然而，你将不再从控制器返回 Blade 模板，而是返回一个 Inertia 页面：
<?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 或 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 或 Vue 的全部能力来构建你的前端，同时提供了一个轻量级的桥梁，连接你的 Laravel 驱动的后端和你的 JavaScript 驱动的前端。
如果您担心由于您的应用程序需要服务器端渲染而无法投入使用 Inertia，不用担心。Inertia 提供 服务器端渲染支持。并且，当通过 Laravel Cloud 或 Laravel Forge 部署您的应用程序时，确保 Inertia 的服务器端渲染进程始终运行将轻而易举。
如果您想使用 Inertia 和 Vue / React 构建您的前端，您可以利用我们的 React 或 Vue 应用程序入门套件 来快速启动您的应用程序开发。这两种入门套件都使用 Inertia、Vue / React、Tailwind 和 Vite 来搭建您的应用程序的后端和前端认证流程，以便您能开始构建您的下一个伟大构想。
无论你选择使用 Blade 和 Livewire 开发前端，还是使用 Vue / React 和 Inertia 开发，你都可能需要将应用的 CSS 打包成可用于生产的资产。当然，如果你选择使用 Vue 或 React 构建应用的前端，你还需要将你的组件打包成浏览器可用的 JavaScript 资产。
默认情况下，Laravel 利用 Vite 来打包你的资产。Vite 提供极快的构建时间以及近乎即时的热模块替换（HMR）在本地开发期间。在所有新的 Laravel 应用程序中，包括那些使用我们 入门套件 的，你将找到一个 vite.config.js 文件加载了我们轻量级的 Laravel Vite 插件使得 Vite 在 Laravel 应用程序中用起来非常愉快。
开始使用 Laravel 和 Vite 的最快方式是，通过使用我们的应用程序入门套件来开始您的应用程序开发，这些套件通过提供前端和后端身份验证脚手架，快速启动您的应用程序。
[!注意]
有关在 Laravel 中使用 Vite 的更详细文档，请参阅我们的关于捆绑和编译你的资源的专门文档。