前端

簡介
使用 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

資源

合作伙伴