本索引詳細說明 Laravel 12 搭配 Livewire 3 的專案目錄結構,包括各主要目錄、前後端整合、測試目錄、常用套件以及部署相關檔案的用途,方便開發者快速查閱。

Laravel 預設目錄結構

根目錄(Project Root)

包含專案入口與設定檔,例如 .env(環境變數)、composer.json(PHP 相依)、package.json(前端相依)以及 artisan 指令檔。這些都是專案初始化與執行的關鍵。

app/

應用程式核心邏輯,幾乎所有 PHP 類別都放在此目錄。預設命名空間為 App,由 Composer PSR-4 自動載入。

  • Models/:Eloquent 資料模型。
  • Http/:處理 HTTP 請求,包括:
    • Controllers/ 控制器
    • Middleware/ 中介層
    • Requests/ 表單驗證類別
  • Console/:自訂 Artisan 指令。
  • Livewire/:Livewire 3 預設元件類別位置。
  • 其他目錄:如 Events/, Jobs/, Listeners/ 依需求產生。

bootstrap/

框架啟動目錄,含 app.php(應用啟動點)與 cache/(快取檔案)。

config/

應用的所有設定檔目錄,如 app.php, database.php, fortify.php 等,建議熟讀調整。

database/

包含與資料庫操作有關的檔案:

  • migrations/:資料表版本遷移。
  • factories/:假資料產生器。
  • seeders/:資料填充。

lang/

語言檔案,支援多語系,可放 en/, zh_TW/ 等資料夾。

public/

網頁入口目錄,含 index.php。用來放置靜態資源(JS、CSS、圖片)。

  • storage/ 是指向 storage/app/public 的符號連結,用於公開檔案(需執行 php artisan storage:link)。

resources/

前端資源檔案:

  • views/:Blade 模板與 Livewire 專用視圖。
  • css/:Tailwind 或其他 CSS 原始檔。
  • js/:主 JS 檔與各類 JS 模組(含 Alpine.js 設定)。
  • lang/:應用語系檔案。

routes/

路由定義目錄:

  • web.php:Web 端點。
  • api.php:API 路由(需 artisan install:api 啟用)。
  • console.php:CLI Artisan 路由。
  • channels.php:事件廣播(需 artisan install:broadcasting 啟用)。
  • livewire.php:Livewire Page Route(選用,Jetstream 預設使用)。

storage/

系統存儲目錄:

  • app/:用戶上傳檔案。
  • framework/:快取、session、視圖編譯檔。
  • logs/:log 檔(如 laravel.log)。

tests/

測試目錄:

  • Feature/:功能整合測試。
  • Unit/:單元測試。
  • 可自建 Livewire/ 來分類 Livewire 測試。
  • 測試執行使用 php artisan test

vendor/

Composer 安裝的 PHP 套件,不建議手動修改。


Livewire 3 結構與 routes/livewire.php

app/Livewire/

Livewire 元件類別目錄,每個元件為一個 class。

resources/views/livewire/

對應元件的 Blade 視圖,命名與 class 對應。

routes/livewire.php

由 Jetstream (Livewire 栈) 使用的內部路由檔案,包含註冊、登入、使用者設定等功能頁面,不需要自行維護。


前端整合:Vite + Alpine.js + Tailwind CSS

vite.config.js

Vite 的打包與熱更新設定檔。

tailwind.config.js

Tailwind 設定檔,定義掃描範圍、主題、plugins 等。

postcss.config.js

PostCSS 設定檔,預設包含 tailwindcss 與 autoprefixer 插件。

resources/js/

包含 app.js, bootstrap.js,初始化 JS,包括 Alpine.js 與 Axios。

resources/css/

預設 app.css 引入 Tailwind 指令。


測試與支援結構

tests/Feature/

包含 Livewire 測試,如 Livewire::test(Component::class),測試互動與 DOM。

tests/Unit/

測試單一方法或純邏輯,不依賴框架。

phpunit.xml

測試環境設定,指定 bootstrap 與測試目錄。


套件整合:Jetstream / Fortify / Sanctum

Jetstream

  • 安裝後產生 config/jetstream.php
  • 視圖在 resources/views/auth、Livewire 在 app/Actions/
  • 使用 Fortify 作為後端認證服務
  • 使用 Sanctum 提供 API Token

Fortify

  • 安裝後產生 config/fortify.php
  • 提供無 UI 的認證路由與邏輯
  • 視圖需自行註冊 loginView, registerView 等

Sanctum

  • 提供 API Token 認證
  • 安裝後有 config/sanctum.php
  • 提供 personal_access_tokens 資料表
  • 支援 SPA cookie 模式與 token 模式

部署與 CI/CD 支援

.github/workflows/

GitHub Actions 設定目錄,常見如 laravel.yml 實作 CI/CD 流程。

Dockerfile

定義 PHP 應用容器的建置流程。

docker-compose.yml

定義多容器開發環境(Laravel + MySQL + Redis 等)。

.env.production / .env.staging

多環境設定檔。


重要設定檔彙整

檔案用途簡述
.env環境變數設定
composer.jsonPHP 套件與自動載入
package.jsonJS 套件與執行腳本
vite.config.js前端資源打包與熱更新設定
tailwind.config.jsTailwind 主題與掃描設定
postcss.config.jsCSS 編譯管線(Tailwind + Prefix)
phpunit.xml測試設定
config/*.php所有應用設定

以上說明可作為你未來開發 Laravel 12 + Livewire 3 專案時的架構索引與快速參考。

最後修改日期: 2025 年 4 月 16 日

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。