前端 – 乌鸦嘴文档中心

简介

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

在使用 Laravel 构建应用程序时，有两种主要的前端开发方法，您选择哪种方法取决于您是想通过利用 PHP 还是使用诸如 Vue 和 React 这样的 JavaScript 框架来构建前端。我们将在下面讨论这两种选择，以便您可以就应用程序前端开发的最佳方法做出明智的决策。

使用 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 应用程序的期望逐渐成熟，许多开发人员发现需要构建更具动态性、交互性更强的前端。鉴于此，一些开发人员选择开始使用诸如 Vue 和 React 这样的 JavaScript 框架来构建应用程序的前端。

另一些开发人员则更愿意坚持使用他们熟悉的后端语言，他们开发了一些解决方案，允许在主要使用他们选择的后端语言的同时构建现代 Web 应用程序的用户界面。例如，在Rails (opens in a new tab)生态系统中，这促使了诸如Turbo (opens in a new tab)、Hotwire (opens in a new tab)和Stimulus (opens in a new tab)等库的创建。

在 Laravel 生态系统中，主要使用 PHP 创建现代、动态前端的需求导致了Laravel Livewire (opens in a new tab)和Alpine.js (opens in a new tab)的创建。

Livewire

Laravel Livewire (opens in a new tab) 是一个用于构建由 Laravel 驱动的前端框架，其感觉如同使用现代 JavaScript 框架（如 Vue 和 React）构建的前端一样动态、现代且充满活力。

当使用 Livewire 时，您将创建 Livewire“组件”，这些组件会渲染您用户界面的一个离散部分，并公开可以从您应用程序的前端调用和交互的方法和数据。例如，一个简单的“计数器”组件可能如下所示：

<?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 (opens in a new tab) 在需要的地方（例如为了渲染一个对话框窗口）将 JavaScript “撒”到他们的前端上。

如果您是 Laravel 的新手，我们建议您熟悉视图和 Blade 的基本用法。然后，查阅官方的 Laravel Livewire 文档 (opens in a new tab)，了解如何使用交互式 Livewire 组件将您的应用程序提升到一个新的水平。

入门套件

如果您想使用 PHP 和 Livewire 构建您的前端，您可以利用我们的 Breeze 或 Jetstream 入门套件来快速启动您应用程序的开发。这两个入门套件使用 Blade 和 Tailwind (opens in a new tab) 为您的应用程序的后端和前端认证流程搭建框架，以便您可以轻松地开始构建您的下一个伟大创意。

使用 Vue / React

尽管可以使用 Laravel 和 Livewire 构建现代前端，但许多开发人员仍然更喜欢利用像 Vue 或 React 这样的 JavaScript 框架的强大功能。这使开发人员能够利用通过 NPM 可用的丰富的 JavaScript 包和工具生态系统。

然而，如果没有额外的工具，将 Laravel 与 Vue 或 React 配对会使我们需要解决各种复杂的问题，例如客户端路由、数据水化和认证。客户端路由通常可以通过使用有主见的 Vue / React 框架（如 Nuxt (opens in a new tab) 和 Next (opens in a new tab)）来简化；但是，当将像 Laravel 这样的后端框架与这些前端框架配对时，数据水化和认证仍然是复杂且麻烦的问题。

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

Inertia（惯性）

值得庆幸的是，Laravel 提供了两全其美的方案。Inertia (opens in a new tab) 弥合了您的 Laravel 应用程序与现代 Vue 或 React 前端之间的差距，允许您使用 Vue 或 React 构建成熟的现代前端，同时利用 Laravel 的路由和控制器进行路由、数据水化和认证——所有这些都在一个代码库中完成。通过这种方法，您可以充分发挥 Laravel 和 Vue / React 的全部功能，而不会削弱任何一种工具的能力。

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

<?php
 
namespace App\Http\Controllers;
 
use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;
 
class UserController extends Controller
{
    /**
     * 显示给定用户的个人资料。
     */
    public function show(string $id): Response
    {
        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/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">
                个人资料
            </h2>
        </template>
 
        <div class="py-12">
            您好，{{ user.name }}
        </div>
    </Layout>
</template>

如您所见，Inertia 允许您在构建前端时充分利用 Vue 或 React 的全部功能，同时在您的 Laravel 驱动的后端和 JavaScript 驱动的前端之间提供一个轻量级的桥梁。

服务器端渲染

如果您因为您的应用程序需要服务器端渲染而对进入 Inertia 感到担忧，不必担心。Inertia 提供了服务器端渲染支持 (opens in a new tab)。并且，当通过Laravel Forge (opens in a new tab)部署您的应用程序时，确保 Inertia 的服务器端渲染过程始终运行是一件轻而易举的事情。

入门套件

如果您想使用 Inertia 和 Vue / React 构建您的前端，您可以利用我们的 Breeze 或 Jetstream 入门套件来快速启动您的应用程序的开发。这两个入门套件都使用 Inertia、Vue / React、Tailwind (opens in a new tab) 和 Vite (opens in a new tab) 搭建您的应用程序的后端和前端认证流程，以便您可以开始构建您的下一个伟大创意。

捆绑资产

无论您选择使用 Blade 和 Livewire 还是 Vue / React 和 Inertia 来开发您的前端，您可能都需要将您的应用程序的 CSS 捆绑到生产就绪的资产中。当然，如果您选择使用 Vue 或 React 构建您的应用程序的前端，您还需要将您的组件捆绑到浏览器就绪的 JavaScript 资产中。

默认情况下，Laravel 使用Vite (opens in a new tab)来捆绑您的资产。Vite 在本地开发期间提供了极快的构建时间和近乎即时的热模块替换（HMR）。在所有新的 Laravel 应用程序中，包括那些使用我们的入门套件的应用程序，您会发现一个 vite.config.js 文件，该文件加载了我们的轻量级 Laravel Vite 插件，使 Vite 与 Laravel 应用程序一起使用变得愉快。

使用 Laravel Breeze 开始您的应用程序开发是使用 Laravel 和 Vite 的最快方法，这是我们最简单的入门套件，通过提供前端和后端认证脚手架来快速启动您的应用程序。

[!NOTE]
有关在 Laravel 中使用 Vite 的更详细文档，请参阅我们的关于捆绑和编译您的资产的专用文档。

目录结构入门套件