快速入門套件
簡介
為了讓您在建構新的 Laravel 應用程式時能有個好的開始，我們很樂意提供應用程式快速入門套件。這些快速入門套件讓您在建構下一個 Laravel 應用程式時有個好的開始，並且包含了註冊和驗證應用程式使用者所需的路由、控制器和視圖。
雖然我們歡迎您使用這些快速入門套件，但它們並非必要。您可以透過簡單地安裝 Laravel 的全新副本，從頭開始建構自己的應用程式。無論哪種方式，我們相信您都會建構出很棒的東西！
使用快速入門套件建立應用程式
要使用我們的快速入門套件之一建立新的 Laravel 應用程式，您應該先安裝 PHP 和 Laravel CLI 工具。如果您已經安裝了 PHP 和 Composer，您可以透過 Composer 安裝 Laravel 安裝器 CLI 工具
1composer global require laravel/installer然後，使用 Laravel 安裝器 CLI 建立新的 Laravel 應用程式。Laravel 安裝器將提示您選擇偏好的快速入門套件
1laravel new my-app建立 Laravel 應用程式後，您只需要透過 NPM 安裝其前端依賴項，然後啟動 Laravel 開發伺服器
1cd my-app2npm install && npm run build3composer run dev一旦您啟動了 Laravel 開發伺服器，您的應用程式就可以在您的網頁瀏覽器中透過 https://127.0.0.1:8000 存取。
可用的快速入門套件
React
我們的 React 快速入門套件為使用 Inertia 建構具有 React 前端之 Laravel 應用程式提供了一個穩健、現代化的起點。
Inertia 讓您可以使用經典的伺服器端路由和控制器來建構現代化的單頁 React 應用程式。這讓您可以享受 React 的前端強大功能，以及 Laravel 令人難以置信的後端生產力和閃電般快速的 Vite 編譯。
React 快速入門套件使用了 React 19、TypeScript、Tailwind 和 shadcn/ui 组件库。
Vue
我們的 Vue 快速入門套件為使用 Inertia 建構具有 Vue 前端之 Laravel 應用程式提供了一個良好的起點。
Inertia 讓您可以使用經典的伺服器端路由和控制器來建構現代化的單頁 Vue 應用程式。這讓您可以享受 Vue 的前端強大功能，以及 Laravel 令人難以置信的後端生產力和閃電般快速的 Vite 編譯。
Vue 快速入門套件使用了 Vue Composition API、TypeScript、Tailwind 和 shadcn-vue 组件库。
Livewire
我們的 Livewire 快速入門套件為建構具有 Laravel Livewire 前端之 Laravel 應用程式提供了完美的起點。
Livewire 是一種僅使用 PHP 建構動態、反應式前端 UI 的強大方法。它非常適合主要使用 Blade 模板，並正在尋找 JavaScript 驅動的 SPA 框架（如 React 和 Vue）的更簡單替代方案的團隊。
Livewire 快速入門套件使用了 Laravel Volt、Tailwind 和 Flux UI 组件库。
快速入門套件客製化
React
我們的 React 快速入門套件是使用 Inertia 2、React 19、Tailwind 4 和 shadcn/ui 建構的。與我們所有的快速入門套件一樣，所有的後端和前端程式碼都存在於您的應用程式中，以便完全客製化。
大多數前端程式碼都位於 resources/js 目錄中。您可以自由修改任何程式碼來自訂應用程式的外觀和行為
1resources/js/2├── components/ # Reusable React components3├── hooks/ # React hooks4├── layouts/ # Application layouts5├── lib/ # Utility functions and configuration6├── pages/ # Page components7└── types/ # TypeScript definitions要發佈額外的 shadcn 组件，首先找到您想要發佈的组件。然後，使用 npx 發佈组件
1npx shadcn@latest add switch在這個範例中，此命令會將 Switch 组件發佈到 resources/js/components/ui/switch.tsx。一旦组件被發佈，您就可以在任何頁面中使用它
1import { Switch } from "@/components/ui/switch" 2 3const MyPage = () => { 4 return ( 5 <div> 6 <Switch /> 7 </div> 8 ); 9};10 11export default MyPage;可用的版面配置
React 快速入門套件包含兩種不同的主要版面配置供您選擇：「側邊欄」版面配置和「標頭」版面配置。側邊欄版面配置是預設值，但您可以透過修改應用程式 resources/js/layouts/app-layout.tsx 檔案頂端匯入的版面配置來切換到標頭版面配置
1import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; 2import AppLayoutTemplate from '@/layouts/app/app-header-layout'; 側邊欄變體
側邊欄版面配置包含三種不同的變體：預設側邊欄變體、「內嵌」變體和「浮動」變體。您可以透過修改 resources/js/components/app-sidebar.tsx 组件來選擇您最喜歡的變體
1<Sidebar collapsible="icon" variant="sidebar"> 2<Sidebar collapsible="icon" variant="inset"> 身份驗證頁面版面配置變體
React 快速入門套件中包含的身份驗證頁面，例如登入頁面和註冊頁面，也提供三種不同的版面配置變體：「簡單」、「卡片」和「分割」。
要變更您的身份驗證版面配置，請修改應用程式 resources/js/layouts/auth-layout.tsx 檔案頂端匯入的版面配置
1import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; 2import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'; Vue
我們的 Vue 快速入門套件是使用 Inertia 2、Vue 3 Composition API、Tailwind 和 shadcn-vue 建構的。與我們所有的快速入門套件一樣，所有的後端和前端程式碼都存在於您的應用程式中，以便完全客製化。
大多數前端程式碼都位於 resources/js 目錄中。您可以自由修改任何程式碼來自訂應用程式的外觀和行為
1resources/js/2├── components/ # Reusable Vue components3├── composables/ # Vue composables / hooks4├── layouts/ # Application layouts5├── lib/ # Utility functions and configuration6├── pages/ # Page components7└── types/ # TypeScript definitions要發佈額外的 shadcn-vue 组件，首先找到您想要發佈的组件。然後，使用 npx 發佈组件
1npx shadcn-vue@latest add switch在這個範例中，此命令會將 Switch 组件發佈到 resources/js/components/ui/Switch.vue。一旦组件被發佈，您就可以在任何頁面中使用它
1<script setup lang="ts">2import { Switch } from '@/Components/ui/switch'3</script>4 5<template>6 <div>7 <Switch />8 </div>9</template>可用的版面配置
Vue 快速入門套件包含兩種不同的主要版面配置供您選擇：「側邊欄」版面配置和「標頭」版面配置。側邊欄版面配置是預設值，但您可以透過修改應用程式 resources/js/layouts/AppLayout.vue 檔案頂端匯入的版面配置來切換到標頭版面配置
1import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; 2import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; 側邊欄變體
側邊欄版面配置包含三種不同的變體：預設側邊欄變體、「內嵌」變體和「浮動」變體。您可以透過修改 resources/js/components/AppSidebar.vue 组件來選擇您最喜歡的變體
1<Sidebar collapsible="icon" variant="sidebar"> 2<Sidebar collapsible="icon" variant="inset"> 身份驗證頁面版面配置變體
Vue 快速入門套件中包含的身份驗證頁面，例如登入頁面和註冊頁面，也提供三種不同的版面配置變體：「簡單」、「卡片」和「分割」。
要變更您的身份驗證版面配置，請修改應用程式 resources/js/layouts/AuthLayout.vue 檔案頂端匯入的版面配置
1import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; 2import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue'; Livewire
我們的 Livewire 快速入門套件是使用 Livewire 3、Laravel Volt、Tailwind 和 Flux UI 建構的。與我們所有的快速入門套件一樣，所有的後端和前端程式碼都存在於您的應用程式中，以便完全客製化。
大多數前端程式碼都位於 resources/views 目錄中。您可以自由修改任何程式碼來自訂應用程式的外觀和行為
1resources/views2├── components # Reusable Livewire components3├── flux # Customized Flux components4├── livewire # Livewire pages5├── partials # Reusable Blade partials6├── dashboard.blade.php # Authenticated user dashboard7├── welcome.blade.php # Guest user welcome page可用的版面配置
Livewire 快速入門套件包含兩種不同的主要版面配置供您選擇：「側邊欄」版面配置和「標頭」版面配置。側邊欄版面配置是預設值，但您可以透過修改應用程式 resources/views/components/layouts/app.blade.php 檔案使用的版面配置來切換到標頭版面配置。此外，您應該將 container 屬性新增至主要的 Flux 组件
1<x-layouts.app.header>2 <flux:main container>3 {{ $slot }}4 </flux:main>5</x-layouts.app.header>身份驗證頁面版面配置變體
Livewire 快速入門套件中包含的身份驗證頁面，例如登入頁面和註冊頁面，也提供三種不同的版面配置變體：「簡單」、「卡片」和「分割」。
要變更您的身份驗證版面配置，請修改應用程式 resources/views/components/layouts/auth.blade.php 檔案使用的版面配置
1<x-layouts.auth.split>2 {{ $slot }}3</x-layouts.auth.split>WorkOS AuthKit 身份驗證
預設情況下，React、Vue 和 Livewire 快速入門套件都使用 Laravel 的內建身份驗證系統來提供登入、註冊、密碼重設、電子郵件驗證等功能。此外，我們還為每個快速入門套件提供 WorkOS AuthKit 驅動的變體，提供
- 社群身份驗證（Google、Microsoft、GitHub 和 Apple）
- Passkey 身份驗證
- 基於電子郵件的「Magic Auth」
- SSO
使用 WorkOS 作為您的身份驗證提供者需要一個 WorkOS 帳戶。WorkOS 為每月活躍用戶數少於 100 萬的應用程式提供免費身份驗證。
要使用 WorkOS AuthKit 作為您應用程式的身份驗證提供者，請透過 laravel new 建立新的快速入門套件驅動的應用程式時，選擇 WorkOS 選項。
設定您的 WorkOS 快速入門套件
使用 WorkOS 驅動的快速入門套件建立新應用程式後，您應該在應用程式的 .env 檔案中設定 WORKOS_CLIENT_ID、WORKOS_API_KEY 和 WORKOS_REDIRECT_URL 環境變數。這些變數應該與 WorkOS 儀表板中為您的應用程式提供的值相符
1WORKOS_CLIENT_ID=your-client-id2WORKOS_API_KEY=your-api-key3WORKOS_REDIRECT_URL="${APP_URL}/authenticate"設定 AuthKit 身份驗證方法
當使用 WorkOS 驅動的快速入門套件時，我們建議您在應用程式的 WorkOS AuthKit 設定中停用「電子郵件 + 密碼」身份驗證，允許使用者僅透過社群身份驗證提供者、Passkey、「Magic Auth」和 SSO 進行身份驗證。這讓您的應用程式可以完全避免處理使用者密碼。
設定 AuthKit 會話逾時
此外，我們建議您設定您的 WorkOS AuthKit 會話閒置逾時，以符合您的 Laravel 應用程式設定的會話逾時閾值，通常為兩個小時。
常見問題
如何升級？
每個快速入門套件都為您的下一個應用程式提供了一個穩固的起點。透過完全擁有程式碼，您可以完全按照您的構想調整、自訂和建構您的應用程式。但是，無需更新快速入門套件本身。
如何啟用電子郵件驗證？
可以透過取消註解您的 App/Models/User.php 模型中的 MustVerifyEmail 匯入，並確保該模型實作了 MustVerifyEmail 介面來新增電子郵件驗證
1<?php 2 3namespace App\Models; 4 5use Illuminate\Contracts\Auth\MustVerifyEmail; 6// ... 7 8class User extends Authenticatable implements MustVerifyEmail 9{10 // ...11}註冊後，使用者將收到驗證電子郵件。為了限制對特定路由的存取，直到使用者的電子郵件地址被驗證，請將 verified 中介層添加到路由中
1Route::middleware(['auth', 'verified'])->group(function () {2 Route::get('dashboard', function () {3 return Inertia::render('dashboard');4 })->name('dashboard');5});當使用 starter kits 的 WorkOS 變體時，則不需要電子郵件驗證。
我該如何修改預設電子郵件範本？
您可能想要自訂預設電子郵件範本，以更好地與您的應用程式品牌形象保持一致。若要修改此範本，您應該使用以下命令將電子郵件視圖發佈到您的應用程式
1php artisan vendor:publish --tag=laravel-mail這將在 resources/views/vendor/mail 中產生幾個檔案。您可以修改任何這些檔案，以及 resources/views/vendor/mail/themes/default.css 檔案，以變更預設電子郵件範本的外觀和樣式。