入门套件

简介
使用入门套件创建应用程序
可用的入门套件
- React
- Vue
- Livewire
入门套件自定义
- React
- Vue
- Livewire
WorkOS AuthKit 身份验证
常见问题

简介

为了让您在构建新的 Laravel 应用程序时有一个良好的开端，我们很高兴提供应用程序入门套件。这些入门套件让您在构建下一个 Laravel 应用程序时抢占先机，并包含注册和验证应用程序用户所需的路由、控制器和视图。

虽然我们欢迎您使用这些入门套件，但它们不是必需的。您可以自由地从头开始构建自己的应用程序，只需安装 Laravel 的全新副本即可。无论哪种方式，我们都知道您将构建出色的东西！

使用入门套件创建应用程序

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

1composer global require laravel/installer

composer global require laravel/installer

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

1laravel new my-app

laravel new my-app

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

1cd my-app
2npm install && npm run build
3composer run dev

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 组件库。

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 和 Vue 等 JavaScript 驱动的 SPA 框架的团队。

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

入门套件自定义

React

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

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

1resources/js/
2├── components/    # Reusable React components
3├── hooks/         # React hooks
4├── layouts/       # Application layouts
5├── lib/           # Utility functions and configuration
6├── pages/         # Page components
7└── types/         # TypeScript definitions

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 发布组件

1npx shadcn@latest add switch

npx 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;

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

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

export 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'; 

import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
import 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"> 

<Sidebar collapsible="icon" variant="sidebar">
<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'; 

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
import 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 components
3├── composables/   # Vue composables / hooks
4├── layouts/       # Application layouts
5├── lib/           # Utility functions and configuration
6├── pages/         # Page components
7└── types/         # TypeScript definitions

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 发布组件

1npx shadcn-vue@latest add switch

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

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

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

可用的布局

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

1import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; 
2import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; 

import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

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

1<Sidebar collapsible="icon" variant="sidebar"> 
2<Sidebar collapsible="icon" variant="inset"> 

<Sidebar collapsible="icon" variant="sidebar">
<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'; 

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

Livewire

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

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

1resources/views
2├── components            # Reusable Livewire components
3├── flux                  # Customized Flux components
4├── livewire              # Livewire pages
5├── partials              # Reusable Blade partials
6├── dashboard.blade.php   # Authenticated user dashboard
7├── welcome.blade.php     # Guest user welcome page

resources/views
├── components            # Reusable Livewire components
├── flux                  # Customized Flux components
├── livewire              # Livewire pages
├── partials              # Reusable Blade partials
├── dashboard.blade.php   # Authenticated user dashboard
├── 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>

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

身份验证页面布局变体

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

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

1<x-layouts.auth.split>
2    {{ $slot }}
3</x-layouts.auth.split>

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

WorkOS AuthKit 身份验证

默认情况下，React、Vue 和 Livewire 入门套件都使用 Laravel 的内置身份验证系统来提供登录、注册、密码重置、邮箱验证等功能。此外，我们还为每个入门套件提供了一个 WorkOS AuthKit 驱动的变体，提供

社交身份验证（Google、Microsoft、GitHub 和 Apple）
通行密钥身份验证
基于电子邮件的“魔法身份验证”
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-id
2WORKOS_API_KEY=your-api-key
3WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

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

配置 AuthKit 身份验证方法

当使用 WorkOS 驱动的入门套件时，我们建议您在应用程序的 WorkOS AuthKit 配置设置中禁用“电子邮件 + 密码”身份验证，仅允许用户通过社交身份验证提供商、通行密钥、“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}

<?php

namespace App\Models;

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

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

注册后，用户将收到一封验证电子邮件。要限制对某些路由的访问，直到用户的电子邮件地址被验证，请将 verified 中间件添加到路由。

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

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

当使用入门套件的 WorkOS 变体时，不需要电子邮件验证。

如何修改默认电子邮件模板？

您可能想要自定义默认电子邮件模板，以更好地与您的应用程序品牌保持一致。要修改此模板，您应该使用以下命令将电子邮件视图发布到您的应用程序：

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

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

这将在 resources/views/vendor/mail 中生成多个文件。您可以修改这些文件中的任何一个以及 resources/views/vendor/mail/themes/default.css 文件，以更改默认电子邮件模板的外观。

序言

快速入门

架构概念

基础知识

深入挖掘

安全

数据库

Eloquent ORM

测试

软件包

入门套件

简介

使用入门套件创建应用程序

可用的入门套件

React

Vue

Livewire

入门套件自定义

React

可用的布局

侧边栏变体

身份验证页面布局变体

Vue

可用的布局

侧边栏变体

身份验证页面布局变体

Livewire

可用的布局

身份验证页面布局变体

WorkOS AuthKit 身份验证

配置您的 WorkOS 入门套件

配置 AuthKit 身份验证方法

配置 AuthKit 会话超时

常见问题

如何升级？

如何启用电子邮件验证？

如何修改默认电子邮件模板？

产品

软件包

资源