跳至内容

入门套件

介绍

为了帮助您快速构建新的 Laravel 应用程序，我们非常乐意提供应用程序入门套件。这些入门套件可帮助您快速构建下一个 Laravel 应用程序，并包含注册和验证应用程序用户身份所需的路由、控制器和视图。

虽然我们欢迎您使用这些入门套件，但它们并非必需。您只需安装全新的 Laravel 即可从头构建您自己的应用程序。无论哪种方式，我们相信您都能构建出精彩的作品！

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

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

1composer global require laravel/installer

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

1laravel new my-app

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

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

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

可用的入门套件

反应

我们的 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 入门套件利用 Livewire、Tailwind 和Flux UI组件库。

入门套件定制

反应

我们的 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

要发布其他 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 components
3├── composables/   # Vue composables / hooks
4├── layouts/       # Application layouts
5├── lib/           # Utility functions and configuration
6├── pages/         # Page components
7└── 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、Tailwind 和Flux UI构建。与我们所有的入门套件一样，所有后端和前端代码都存在于您的应用程序中，以便进行完全自定义。

Livewire 和 Volt

大部分前端代码位于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

传统的 Livewire 组件

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

可用布局

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）
  • 密钥认证
  • 基于电子邮件的“Magic Auth”
  • 单点登录

使用 WorkOS 作为身份验证提供商需要 WorkOS 帐户。WorkOS 为每月最多 100 万活跃用户的应用程序提供免费身份验证。

要使用 WorkOS AuthKit 作为应用程序的身份验证提供程序，请在通过创建新的入门套件驱动的应用程序时选择 WorkOS 选项laravel new。

配置您的 WorkOS 入门套件

使用 WorkOS 支持的入门套件创建新应用程序后，您应该在应用程序文件中设置WORKOS_CLIENT_ID、WORKOS_API_KEY和环境变量。这些变量应与 WorkOS 仪表板中为您的应用程序提供的值相匹配：WORKOS_REDIRECT_URL.env

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

此外，您还需要在 WorkOS 仪表盘中配置应用程序主页的 URL。用户退出应用程序后，将被重定向到此 URL。

配置 AuthKit 身份验证方法

使用 WorkOS 支持的入门套件时，我们建议您在应用程序的 WorkOS AuthKit 配置设置中禁用“电子邮件 + 密码”身份验证，从而仅允许用户通过社交身份验证提供程序、密钥、“Magic Auth”和单点登录 (SSO) 进行身份验证。这样，您的应用程序就可以完全避免处理用户密码。

配置 AuthKit 会话超时

此外，我们建议您配置 WorkOS AuthKit 会话不Events超时以匹配 Laravel 应用程序配置的会话超时阈值，通常为两小时。

惯性固态继电器

React 和 Vue 入门套件与 Inertia 的服务器端渲染功能兼容。要为您的应用构建与 Inertia 服务器端渲染兼容的软件包，请运行以下build:ssr命令：

1npm run build:ssr

为了方便起见，composer dev:ssr我们还提供了一个命令。此命令将在为你的应用程序构建与 SSR 兼容的包后启动 Laravel 开发服务器和 Inertia SSR 服务器，从而允许你使用 Inertia 的服务器端渲染引擎在本地测试你的应用程序：

1composer dev:ssr

社区维护的入门套件

当使用 Laravel 安装程序创建新的 Laravel 应用程序时，您可以将 Packagist 上可用的任何社区维护的入门套件提供给以下--using标志：

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

创建入门套件

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

常见问题

我如何升级？

每个入门套件都能为您的下一个应用提供坚实的起点。凭借对代码的完全所有权，您可以根据自己的设想调整、定制和构建应用。而且，无需更新入门套件本身。

如何启用电子邮件验证？

可以通过取消注释模型MustVerifyEmail中的导入App/Models/User.php并确保模型实现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});

使用入门套件的WorkOS版本 时不需要进行电子邮件验证。

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

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

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

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