# 前端

- [简介](#introduction)
- [使用 PHP](#using-php)
    - [PHP 和 Blade](#php-and-blade)
    - [Livewire](#livewire)
    - [入门套件](#php-starter-kits)
- [使用 React、Svelte 或 Vue](#using-react-svelte-or-vue)
    - [Inertia](#inertia)
    - [入门套件](#inertia-starter-kits)
- [打包资源](#bundling-assets)

<a name="introduction"></a>
## 简介
Laravel 是一个后端框架，它提供了构建现代 Web 应用程序所需的所有功能，例如 [路由](/docs/laravel/13.x/routing), [验证](/docs/laravel/13.x/validation), [缓存](/docs/laravel/13.x/cache), [队列](/docs/laravel/13.x/queues), [文件存储](/docs/laravel/13.x/filesystem) 等等。我们更致力于为开发者打造卓越的全栈体验，提供强大的前端构建方案。

在使用 Laravel 构建应用程序时，处理前端开发主要有两种方式，选择哪种方式取决于你是想利用 PHP 构建前端，还是想使用 React、Svelte 和 Vue 等 JavaScript 框架。我们将在下面详细解析这两种方案，助你根据应用场景作出最优选。

<a name="using-php"></a>
## 使用 PHP

<a name="php-and-blade"></a>
### PHP 和 Blade

在过去，大多数 PHP 应用程序使用简单的 HTML 模板将 HTML 渲染到浏览器，这些模板中散布着 PHP `echo` 语句，用于渲染在请求期间从数据库检索的数据：


```blade
<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>
```
在 Laravel 中，仍然可以通过 [视图](/docs/laravel/13.x/views) 和 [Blade](/docs/laravel/13.x/blade) 来实现这种渲染方法。Blade 是一个极其轻量级的模板语言，它提供了方便、简洁的语法来显示数据、遍历数据等等：

```blade
<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>
```



在这种方式下构建应用程序时，表单提交和其他页面交互通常会从服务器接收一个全新的 HTML 文档，浏览器随后重新渲染整个页面。即使在今天，许多应用程序也完全可以适合以这种方式使用简单的 Blade 模板来构建其前端。


<a name="growing-expectations"></a>
#### 不断增长的期望

然而，随着用户对 Web 应用体验的要求不断提高，许多开发者意识到需要构建更具动态性、交互感更强的前端界面。为此，部分开发者选择使用 React、Svelte 或 Vue 等 JavaScript 框架来构建前端。

另一些开发者则倾向于继续使用自己熟悉的后端语言，并开发出能构建现代 Web 应用 UI 的解决方案，同时仍主要依托后端语言。例如，在 [Rails](https://rubyonrails.org/) 生态中，催生了 [Turbo](https://turbo.hotwired.dev/)、[Hotwire](https://hotwired.dev/) 及 [Stimulus](https://stimulus.hotwired.dev/) 等库。

在 Laravel 生态中，主要通过使用 PHP 来创建现代、动态前端的需求催生了 [Laravel Livewire](https://livewire.laravel.com) 和 [Alpine.js](https://alpinejs.dev/)。

<a name="livewire"></a>
### Livewire

[Laravel Livewire](https://livewire.laravel.com) 是一个用于构建由 Laravel 驱动的前端框架，它能打造出与 React、Svelte 和 Vue 等现代 JavaScript 框架同样动态、现代且富有生命力的前端体验。

使用 Livewire 时，你将创建 Livewire 「组件」，每个组件渲染 UI 的一个独立部分，并公开可供前端调用和交互的方法与数据。例如，一个简单的「计数器」组件可能如下所示：
```php
<?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 让你能够编写 `wire:click` 这类新的 HTML 属性，从而将 Laravel 应用程序的前端与后端连接起来。此外，你还可以使用简单的 Blade 表达式来渲染组件的当前状态。

对于许多开发者而言，Livewire 彻底改变了 Laravel 前端开发的方式，让他们能够在熟悉的 Laravel 环境中可构建现代、动态的 Web 应用。通常，使用 Livewire 的开发者还会利用 [Alpine.js](https://alpinejs.dev/) 在需要的地方（例如为了渲染对话框窗口）将 JavaScript「点缀」到他们的前端。

如果你刚接触 Laravel，我们建议先熟悉[视图](/docs/laravel/13.x/views)和 [Blade](/docs/laravel/13.x/blade) 的基本用法。然后，查阅官方 的 [Laravel Livewire 文档](https://livewire.laravel.com/docs)，了解如何借助交互式 Livewire 组件将应用程序提升到新的高度。

<a name="php-starter-kits"></a>
### 入门套件

如果你希望使用 PHP 和 Livewire 构建前端，可以利用我们的 [Livewire 入门套件](/docs/laravel/13.x/starter-kits)来快速启动应用程序的开发。

<a name="using-react-svelte-or-vue"></a>
## 使用 React、Svelte 或 Vue

虽然使用 Laravel 和 Livewire 也能构建现代前端，但许多开发者仍然倾向于利用 React、Svelte 或 Vue 等 JavaScript 框架的强大功能。这使他们能够充分发挥 NPM 上丰富的 JavaScript 包和工具生态的优势。

然而，如果没有额外的工具支持，将 Laravel 与 React、Svelte 或 Vue 结合使用会带来一系列复杂问题，例如客户端路由、数据注入（data hydration）以及身份认证。客户端路由通常可以通过使用 [Next](https://nextjs.org/) 和 [Nuxt](https://nuxt.com/) 等 React / Svelte / Vue  框架来简化；但在将 Laravel 这样的后端框架与这些前端框架结合时，数据注入和身份认证仍然是复杂且繁琐的问题。


此外，开发者还需要维护两个独立的代码仓库，往往需要协调两个仓库之间的维护、发布和部署工作。虽然这些问题并非无法解决，但我们认为这并不是一种高效或令人愉悦的应用开发方式。

<a name="inertia"></a>
### Inertia

幸运的是，Laravel 提供了两全其美的解决方案。[Inertia](https://inertiajs.com) 在 Laravel 应用与现代 React、Svelte 或 Vue 前端之间架起了一座桥梁，让你能够使用 React、Svelte 或 Vue 构建功能完备的现代前端，同时仍然利用 Laravel 的路由和控制器来处理路由、数据注入和身份认证 —— 所有这些都在同一个代码仓库中完成。采用这种方式，你可以尽情享受 Laravel 和 React / Svelte / Vue 的全部强大功能，而不会削弱任何一个工具的能力。

将 Inertia 安装到 Laravel 应用后，你可以像往常一样编写路由和控制器。不过，控制器不再是返回 Blade 模板，而是返回一个 Inertia 页面：

```php
<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;

class UserController extends Controller
{
    /**
     * 显示给定用户的个人资料。
     */
    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）：

```jsx
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 驱动的前端之间搭建起一个轻量级的桥梁。

<a name="inertia-starter-kits"></a>
#### 服务器端渲染

如果你因为应用需要服务器端渲染而对使用 Inertia 有所顾虑，不必担心。Inertia 提供了[服务器端渲染支持](https://inertiajs.com/server-side-rendering)。而且，当你通过 [Laravel Cloud](https://cloud.laravel.com) 或 [Laravel Forge](https://forge.laravel.com) 部署应用时，确保 Inertia 的服务端渲染进程始终运行是轻而易举的。

<a name="inertia-starter-kits"></a>
### 入门套件

如果你希望使用 Inertia 和 React / Svelte / Vue 构建前端，可以利用我们的 [React、Svelte 或 Vue 应用入门套件](/docs/laravel/13.x/starter-kits)来快速启动应用开发。这些入门套件均使用 Inertia、React / Svelte / Vue、[Tailwind](https://tailwindcss.com) 和 [Vite](https://vitejs.dev) 搭建应用的后端和前端认证流程，让你能够立即着手打造下一个重大创意。

<a name="bundling-assets"></a>
## 打包资源

无论你选择使用 Blade 和 Livewire 还是 React / Svelte / Vue 与 Inertia 来开发前端，都可能需要将应用的 CSS 打包成可用于生产环境的资源文件。当然，如果你选择使用 React、Svelte 或 Vue 构建应用前端，还需要将你的组件打包成浏览器可直接运行的 JavaScript 资源文件。

默认情况下，Laravel 使用 [Vite](https://vitejs.dev) 来打包你的资源。Vite 提供了极快的构建速度，并在本地开发期间实现近乎即时的热模块替换（HMR）。在所有新的 Laravel 应用中，包括那些使用我们[入门套件](/docs/laravel/13.x/starter-kits)的应用，你会找到一个  `vite.config.js` 文件，它加载了我们的轻量级 Laravel Vite 插件，让你在 Laravel 应用中使用 Vite 变得轻松愉快。


最快上手 Laravel 和 Vite 的方式是使用我们的 [应用入门套件](/docs/laravel/13.x/starter-kits) 开始应用开发。这些入门套件为你提供了前后端认证脚手架，从而快速启动你的应用。

> [!NOTE]
> 关于在 Laravel 中使用 Vite 的更详细文档，请参阅我们关于[资源打包和编译的专门文档](/docs/laravel/13.x/vite)。