入门套件

简介
使用入门套件创建应用
可用的入门套件
入门套件自定义
身份验证
WorkOS AuthKit 身份验证
Inertia SSR
社区维护的入门套件
常见问题

简介

为了帮助您快速构建新的 Laravel 应用程序，我们很高兴为您提供应用程序入门套件。这些入门套件为您构建下一个 Laravel 应用程序提供了先发优势，包括注册和验证应用程序用户所需的路由、控制器和视图。入门套件使用 Laravel Fortify 来提供身份验证。

虽然您可以使用这些入门套件，但它们不是必需的。您可以自由地通过安装全新的 Laravel 副本从头开始构建自己的应用程序。无论哪种方式，我们都知道您会构建出伟大的产品！

使用入门套件创建应用

要使用我们的入门套件之一创建新的 Laravel 应用程序，您应该首先安装 PHP 和 Laravel CLI 工具。如果您已经安装了 PHP 和 Composer，可以通过 Composer 安装 Laravel 安装器 CLI 工具：

shell

composer global require laravel/installer

然后，使用 Laravel 安装器 CLI 创建新的 Laravel 应用程序。Laravel 安装器会提示您选择首选的入门套件：

shell

laravel new my-app

创建 Laravel 应用程序后，您只需要通过 NPM 安装其前端依赖项并启动 Laravel 开发服务器：

shell

cd my-app
npm install && npm run build
composer run dev

启动 Laravel 开发服务器后，您的应用程序将可以在 Web 浏览器中通过 http://localhost:8000 访问。

可用的入门套件

React

我们的 React 入门套件提供了一个强大、现代的起点，用于使用 Inertia 构建 React 前端的 Laravel 应用程序。

Inertia 允许您使用经典的服务器端路由和控制器构建现代的单页 React 应用程序。这使您可以享受 React 的前端强大功能，结合 Laravel 惊人的后端生产力和闪电般快速的 Vite 编译。

React 入门套件使用 React 19、TypeScript、Tailwind 和 shadcn/ui 组件库。

Svelte

我们的 Svelte 入门套件提供了一个强大、现代的起点，用于使用 Inertia 构建 Svelte 前端的 Laravel 应用程序。

Inertia 允许您使用经典的服务器端路由和控制器构建现代的单页 Svelte 应用程序。这使您可以享受 Svelte 的前端强大功能，结合 Laravel 惊人的后端生产力和闪电般快速的 Vite 编译。

Svelte 入门套件使用 Svelte 5、TypeScript、Tailwind 和 shadcn-svelte 组件库。

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 模板并寻找 React、Svelte 和 Vue 等 JavaScript 驱动的 SPA 框架的更简单替代方案的团队。

Livewire 入门套件使用 Livewire、Tailwind 和 Flux UI 组件库。

入门套件自定义

React

我们的 React 入门套件使用 Inertia 2、React 19、Tailwind 4 和 shadcn/ui 构建。与我们所有的入门套件一样，所有后端和前端代码都存在于您的应用程序中，以允许完全自定义。

大部分前端代码位于 resources/js 目录中。您可以自由修改任何代码以自定义应用程序的外观和行为：

text

resources/js/
├── components/    # 可复用的 React 组件
├── hooks/         # React hooks
├── layouts/       # 应用程序布局
├── lib/           # 工具函数和配置
├── pages/         # 页面组件
└── types/         # TypeScript 定义

要发布额外的 shadcn 组件，首先找到您想要发布的组件。然后，使用 npx 发布组件：

shell

npx shadcn@latest add switch

在此示例中，该命令会将 Switch 组件发布到 resources/js/components/ui/switch.tsx。组件发布后，您可以在任何页面中使用它：

jsx

import { Switch } from "@/components/ui/switch"

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  );
};

export default MyPage;

可用的布局

React 入门套件包含两种不同的主要布局供您选择：「侧边栏」布局和「头部」布局。侧边栏布局是默认的，但您可以通过修改应用程序 resources/js/layouts/app-layout.tsx 文件顶部导入的布局来切换到头部布局：

import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; // [tl! remove]
import AppLayoutTemplate from '@/layouts/app/app-header-layout'; // [tl! add]

侧边栏变体

侧边栏布局包含三种不同的变体：默认侧边栏变体、「内嵌」变体和「浮动」变体。您可以通过修改 resources/js/components/app-sidebar.tsx 组件来选择您最喜欢的变体：

text

<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]
<Sidebar collapsible="icon" variant="inset"> [tl! add]

身份验证页面布局变体

React 入门套件中包含的身份验证页面（如登录页面和注册页面）也提供三种不同的布局变体：「简单」、「卡片」和「分割」。

要更改您的身份验证布局，请修改应用程序 resources/js/layouts/auth-layout.tsx 文件顶部导入的布局：

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; // [tl! remove]
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'; // [tl! add]

Svelte

我们的 Svelte 入门套件使用 Inertia 2、Svelte 5、Tailwind 和 shadcn-svelte 构建。与我们所有的入门套件一样，所有后端和前端代码都存在于您的应用程序中，以允许完全自定义。

大部分前端代码位于 resources/js 目录中。您可以自由修改任何代码以自定义应用程序的外观和行为：

text

resources/js/
├── components/    # 可复用的 Svelte 组件
├── layouts/       # 应用程序布局
├── lib/           # 工具函数和配置以及 Svelte rune 模块
├── pages/         # 页面组件
└── types/         # TypeScript 定义

要发布额外的 shadcn-svelte 组件，首先找到您想要发布的组件。然后，使用 npx 发布组件：

shell

npx shadcn-svelte@latest add switch

在此示例中，该命令会将 Switch 组件发布到 resources/js/components/ui/switch/switch.svelte。组件发布后，您可以在任何页面中使用它：

svelte

<script lang="ts">
    import { Switch } from '@/components/ui/switch'
</script>

<div>
    <Switch />
</div>

可用的布局

Svelte 入门套件包含两种不同的主要布局供您选择：「侧边栏」布局和「头部」布局。侧边栏布局是默认的，但您可以通过修改应用程序 resources/js/layouts/AppLayout.svelte 文件顶部导入的布局来切换到头部布局：

import AppLayout from '@/layouts/app/AppSidebarLayout.svelte'; // [tl! remove]
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte'; // [tl! add]

侧边栏变体

侧边栏布局包含三种不同的变体：默认侧边栏变体、「内嵌」变体和「浮动」变体。您可以通过修改 resources/js/components/AppSidebar.svelte 组件来选择您最喜欢的变体：

text

<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]
<Sidebar collapsible="icon" variant="inset"> [tl! add]

身份验证页面布局变体

Svelte 入门套件中包含的身份验证页面（如登录页面和注册页面）也提供三种不同的布局变体：「简单」、「卡片」和「分割」。

要更改您的身份验证布局，请修改应用程序 resources/js/layouts/AuthLayout.svelte 文件顶部导入的布局：

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte'; // [tl! remove]
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte'; // [tl! add]

Vue

我们的 Vue 入门套件使用 Inertia 2、Vue 3 Composition API、Tailwind 和 shadcn-vue 构建。与我们所有的入门套件一样，所有后端和前端代码都存在于您的应用程序中，以允许完全自定义。

大部分前端代码位于 resources/js 目录中。您可以自由修改任何代码以自定义应用程序的外观和行为：

text

resources/js/
├── components/    # 可复用的 Vue 组件
├── composables/   # Vue composables / hooks
├── layouts/       # 应用程序布局
├── lib/           # 工具函数和配置
├── pages/         # 页面组件
└── types/         # TypeScript 定义

要发布额外的 shadcn-vue 组件，首先找到您想要发布的组件。然后，使用 npx 发布组件：

shell

npx shadcn-vue@latest add switch

在此示例中，该命令会将 Switch 组件发布到 resources/js/components/ui/Switch.vue。组件发布后，您可以在任何页面中使用它：

vue

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<template>
    <div>
        <Switch />
    </div>
</template>

可用的布局

Vue 入门套件包含两种不同的主要布局供您选择：「侧边栏」布局和「头部」布局。侧边栏布局是默认的，但您可以通过修改应用程序 resources/js/layouts/AppLayout.vue 文件顶部导入的布局来切换到头部布局：

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // [tl! remove]
import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; // [tl! add]

侧边栏变体

侧边栏布局包含三种不同的变体：默认侧边栏变体、「内嵌」变体和「浮动」变体。您可以通过修改 resources/js/components/AppSidebar.vue 组件来选择您最喜欢的变体：

text

<Sidebar collapsible="icon" variant="sidebar"> [tl! remove]
<Sidebar collapsible="icon" variant="inset"> [tl! add]

身份验证页面布局变体

Vue 入门套件中包含的身份验证页面（如登录页面和注册页面）也提供三种不同的布局变体：「简单」、「卡片」和「分割」。

要更改您的身份验证布局，请修改应用程序 resources/js/layouts/AuthLayout.vue 文件顶部导入的布局：

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; // [tl! remove]
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue'; // [tl! add]

Livewire

我们的 Livewire 入门套件使用 Livewire 4、Tailwind 和 Flux UI 构建。与我们所有的入门套件一样，所有后端和前端代码都存在于您的应用程序中，以允许完全自定义。

大部分前端代码位于 resources/views 目录中。您可以自由修改任何代码以自定义应用程序的外观和行为：

text

resources/views
├── components            # 可复用组件
├── flux                  # 自定义 Flux 组件
├── layouts               # 应用程序布局
├── pages                 # Livewire 页面
├── partials              # 可复用的 Blade partials
├── dashboard.blade.php   # 已认证用户仪表板
├── welcome.blade.php     # 访客用户欢迎页面

可用的布局

Livewire 入门套件包含两种不同的主要布局供您选择：「侧边栏」布局和「头部」布局。侧边栏布局是默认的，但您可以通过修改应用程序 resources/views/layouts/app.blade.php 文件使用的布局来切换到头部布局。此外，您应该将 container 属性添加到主 Flux 组件：

blade

<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

身份验证页面布局变体

Livewire 入门套件中包含的身份验证页面（如登录页面和注册页面）也提供三种不同的布局变体：「简单」、「卡片」和「分割」。

要更改您的身份验证布局，请修改应用程序 resources/views/layouts/auth.blade.php 文件使用的布局：

blade

<x-layouts::auth.split>
    {{ $slot }}
</x-layouts::auth.split>

身份验证

所有入门套件都使用 Laravel Fortify 来处理身份验证。Fortify 为登录、注册、密码重置、邮箱验证等提供路由、控制器和逻辑。

Fortify 根据应用程序 config/fortify.php 配置文件中启用的功能自动注册以下身份验证路由：

路由	方法	描述
`/login`	`GET`	显示登录表单
`/login`	`POST`	验证用户
`/logout`	`POST`	登出用户
`/register`	`GET`	显示注册表单
`/register`	`POST`	创建新用户
`/forgot-password`	`GET`	显示密码重置请求表单
`/forgot-password`	`POST`	发送密码重置链接
`/reset-password/{token}`	`GET`	显示密码重置表单
`/reset-password`	`POST`	更新密码
`/email/verify`	`GET`	显示邮箱验证通知
`/email/verify/{id}/{hash}`	`GET`	验证邮箱地址
`/email/verification-notification`	`POST`	重新发送验证邮件
`/user/confirm-password`	`GET`	显示密码确认表单
`/user/confirm-password`	`POST`	确认密码
`/two-factor-challenge`	`GET`	显示 2FA 验证表单
`/two-factor-challenge`	`POST`	验证 2FA 代码

可以使用 php artisan route:list Artisan 命令显示应用程序中的所有路由。

启用和禁用功能

您可以在应用程序的 config/fortify.php 配置文件中控制启用哪些 Fortify 功能：

php

use Laravel\Fortify\Features;

'features' => [
    Features::registration(),
    Features::resetPasswords(),
    Features::emailVerification(),
    Features::twoFactorAuthentication([
        'confirm' => true,
        'confirmPassword' => true,
    ]),
],

要禁用某个功能，请注释掉或从 features 数组中删除该功能条目。例如，删除 Features::registration() 以禁用公开注册。

使用 React、Svelte 或 Vue 入门套件时，您还需要在前端代码中删除对已禁用功能路由的任何引用。例如，如果您禁用邮箱验证，则应该删除 React、Svelte 或 Vue 组件中对 verification 路由的导入和引用。这是必要的，因为这些入门套件使用 Wayfinder 进行类型安全路由，它在构建时生成路由定义。如果您引用不存在的路由，您的应用程序将无法构建。

自定义用户创建和密码重置

当用户注册或重置密码时，Fortify 会调用位于应用程序 app/Actions/Fortify 目录中的操作类：

文件	描述
`CreateNewUser.php`	验证并创建新用户
`ResetUserPassword.php`	验证并更新用户密码
`PasswordValidationRules.php`	定义密码验证规则

例如，要自定义应用程序的注册逻辑，您应该编辑 CreateNewUser 操作：

php

public function create(array $input): User
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'email', 'max:255', 'unique:users'],
        'phone' => ['required', 'string', 'max:20'], // [tl! add]
        'password' => $this->passwordRules(),
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'], // [tl! add]
        'password' => Hash::make($input['password']),
    ]);
}

入门套件 ​

简介 ​

使用入门套件创建应用 ​

可用的入门套件 ​

React ​

Svelte ​

Vue ​

Livewire ​

入门套件自定义 ​

React ​

可用的布局 ​

侧边栏变体 ​

身份验证页面布局变体 ​

Svelte ​

可用的布局 ​

侧边栏变体 ​

身份验证页面布局变体 ​

Vue ​

可用的布局 ​

侧边栏变体 ​

身份验证页面布局变体 ​

Livewire ​

可用的布局 ​

身份验证页面布局变体 ​

身份验证 ​

启用和禁用功能 ​

自定义用户创建和密码重置 ​

入门套件

简介

使用入门套件创建应用

可用的入门套件

React

Svelte

Vue

Livewire

入门套件自定义

React

可用的布局

侧边栏变体

身份验证页面布局变体

Svelte

可用的布局

侧边栏变体

身份验证页面布局变体

Vue

可用的布局

侧边栏变体

身份验证页面布局变体

Livewire

可用的布局

身份验证页面布局变体

身份验证

启用和禁用功能

自定义用户创建和密码重置