前端

简介
使用 PHP
使用 React、Svelte 或 Vue
- Inertia
- 入门套件
资源打包

简介

Laravel 是一个后端框架，提供了构建现代 Web 应用所需的所有功能，例如路由、验证、缓存、队列、文件存储等。然而，我们相信为开发者提供美妙的全栈体验同样重要，包括构建应用前端的强大方法。

在使用 Laravel 构建应用时，主要有两种前端开发方式。选择哪种方法取决于您是希望通过 PHP 来利用前端，还是使用 React、Svelte 和 Vue 等 JavaScript 框架。我们将在下面讨论这两种方案，以便您可以针对自己应用的前端开发做出明智的决定。

使用 PHP

PHP 与 Blade

过去，大多数 PHP 应用通过穿插 PHP echo 语句的简单 HTML 模板向浏览器渲染 HTML，这些语句用于渲染请求期间从数据库检索的数据。

1<div>
2    <?php foreach ($users as $user): ?>
3        Hello, <?php echo $user->name; ?> <br />
4    <?php endforeach; ?>
5</div>

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

在 Laravel 中，这种渲染 HTML 的方法仍然可以通过视图（views）和 Blade 来实现。Blade 是一种极其轻量级的模板语言，它提供了简洁、方便的语法来显示数据、遍历数据等。

1<div>
2    @foreach ($users as $user)
3        Hello, {{ $user->name }} <br />
4    @endforeach
5</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 的离散部分，并暴露可以从应用前端调用和交互的方法与数据。例如，一个简单的“计数器”组件可能如下所示：

 1<?php
 2 
 3use Livewire\Component;
 4 
 5new class extends Component
 6{
 7    public $count = 0;
 8 
 9    public function increment()
10    {
11        $this->count++;
12    }
13};
14?>
15 
16<div>
17    <button wire:click="increment">+</button>
18    <h1>{{ $count }}</h1>
19</div>

<?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 的前端开发，让他们在保持 Laravel 开发舒适度的同时，构建出现代化的动态 Web 应用。通常，使用 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 搭配使用会让我们面临一系列复杂问题的挑战，例如客户端路由、数据水合（hydration）和身份验证。客户端路由通常通过使用主张性的 React / Svelte / Vue 框架（如 Next 和 Nuxt）来简化；然而，将像 Laravel 这样的后端框架与这些前端框架配对时，数据水合和身份验证仍然是复杂且棘手的问题。

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

Inertia

值得庆幸的是，Laravel 提供了两全其美的解决方案。Inertia 架起了您的 Laravel 应用与现代 React、Svelte 或 Vue 前端之间的桥梁，允许您使用 React、Svelte 或 Vue 构建功能完备的现代前端，同时利用 Laravel 路由和控制器进行路由、数据水合和身份验证——所有这些都在同一个代码仓库内完成。通过这种方法，您可以享受 Laravel 和 React / Svelte / Vue 的全部强大功能，而无需削弱任一工具的能力。

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

 1<?php
 2 
 3namespace App\Http\Controllers;
 4 
 5use App\Models\User;
 6use Inertia\Inertia;
 7use Inertia\Response;
 8 
 9class UserController extends Controller
10{
11    /**
12     * Show the profile for a given user.
13     */
14    public function show(string $id): Response
15    {
16        return Inertia::render('users/show', [
17            'user' => User::findOrFail($id)
18        ]);
19    }
20}

<?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）”。

 1import Layout from '@/layouts/authenticated';
 2import { Head } from '@inertiajs/react';
 3 
 4export default function Show({ user }) {
 5    return (
 6        <Layout>
 7            <Head title="Welcome" />
 8            <h1>Welcome</h1>
 9            <p>Hello {user.name}, welcome to Inertia.</p>
10        </Layout>
11    )
12}

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 最快的方法是使用我们的应用入门套件进行开发，它通过提供前端和后端身份验证脚手架来快速启动您的应用。

有关在 Laravel 中使用 Vite 的详细文档，请参阅我们关于打包和编译资源专题文档。

前端

简介

使用 PHP

PHP 与 Blade

日益增长的期望

Livewire

入门套件

使用 React、Svelte 或 Vue

Inertia

服务端渲染

入门套件

资源打包

在此页面上

产品

Packages

资源

合作伙伴