前端
介绍
Laravel 是一个后端框架，提供构建现代 web 应用所需的所有功能，如 路由、验证、缓存、队列、文件存储 等。然而，我们认为为开发者提供一个美丽的全栈体验是重要的，包括构建应用前端的强大方法。
在使用 Laravel 构建应用时，有两种主要方式来处理前端开发，您选择哪种方法取决于您是希望通过 PHP 构建前端，还是使用 JavaScript 框架如 Vue 和 React。我们将在下面讨论这两种选项，以便您可以就应用前端开发的最佳方法做出明智的决定。
使用 PHP
PHP & Blade
在过去，大多数 PHP 应用通过简单的 HTML 模板和 PHP echo 语句将 HTML 渲染到浏览器，这些语句在请求期间渲染从数据库检索的数据：
<div>
<?php foreach ($users as $user): ?>
你好，<?php echo $user->name; ?> <br />
<?php endforeach; ?>
</div>在 Laravel 中，这种渲染 HTML 的方法仍然可以通过 视图 和 Blade 实现。Blade 是一种极其轻量的模板语言，提供方便、简短的语法来显示数据、迭代数据等：
<div>
@foreach ($users as $user)
你好，{{ $user->name }} <br />
@endforeach
</div>以这种方式构建应用时，表单提交和其他页面交互通常会从服务器接收一个全新的 HTML 文档，整个页面由浏览器重新渲染。即使在今天，许多应用可能非常适合使用简单的 Blade 模板构建其前端。
不断增长的期望
然而，随着用户对 web 应用的期望不断提高，许多开发者发现需要构建更动态的前端，交互体验更加精致。因此，一些开发者选择开始使用 JavaScript 框架如 Vue 和 React 来构建应用的前端。
其他开发者则更愿意坚持使用他们熟悉的后端语言，开发出允许在主要使用他们选择的后端语言的同时构建现代 web 应用 UI 的解决方案。例如，在 Rails 生态系统中，这催生了 Turbo Hotwire 和 Stimulus 等库的创建。
在 Laravel 生态系统中，创建现代动态前端的需求主要使用 PHP 导致了 Laravel Livewire 和 Alpine.js 的出现。
Livewire
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 的前端开发，使他们能够在构建现代动态 web 应用时保持在 Laravel 的舒适区内。通常，使用 Livewire 的开发者还会利用 Alpine.js 在前端仅在需要的地方 "撒上" JavaScript，例如为了渲染对话窗口。
如果您是 Laravel 新手，我们建议您先熟悉 视图 和 Blade 的基本用法。然后，查阅官方 Laravel Livewire 文档，了解如何通过交互式 Livewire 组件将您的应用提升到一个新水平。
启动工具包
如果您希望使用 PHP 和 Livewire 构建前端，可以利用我们的 Breeze 或 Jetstream 启动工具包 来快速启动应用的开发。这两个启动工具包使用 Blade 和 Tailwind 构建应用的后端和前端身份验证流程，以便您可以直接开始构建下一个伟大的想法。
使用 Vue / React
尽管可以使用 Laravel 和 Livewire 构建现代前端，但许多开发者仍然更喜欢利用 JavaScript 框架如 Vue 或 React 的强大功能。这使开发者能够利用通过 NPM 提供的丰富 JavaScript 包和工具生态系统。
然而，如果没有额外的工具，将 Laravel 与 Vue 或 React 配对将使我们需要解决各种复杂的问题，如客户端路由、数据水合和身份验证。客户端路由通常通过使用有见地的 Vue / React 框架如 Nuxt 和 Next 来简化；然而，数据水合和身份验证在将后端框架如 Laravel 与这些前端框架配对时仍然是复杂且繁琐的问题。
此外，开发者还需要维护两个独立的代码库，通常需要协调两个代码库之间的维护、发布和部署。虽然这些问题并非不可克服，但我们认为这不是一种高效或愉快的应用开发方式。
Inertia
幸运的是，Laravel 提供了两全其美的解决方案。Inertia 在您的 Laravel 应用和现代 Vue 或 React 前端之间架起了桥梁，使您能够使用 Vue 或 React 构建完整的现代前端，同时利用 Laravel 路由和控制器进行路由、数据水合和身份验证——所有这些都在一个代码库中。通过这种方法，您可以享受 Laravel 和 Vue / React 的全部功能，而不会削弱任何工具的能力。
在将 Inertia 安装到您的 Laravel 应用后，您将像往常一样编写路由和控制器。然而，您将不再从控制器返回 Blade 模板，而是返回一个 Inertia 页面：
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
class UserController extends Controller
{
/**
* 显示给定用户的个人资料。
*
* @param int $id
* @return \Inertia\Response
*/
public function show($id)
{
return Inertia::render('Users/Profile', [
'user' => User::findOrFail($id)
]);
}
}Inertia 页面对应于 Vue 或 React 组件，通常存储在应用的 resources/js/Pages 目录中。通过 Inertia::render 方法传递给页面的数据将用于水合页面组件的 "props"：
<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
const props = defineProps(['user']);
</script>
<template>
<Head title="用户资料" />
<Layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
个人资料
</h2>
</template>
<div class="py-12">
你好，{{ user.name }}
</div>
</Layout>
</template>正如您所看到的，Inertia 允许您在构建前端时充分利用 Vue 或 React 的全部功能，同时在 Laravel 驱动的后端和 JavaScript 驱动的前端之间提供轻量级的桥梁。
服务器端渲染
如果您担心使用 Inertia，因为您的应用需要服务器端渲染，请不要担心。Inertia 提供了 服务器端渲染支持。而且，当通过 Laravel Forge 部署应用时，确保 Inertia 的服务器端渲染过程始终运行是非常简单的。
启动工具包
如果您希望使用 Inertia 和 Vue / React 构建前端，可以利用我们的 Breeze 或 Jetstream 启动工具包 来快速启动应用的开发。这两个启动工具包使用 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 Breeze 启动应用的开发，这是我们最简单的启动工具包，通过提供前端和后端身份验证脚手架来快速启动您的应用。
有关使用 Vite 与 Laravel 的更详细文档，请参见我们关于打包和编译资产的 专门文档。