前端

介绍
使用 PHP
使用 Vue / React
- Inertia
- 启动工具包
打包资产

介绍

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

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

使用 PHP

PHP & Blade

在过去，大多数 PHP 应用通过简单的 HTML 模板和 PHP echo 语句将 HTML 渲染到浏览器，这些语句在请求期间渲染从数据库检索的数据：

blade

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

在 Laravel 中，这种渲染 HTML 的方法仍然可以通过视图和 Blade 实现。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

<?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');
    }
}

相应的计数器模板将如下编写：

blade

<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

<?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"：

vue

<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 的更详细文档，请参见我们关于打包和编译资产的专门文档。

前端 ​

介绍 ​

使用 PHP ​

PHP & Blade ​

不断增长的期望 ​

Livewire ​

启动工具包 ​

使用 Vue / React ​

Inertia ​

服务器端渲染 ​

启动工具包 ​

打包资产 ​

前端

介绍

使用 PHP

PHP & Blade

不断增长的期望

Livewire

启动工具包

使用 Vue / React

Inertia

服务器端渲染

启动工具包

打包资产