入門套件
簡介
為了讓你在撰寫 Laravel 專案時有個好的開始,我們很高興能為你介紹「登入入門套件」與「專案入門套件」。這些套件包含了讓使用者註冊或登入的路由、Controller、與 View,會幫你自動進行 Scaffold。
雖然我們歡迎你使用這些入門套件,不過這些套件並不是必要的。你可以從全新的 Laravel 安裝開始製作自己的專案。無論如何,我們都知道你會做出很棒的東西!
Laravel Breeze
Laravel Breeze 是一個簡單且最小化實作出所有 Laravel 認證功能的套件,包含登入、註冊、密碼重設、電子郵件認證、以及密碼確認。此外,Breeze 中也包含了一個簡單的「個人檔案」頁面,在該頁面中,使用者可以更新其名稱、E-Mail 位址、以及密碼。
Laravel Breeze 的預設 View 層是由 Blade 樣板構成的,並使用 Tailwind CSS。或者,Breeze 也可以使用 Vue 或 React 以及 Inertia 來 Scaffold 你的專案。
對於從頭開始撰寫 Laravel 專案來說,Breeze 提供了一個絕佳的起始點。而且,對於打算通過 Laravel Livewire 來提升 Blade 樣板功能的專案來說,Breeze 也是個不錯的選項。

Laravel Bootcamp
如果你第一次接觸 Laravel,歡迎參考 Laravel Bootcamp (英語)。Laravel Bootcamp 會帶領你使用 Breeze 來建立你的第一個 Laravel 專案。Laravel Bootcamp 是學習各種有關 Laravel 與 Breeze 相關技術的好地方。
安裝
首先,請先建立一個新的 Laravel 專案,設定資料庫,執行資料庫 Migration。建立好新的 Laravel 專案後,可以使用 Composer 來安裝 Laravel Breeze:
1composer require laravel/breeze --dev
1composer require laravel/breeze --dev
安裝好 Breeze 後,就可以使用本文件下方討論的其中一個 Breeze「Stack」來 Scaffold 你的專案。
Breeze 與 Blade
安裝好 Laravel Breeze 套件後,執行 breeze:install
Artisan 指令。這個指令會將登入用 View、路由、Controller、以及其他一些資源安裝到專案中。Laravel Breeze 會將其所有程式碼安裝到專案中,因此對於 Breeze 的功能與實作你擁有完整的控制權與可見性。
預設的 Breeze「Stack」是 Blade Stack。Blade Stack 使用了簡單的 Blade 樣板 來轉譯專案的前端。只要不加任何參數地叫用 breeze:install
,就可以安裝 Blade Stack。Breeze 的 Scaffolding 安裝好後,就可以編譯專案的前端資源:
1php artisan breeze:install23php artisan migrate4npm install5npm run dev
1php artisan breeze:install23php artisan migrate4npm install5npm run dev
接著,在瀏覽器中打開網站的 /login
或 /register
網址。Breeze 中所有的路由都定義在 routes/auth.php
中。
深色模式
若想在 Scaffold 專案前端時讓 Breeze 包含「深色模式」的支援,只要在執行 breeze:install
指令時加上 --dark
指示詞即可:
1php artisan breeze:install --dark
1php artisan breeze:install --dark
要瞭解更多有關如何編譯網站的 CSS 與 JavaScript 的資訊,請參考 Laravel 的 Vite 說明文件。
Breeze & React / Vue
Laravel Breeze 也提供了使用 Inertia 前端實作的 React 與 Vue Scaffolding。使用 Inertia,我們就能使用傳統的 Server-Side Routing 與 Controller 來製作現代、單一頁面的 React 或 Vue 網站。
使用 Inertia,我們就可以享受 React 與 Vue 所提供的強大前端,並搭配使用生產效率高的 Laravel 後端,以及超快速的 Vite 編譯。若要使用 Inertia Stack,請在執行 breeze:install
Artisan 指令時將 vue
或 react
指定為要使用的 Stack。安裝好 Breeze 的 Scaffolding 後,也請編譯專案的前端資源:
1php artisan breeze:install vue23# 或是...45php artisan breeze:install react67php artisan migrate8npm install9npm run dev
1php artisan breeze:install vue23# 或是...45php artisan breeze:install react67php artisan migrate8npm install9npm run dev
接著,在瀏覽器中打開網站的 /login
或 /register
網址。Breeze 中所有的路由都定義在 routes/auth.php
中。
伺服器端轉譯
若想讓 Breeze 在 Scaffold 時加上對 Inertia SSR 的支援,可在叫用 breeze:install
指令時提供 ssr
選項:
1php artisan breeze:install vue --ssr2php artisan breeze:install react --ssr
1php artisan breeze:install vue --ssr2php artisan breeze:install react --ssr
Breeze & Next.js / API
Breeze 也可以用來 Scaffold 登入 API,以用於讓如 Next、Nuxt、或其他框架驅動的現代 JavaScript 網站進行登入認證。若要開始使用登入 API,請在執行 breeze:install
Artisan 指令時指定 api
作為你想要的 Stack:
1php artisan breeze:install api23php artisan migrate
1php artisan breeze:install api23php artisan migrate
在安裝過程中,Breeze 會在專案的 .env
檔中新增一個 FRONTEND_URL
環境變數。這個 URL 應為 JavaScript App 的 URL。在開發時,通常為 http://localhost:3000
。此外,也應確認一下 APP_URL
是否為 http://localhost:8000
,該網址就是 serve
Artisan 指令的預設 URL。
Next.js 參考實作
最後,我們已經準備好可以將這個後端與你的前端組合起來了。我們在 GitHub 上提供了一個作為 Breeze 前端的 Next 參考實作。這個前端是由 Laravel 維護的,其中包含了與 Breeze 提供的傳統 Blade 與 Inertia Stack 中相同的使用者界面。
Laravel Jetstream
雖然 Laravel Breeze 提供了一個簡單起始點能讓你開始製作 Laravel 專案,但 Jetstream 提供了更多的功能,其中包含了強健的功能與額外的前端技術 Stack。對於剛開始使用 Laravel 的新手,我們建議先了解一下 Laravel Breeze 的使用方式,再來學習 Laravel Jetstream。
Jetstream 為 Laravel 提供了一個設計的很好看的網站 Scaffolding,並包含了登入、註冊、E-Mail 認證、二步驟認證、工作階段管理、通過 Laravel Sanctum 提供的 API 支援、以及一個可選的團隊管理功能。Jetstream 使用 Tailwind CSS 設計,並提供了 Livewire 與 Inertia 作為前端 Scaffolding 的選項。
有關安裝 Laravel Jetstream 的完整說明文件可以在官方 Jetstream 說明文件中找到。