入門套件

簡介

為了讓你在撰寫 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:install
2 
3php artisan migrate
4npm install
5npm run dev
1php artisan breeze:install
2 
3php artisan migrate
4npm install
5npm run dev

接著,在瀏覽器中打開網站的 /login/register 網址。Breeze 中所有的路由都定義在 routes/auth.php 中。

深色模式

若想在 Scaffold 專案前端時讓 Breeze 包含「深色模式」的支援,只要在執行 breeze:install 指令時加上 --dark 指示詞即可:

1php artisan breeze:install --dark
1php artisan breeze:install --dark
lightbulb

要瞭解更多有關如何編譯網站的 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 指令時將 vuereact 指定為要使用的 Stack。安裝好 Breeze 的 Scaffolding 後,也請編譯專案的前端資源:

1php artisan breeze:install vue
2 
3# 或是...
4 
5php artisan breeze:install react
6 
7php artisan migrate
8npm install
9npm run dev
1php artisan breeze:install vue
2 
3# 或是...
4 
5php artisan breeze:install react
6 
7php artisan migrate
8npm install
9npm run dev

接著,在瀏覽器中打開網站的 /login/register 網址。Breeze 中所有的路由都定義在 routes/auth.php 中。

伺服器端轉譯

若想讓 Breeze 在 Scaffold 時加上對 Inertia SSR 的支援,可在叫用 breeze:install 指令時提供 ssr 選項:

1php artisan breeze:install vue --ssr
2php artisan breeze:install react --ssr
1php artisan breeze:install vue --ssr
2php artisan breeze:install react --ssr

Breeze & Next.js / API

Breeze 也可以用來 Scaffold 登入 API,以用於讓如 NextNuxt、或其他框架驅動的現代 JavaScript 網站進行登入認證。若要開始使用登入 API,請在執行 breeze:install Artisan 指令時指定 api 作為你想要的 Stack:

1php artisan breeze:install api
2 
3php artisan migrate
1php artisan breeze:install api
2 
3php 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 設計,並提供了 LivewireInertia 作為前端 Scaffolding 的選項。

有關安裝 Laravel Jetstream 的完整說明文件可以在官方 Jetstream 說明文件中找到。

翻譯進度
100% 已翻譯
更新時間:
2023年2月11日 下午12:59:00 [世界標準時間]
翻譯人員:
  • cornch
幫我們翻譯此頁

留言

尚無留言

“Laravel” is a Trademark of Taylor Otwell.
The source documentation is released under MIT license. See laravel/docs on GitHub for details.
The translated documentations are released under MIT license. See cornch/laravel-docs-l10n on GitHub for details.