前端

簡介
使用 PHP
使用 React、Svelte 或 Vue
- Inertia
- 入門套件
打包資源

簡介

Laravel 是一個後端框架，提供建立現代 Web 應用程式所需的所有功能，如路由、驗證、快取、佇列、檔案儲存等。然而，我們認為為開發者提供一個美麗的全端體驗非常重要，包括建立應用程式前端的強大方法。

在使用 Laravel 建立應用程式時，有兩種主要方法來處理前端開發，您選擇哪種方法取決於您是想透過利用 PHP 還是使用 React、Svelte 和 Vue 等 JavaScript 框架來建立前端。我們將在下面討論這兩種選項，以便您可以就應用程式前端開發的最佳方法做出明智的決定。

使用 PHP

PHP 和 Blade

過去，大多數 PHP 應用程式使用簡單的 HTML 模板結合 PHP echo 語句來向瀏覽器呈現 HTML，這些語句渲染在請求期間從資料庫檢索的資料：

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

在 Laravel 中，這種渲染 HTML 的方法仍然可以使用視圖和 Blade 來實現。Blade 是一個極其輕量級的模板語言，提供了方便、簡潔的語法來顯示資料、迭代資料等：

<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 的離散部分，並暴露可以從應用程式前端調用和互動的方法和資料。例如，一個簡單的「計數器」元件可能如下所示：

<?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 的前端開發，使他們能夠在建立現代化、動態 Web 應用程式的同時，保持在 Laravel 的舒適環境中。通常，使用 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 配對將使我們需要解決各種複雜的問題，如客戶端路由、資料填充和身份驗證。客戶端路由通常透過使用 Next 和 Nuxt 等有主見的 React / Svelte / Vue 框架來簡化；然而，將 Laravel 等後端框架與這些前端框架配對時，資料填充和身份驗證仍然是複雜且繁瑣的問題。

此外，開發者需要維護兩個獨立的程式碼儲存庫，通常需要在兩個儲存庫之間協調維護、發佈和部署。雖然這些問題並非不可克服，但我們認為這不是一種高效或愉快的開發應用程式的方式。

Inertia

幸運的是，Laravel 提供了兩全其美的解決方案。Inertia 填補了 Laravel 應用程式與現代 React、Svelte 或 Vue 前端之間的差距，允許您使用 React、Svelte 或 Vue 建立功能齊全的現代化前端，同時利用 Laravel 路由和控制器進行路由、資料填充和身份驗證——全部在一個程式碼儲存庫中。使用這種方法，您可以享受 Laravel 和 React / Svelte / Vue 的全部功能，而不會削弱任何一個工具的能力。

將 Inertia 安裝到 Laravel 應用程式後，您可以正常編寫路由和控制器。但是，您將返回一個 Inertia 頁面，而不是從控制器返回 Blade 模板：

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

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 的最快方法是使用我們的應用程式入門套件開始應用程式的開發，這些入門套件透過提供前端和後端身份驗證腳手架來快速啟動您的應用程式。

[!NOTE] 有關在 Laravel 中使用 Vite 的更詳細文檔，請參閱我們關於打包和編譯資源的專門文檔。