文件 #1
open模組 1：環境設定與 Laravel 13 基礎（4–6 小時）
Description
- 安裝 PHP 8.3+、Composer、Laravel 13（使用 Laravel Installer）。
- 建立新專案與 Laravel 13 新特性概覽（零 breaking changes、最小 PHP 版本、強預設值）。
- 路由（Route、Route Groups、Named Routes、Middleware）。
- 控制器（Controller、Resource Controller、Single Action Controller）。
- Blade 模板基礎（Layouts、Components、Slots、@section）。
- 設定環境（.env、Config、PHP Attributes 新寫法）。
- Laravel 13 Starter Kit 安裝（Livewire Starter Kit + Flux UI + Tailwind）。
JH Updated by Jeffery Hsu about 12 hours ago
- Subtask #2 added
JH Updated by Jeffery Hsu about 6 hours ago
- Subtask deleted (
#2)
JH Updated by Jeffery Hsu about 6 hours ago
這是一個非常好的起手式！在進入逐步教學之前，先直接回答你關於 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 生成的) 中，你會看到類似這樣的結構：
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ $title ?? 'Laravel 13' }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-100">
<main>
{{ $slot }}
</main>
</body>
</html>
2. 使用 Layout 與 Flux 元件
建立一個 resources/views/dashboard.blade.php：
<x-layouts.app>
<x-slot:title>
我的儀表板
</x-slot>
<div class="p-6">
<h1 class="text-2xl font-bold mb-4">歡迎回來！</h1>
<flux:button variant="primary">新增文章</flux:button>
</div>
</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 結合的順暢度。如果有哪一個環節報錯或想深入了解，我們可以隨時往下探討！
JH Updated by Jeffery Hsu about 6 hours ago
- Description updated (diff)
- Status changed from 新建立 to 已解決
JH Updated by Jeffery Hsu about 6 hours ago
- Tracker changed from 功能 to 文件