入门套件

12.x

12.x 11.x 10.x 9.x 8.5 8.x 7.x 6.x 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.1

Laravel 12 中文文档 /

本文档最新版为 11.x，旧版本可能放弃维护，推荐阅读最新版！

入门套件

介绍
使用入门套件创建一个应用
可用的入门套件
- React
- Vue
- Livewire
自定义入门套件
- React
- Vue
- Livewire
WorkOS AuthKit 身份验证
Inertia SSR
社区维护入门套件
常见问题解答

介绍

让你在构建 Laravel 应用时领先一步，我们很乐意提供应用入门套件。这些应用套件让你构建你下一个 Laravel 应用提供了一个良好的开端，并包括注册和验证应用程序用户所需的路由、控制器和视图。

虽然欢迎你使用这些套件。只需要安装新的 Laravel 副本，你就可以自由的从头开始构建你的应用。不管怎么样，我们知道你会创造出伟大的东西！

使用入门套件创建一个应用

使用其中一个入门套件创建一个新的 Laravel 应用，你首先应该安装 PHP 和 Laravel CLI 工具。如果你已经安装 PHP 和 Composer ，你可以通过 Composer 安装 Laravel CLI 安装器工具：

composer global require laravel/installer

然后，使用 Laravel CLI 安装器创建一个新的 Laravel 应用。这个 Laravel 安装器将会提示你选择你喜欢的入门套件：

laravel new my-app

在你创建 Laravel 应用后，你仅仅需要通过 NPM 安装它的前端依赖，并启动 Laravel 开发服务：

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

一旦你启动了 Laravel 开发服务，你的应用将可以在你的浏览器中访问 localhost: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 组合 API、TypeScript、Tailwind 和 shadcn-vue 组件库。

Livewire

我们的 Livewire 入门套件使用 Laravel Livewire 前端构建 Laravel 应用提供了一个完美的起点。

Livewire 是一个仅仅使用 PHP 就可以构建动态、交互、前端 UI 的强大方法。它非常适合使用 Blade 模板的团队，他们正在寻找一种比 React 和 Vue 等 JavaScript 驱动的 SPA 框架更简单的替代方案。

Livewire 启动套件使用了 Livewire、Tailwind 以及 Flux UI 组件库。

启动套件自定义

React 配置

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

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

resources/js/
├── components/    # Reusable React components
├── hooks/         # React hooks
├── layouts/       # Application layouts
├── lib/           # Utility functions and configuration
├── pages/         # Page components
└── types/         # TypeScript definitions

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

npx shadcn@latest add switch

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

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 组件来选择您最喜欢的变体：

<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]

Vue

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

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

resources/js/
├── components/    # Reusable Vue components
├── composables/   # Vue composables / hooks
├── layouts/       # Application layouts
├── lib/           # Utility functions and configuration
├── pages/         # Page components
└── types/         # TypeScript definitions

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

npx shadcn-vue@latest add switch

在此示例中，该命令将 Switch 组件发布到 resources/js/components/ui/Switch.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 组件来选择您最喜欢的变体：

<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 3、Tailwind 和Flux UI构建。与我们所有的入门套件一样，所有的后端和前端代码都存在于您的应用程序中，以实现完全定制。

Livewire 和 Volt

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

resources/views
├── components            # 可复用的 Livewire 组件
├── flux                  # 定制化的 Flux 组件
├── livewire              # Livewire 页面
├── partials              # 可复用的 Blade 局部视图
├── dashboard.blade.php   # 已认证用户仪表盘页面
├── welcome.blade.php     # 访客欢迎页面

传统 Livewire 组件

前端代码位于 resources/views 目录中，而 app/Livewire 目录则包含对应 Livewire 组件的后端逻辑。

可用布局

Livewire 入门套件包含两种不同的主布局供您选择：「侧边栏」(sidebar) 布局和“顶部导航栏”(header) 布局。侧边栏布局是默认选项，但您可以通过修改应用程序 resources/views/components/layouts/app.blade.php 文件所使用的布局来切换到顶部导航栏布局。此外，您还应该在主 Flux 组件添加 container 属性：

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

认证页面布局变体

Livewire 入门套件中包含的认证页面，例如登录页面和注册页面，也提供了三种不同的布局变体：「简洁」(simple)、「卡片」(card) 和「分割」(split)。

要更改您的认证布局，请修改应用程序中 resources/views/components/layouts/auth.blade.php 文件所使用的布局：

<x-layouts.auth.split>
    {{ $slot }}
</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 仪表盘中为您应用程序提供的值匹配：

WORKOS_CLIENT_ID=your-client-id
WORKOS_API_KEY=your-api-key
WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

此外，您应在 WorkOS 仪表盘中配置应用程序主页 URL。该 URL 是用户登出您的应用程序后将被重定向至的地址。

配置 AuthKit 认证方法

当使用 WorkOS 驱动的入门套件时，我们建议您在应用程序的 WorkOS AuthKit 配置设置中禁用「邮箱+密码」（Email + Password）认证，仅允许用户通过社交认证提供商、通行密钥（Passkey）、「魔法认证」（Magic Auth）和单点登录（SSO）进行认证。这样您的应用程序可以完全避免处理用户密码。

配置 AuthKit 会话超时

此外，我们建议您将 WorkOS AuthKit 的会话空闲超时配置为与 Laravel 应用程序配置的会话超时阈值相匹配，通常为两小时。

Inertia SSR

React 和 Vue 入门套件兼容 Inertia 的服务器端渲染功能。要为应用程序构建兼容 Inertia SSR 的打包文件，请运行 build:ssr 命令：

npm run build:ssr

为方便起见，还提供了 composer dev:ssr 命令。该命令会在为应用程序构建 SSR 兼容包后，启动 Laravel 开发服务器和 Inertia SSR 服务器，使您能够使用 Inertia 的服务器端渲染引擎在本地测试应用程序：

composer dev:ssr

社区维护的入门套件

使用 Laravel 安装程序创建新应用程序时，您可以通过 --using 标志指定 Packagist 上可用的任何社区维护的入门套件：

laravel new my-app --using=example/starter-kit

创建入门套件

为确保您的入门套件可供他人使用，您需要将其发布到 Packagist。您的入门套件应在 .env.example 文件中定义所需的环境变量，任何必要的安装后命令应列在入门套件 composer.json 文件的 post-create-project-cmd 数组中。

常见问题解答

如何升级？

每个入门套件都为您的下一个应用程序提供了坚实的基础起点。由于您完全拥有代码所有权，可以按照您的设想精确调整、定制和构建应用程序。但入门套件本身无需更新。

如何启用邮箱验证？

通过取消注释 App/Models/User.php 模型中的 MustVerifyEmail 导入，并确保模型实现 MustVerifyEmail 接口来添加邮箱验证功能：

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
// ...

class User extends Authenticatable implements MustVerifyEmail
{
    // ...
}

用户注册后将收到验证邮件。要限制对特定路由的访问直到用户完成邮箱验证，请为路由添加 verified 中间件：

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('dashboard', function () {
        return Inertia::render('dashboard');
    })->name('dashboard');
});

[!NOTE]
使用入门套件的 WorkOS 变体时不需要邮箱验证。

如何修改默认邮件模板？

您可能需要自定义默认邮件模板以更好地匹配应用程序品牌。要修改此模板，请通过以下命令将邮件视图发布到您的应用程序：

php artisan vendor:publish --tag=laravel-mail

此操作将在 resources/views/vendor/mail 目录生成若干文件。您可以修改这些文件以及 resources/views/vendor/mail/themes/default.css 文件，从而改变默认邮件模板的外观样式。

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/laravel/12.x/st...

译文地址：https://learnku.com/docs/laravel/12.x/st...

Markdown 文本

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

贡献者：5

入门套件

12.x

12.x 11.x 10.x 9.x 8.5 8.x 7.x 6.x 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.1

入门套件

介绍

使用入门套件创建一个应用

可用的入门套件

React

Vue

Livewire

启动套件自定义

React 配置

可用布局

侧边栏变体

认证页面布局变体

Vue

可用布局

侧边栏变体

认证页面布局变体

Livewire

Livewire 和 Volt

传统 Livewire 组件

可用布局

认证页面布局变体

WorkOS AuthKit 认证

配置您的 WorkOS 入门套件

配置 AuthKit 认证方法

配置 AuthKit 会话超时

Inertia SSR

社区维护的入门套件

创建入门套件

常见问题解答

如何升级？

如何启用邮箱验证？

如何修改默认邮件模板？

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

入门套件 12.x 12.x 11.x 10.x 9.x 8.5 8.x 7.x 6.x 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.1

入门套件

介绍

使用入门套件创建一个应用

可用的入门套件

React

Vue

Livewire

启动套件自定义

React 配置

可用布局

侧边栏变体

认证页面布局变体

Vue

可用布局

侧边栏变体

认证页面布局变体

Livewire

Livewire 和 Volt

传统 Livewire 组件

可用布局

认证页面布局变体

WorkOS AuthKit 认证

配置您的 WorkOS 入门套件

配置 AuthKit 认证方法

配置 AuthKit 会话超时

Inertia SSR

社区维护的入门套件

创建入门套件

常见问题解答

如何升级？

如何启用邮箱验证？

如何修改默认邮件模板？

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

入门套件

12.x

12.x 11.x 10.x 9.x 8.5 8.x 7.x 6.x 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.1