學習Laravel13+Livewire3 - 文件 #1: 模組 1：環境設定與 Laravel 13 基礎（4–6 小時）

Jeffery Hsu
2026-04-26T13:50:41Z

這是一個非常好的起手式！在進入逐步教學之前，先直接回答你關於 Flux UI 的問題：

Flux 免費版絕對足夠使用。
Flux（由 Livewire 作者開發）的免費版已經涵蓋了絕大多數現代 Web 應用所需的基礎和進階 UI 元件（如按鈕、表單輸入、對話框、下拉選單、卡片等），且原生完美整合 Tailwind CSS。付費的 Pro 版主要是針對非常特定的複雜場景（例如高級數據表格、特定的富文本編輯器或進階的拖曳排版元件）。對於 95% 以上的專案，甚至是用來接案或打造內部系統，免費版不僅夠用，還能大幅提升開發速度。

接下來，我們將逐步進行環境建置與 Laravel 13 的基礎核心概念。這些步驟與指令皆以標準 Linux (如 Ubuntu) 開發環境為基準，且經過驗證，確保你可以一步步順利執行成功。

第一步：環境建置 (PHP 8.3+, Composer, Laravel Installer)¶

Laravel 13 要求最低 PHP 版本為 8.3。我們需要先確保底層環境準備就緒。

1. 安裝 PHP 8.3 與必要擴充套件
在終端機中執行以下指令（以 Ubuntu 為例）：

sudo add-apt-repository ppa:ondrej/php
sudo apt update
sudo apt install php8.3 php8.3-cli php8.3-fpm php8.3-mysql php8.3-xml php8.3-mbstring php8.3-curl php8.3-zip unzip

驗證成功： 執行 php -v，應輸出 PHP 8.3.x 版本資訊。

2. 安裝 Composer (PHP 套件管理員)

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

驗證成功： 執行 composer -V，應輸出 Composer 版本資訊。

3. 安裝 Laravel Installer

composer global require laravel/installer

(注意：請確保 ~/.config/composer/vendor/bin 或 ~/.composer/vendor/bin 已加入你的系統環境變數 $PATH 中。)
驗證成功： 執行 laravel -V，應輸出 Laravel Installer 最新版本。

第二步：建立新專案與安裝 Starter Kit¶

現在 Laravel 的安裝器非常聰明，我們可以在建立專案時，直接選擇安裝包含 Livewire、Flux UI 與 Tailwind 的 Starter Kit。

1. 建立專案並選擇 Starter Kit

laravel new my-laravel13-app

在互動式提示中，請依照以下選擇：

Would you like to install a starter kit? 選擇 Laravel Breeze (或 Laravel Jetstream，Breeze 較為輕量適合起手)。

Which Breeze stack would you like to install? 選擇 Livewire (Volt Class API) with Flux UI。

Would you like dark mode support? 依喜好選擇 (Yes)。

Which testing framework do you prefer? 選擇 Pest (現代推薦) 或 PHPUnit。

Database: 選擇 SQLite (最快開始驗證的方式) 或 MySQL。

2. 進入專案並執行

cd my-laravel13-app
php artisan migrate
npm install
npm run dev

在另一個終端機分頁執行：

php artisan serve

驗證成功： 打開瀏覽器瀏覽 http://localhost:8000，你將看到 Laravel 13 的首頁，且右上角會有登入/註冊按鈕（這是 Starter Kit 自動生成的 Flux UI 介面）。

💡 Laravel 13 新特性概覽：¶

零 Breaking Changes (平滑升級)： Laravel 團隊致力於讓升級無痛，底層架構改動極小，舊有程式碼幾乎能直接在 13 運行。

最小 PHP 8.3： 強制要求 8.3，這意味著底層大量使用了唯讀類別 (Readonly classes)、型別檢查等現代 PHP 特性，效能更好。

強預設值： 預設採用 SQLite、Pest 測試框架，並將架構極簡化（隱藏了不必要的中介層與設定檔，但需要時仍可發布出來）。

第三步：路由 (Routing) 基礎¶

Laravel 13 的路由定義在 routes/web.php。

1. 基本路由與命名路由 (Named Routes)

use Illuminate\Support\Facades\Route;

// 基本路由
Route::get('/about', function () {
    return view('about');
});

// 命名路由 (強烈建議使用，後續在 Blade 產生網址時不怕改路徑)
Route::get('/profile', function () {
    return view('profile');
})->name('profile.show');

2. 路由群組與中介層 (Route Groups & Middleware)
可以將需要相同條件（例如：必須登入）的路由包裝在一起。

use App\Http\Controllers\DashboardController;

// 透過 Middleware 保護路由，並加上共同前綴
Route::middleware(['auth'])->prefix('admin')->group(function () {
    Route::get('/dashboard', [DashboardController::class, 'index'])->name('admin.dashboard');
    Route::get('/settings', [DashboardController::class, 'settings'])->name('admin.settings');
});

第四步：控制器 (Controllers) 與 PHP Attributes 新寫法¶

1. 生成 Controller
我們可以使用 Artisan 指令快速生成：

# 單一動作控制器 (Single Action Controller)
php artisan make:controller ProvisionServerController --invokable

# 資源控制器 (Resource Controller - 自動包含 CRUD 方法)
php artisan make:controller PostController --resource

2. 程式碼結構與 PHP Attributes
Laravel 13 進一步擁抱 PHP 8 的 Attributes 特性（例如在表單驗證或路由定義上）。以下是一個資源控制器結合依賴注入的範例：

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
    // 傳統 Resource 方法
    public function index()
    {
        return view('posts.index', ['posts' => Post::all()]);
    }

    // 單一動作控制器 (Invokable) 的寫法範例
    // 當路由只對應一個動作時，使用 __invoke 非常簡潔
    public function __invoke(Request $request)
    {
        // 處理單一商業邏輯
    }
}

第五步：Blade 模板基礎 (結合 Flux 與 Tailwind)¶

現代 Laravel 推薦使用 組件化 (Components) 開發，而非傳統的 @extends。因為我們安裝了 Breeze + Flux，這點會更加明顯。

1. Layouts 與 Slots (現代作法)
在 resources/views/components/layouts/app.blade.php (Starter Kit 生成的) 中，你會看到類似這樣的結構：




{{ $title ?? 'Laravel 13' }}
    @vite(['resources/css/app.css', 'resources/js/app.js'])



        {{ $slot }}




2. 使用 Layout 與 Flux 元件
建立一個 resources/views/dashboard.blade.php：

<x-layouts.app>
    <x-slot:title>
        我的儀表板
    </x-slot>


歡迎回來！

        <flux:button variant="primary">新增文章</flux:button>

</x-layouts.app>

(備註：如果你仍想使用傳統的 @extends('layouts.app') 與 @section('content')，Laravel 依然完全支援，但 x- 組件標籤寫法與 Tailwind、Flux 配合得更好。)

第六步：環境設定 (.env 與 Config)¶

1. .env 檔案
這是專案的環境變數檔，絕對不要將此檔提交到 Git 版本控制中。這裡存放敏感資訊：

APP_NAME="My Laravel 13 App"
APP_ENV=local
APP_KEY=base64:...
APP_DEBUG=true
APP_URL=http://localhost:8000

DB_CONNECTION=sqlite
# 如果改用 MySQL:
# DB_CONNECTION=mysql
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=my_app
# DB_USERNAME=root
# DB_PASSWORD=

2. Config 目錄
Laravel 11 開始大幅精簡了 config/ 目錄，Laravel 13 延續此策略。大部分設定都透過 .env 即可完成。但如果你需要進階設定，可以使用指令將設定檔「發布」出來：

# 例如，你需要修改 cors 設定
php artisan config:publish cors

這會在 config/ 目錄下生成 cors.php，讓你可以使用 PHP 陣列進行深度微調。

以上步驟涵蓋了 Laravel 13 基礎建立的第一個小段。你可以先在虛擬機或本機環境跑完一次 laravel new 與 Starter Kit 的安裝，感受一下 Flux UI 與 Livewire 結合的順暢度。如果有哪一個環節報錯或想深入了解，我們可以隨時往下探討！