前端
简介
使用 Laravel 构建应用时，前端开发主要有两种方式，取决于你希望用 PHP 构建前端，还是使用 React、Svelte、Vue 等 JavaScript 框架。下文将分别讨论这两种选项，帮助你为应用选择最合适的前端方案。
使用 PHP
PHP 与 Blade
过去，大多数 PHP 应用使用夹杂 PHP echo 语句的简单 HTML 模板向浏览器渲染 HTML，以展示请求期间从数据库取出的数据：
<div>
<?php foreach ($users as $user): ?>
Hello, <?php echo $user->name; ?> <br />
<?php endforeach; ?>
</div><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 的某一部分，并暴露可从前端调用与交互的方法和数据。例如，一个简单的「Counter」组件可能如下：
<?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 让你能编写如 wire:click 这类新 HTML 属性，连接 Laravel 应用的前后端。此外，你还可用简单的 Blade 表达式渲染组件的当前状态。
对许多人来说，Livewire 彻底改变了用 Laravel 做前端开发的方式，让他们能留在熟悉的 Laravel 中构建现代、动态的 Web 应用。使用 Livewire 的开发者通常还会用 Alpine.js 在需要的地方「点缀」JavaScript，例如渲染对话框。
若你刚接触 Laravel，建议先熟悉视图与 Blade 的基本用法，再查阅官方 Laravel Livewire 文档，了解如何用交互式 Livewire 组件将应用提升到新水平。
起步套件
若希望用 PHP 与 Livewire 构建前端，可借助我们的 Breeze 或 Jetstream 起步套件 快速启动应用开发。这两套起步套件都会使用 Blade 与 Tailwind 搭建应用的前后端认证流程，让你可以直接开始构建下一个大创意。
使用 Vue / React
尽管可以用 Laravel 与 Livewire 构建现代前端，许多开发者仍更倾向发挥 React、Svelte 或 Vue 等 JavaScript 框架的力量，从而利用 NPM 上丰富的 JavaScript 包与工具生态。
然而，若没有额外工具，将 Laravel 与 React、Svelte 或 Vue 搭配使用时，仍需解决客户端路由、数据注水与认证等一系列复杂问题。客户端路由常可通过 Next、Nuxt 等约定性强的 React / Svelte / Vue 框架简化；但将 Laravel 这类后端框架与这些前端框架搭配时，数据注水与认证仍然复杂繁琐。
此外，开发者还需要维护两个独立代码仓库，并常需协调两边的维护、发布与部署。这些问题并非无法解决，但我们并不认为这是高效或愉悦的开发方式。
Inertia
幸运的是，Laravel 能兼得两者之长。Inertia 弥合了 Laravel 应用与现代 Vue 或 React 前端之间的鸿沟，让你能用 Vue 或 React 构建完整的现代前端，同时利用 Laravel 路由与控制器处理路由、数据注水与认证——且都在同一代码仓库中。这样你既能发挥 Laravel 与 Vue / React 的全部能力，又不会削弱任一工具的能力。
在 Laravel 应用中安装 Inertia 后，你仍像往常一样编写路由与控制器。不过，控制器不再返回 Blade 模板，而是返回 Inertia 页面：
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
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/Profile', [
'user' => User::findOrFail($id)
]);
}
}Inertia 页面对应一个 React、Svelte 或 Vue 组件，通常存放在应用的 resources/js/pages 目录。通过 Inertia::render 传给页面的数据会用于注水页面组件的「props」：
<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/vue3';
const props = defineProps(['user']);
</script>
<template>
<Head title="User Profile" />
<Layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Profile
</h2>
</template>
<div class="py-12">
Hello, {{ user.name }}
</div>
</Layout>
</template>可以看到，Inertia 让你在构建前端时充分发挥 React、Svelte 或 Vue 的能力，同时在 Laravel 驱动的后端与 JavaScript 驱动的前端之间提供轻量桥梁。
服务端渲染
若因应用需要服务端渲染而对 Inertia 有顾虑，不必担心。Inertia 提供服务端渲染支持。通过 Laravel Cloud 或 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 开始开发——这是我们最简单的起步套件，通过提供前后端认证脚手架帮助你快速起步。
INFO
关于在 Laravel 中使用 Vite 的更详细文档，请参阅我们关于打包与编译资源的专门文档。