为了让您在构建新的 Laravel 应用程序时能够先人一步,我们很高兴能提供应用程序入门套件. 这些入门套件让您在构建下一个 Laravel 应用程序时能够先人一步,并包含您所需的路由、控制器和视图,用于注册和认证您的应用程序用户. 这些入门套件使用Laravel Fortify提供认证功能.
欢迎使用这些入门套件,但它们并非必需。您可以从零开始构建自己的应用程序,只需安装全新的 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 开发服务器,你的应用程序将可在你的 Web 浏览器中通过 http://localhost:8000 进行访问。
我们的 React 入门套件提供了一个强大、现代的起点,用于构建采用 React 前端的 Laravel 应用,使用 Inertia。
Inertia 让你能够使用经典的服务器端路由和控制器来构建现代的单页 React 应用程序。这让你能够享受 React 的前端强大功能,同时结合 Laravel 卓越的后端生产力以及闪电般快速的 Vite 编译。
React 入门套件利用 React 19、TypeScript、Tailwind,以及 shadcn/ui 组件库。
我们的 Vue 入门套件为使用 Inertia 构建采用 Vue 前端的 Laravel 应用程序提供了一个极佳的起点.
Inertia 允许你使用经典的服务器端路由和控制器来构建现代化的单页 Vue 应用程序。这让你能够享受到 Vue 的前端强大功能,同时结合 Laravel 令人难以置信的后端生产力以及闪电般快速的 Vite 编译。
Vue 入门套件采用了 Vue 组合式 API、TypeScript、Tailwind 以及 shadcn-vue 组件库。
我们的 Livewire 入门套件为构建带有 Laravel Livewire 前端的 Laravel 应用程序提供了一个完美的起点。
Livewire 是一种使用 PHP 构建动态、响应式前端 UI 的强大方式。它非常适合主要使用 Blade 模板并正在寻找一个比 React 和 Vue 等 JavaScript 驱动的 SPA 框架更简单的替代方案的团队。
Livewire 入门套件利用 Livewire、Tailwind 以及 Flux UI 组件库。
我们的 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 启动套件基于 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入门套件提供的认证页面,例如登录页面和注册页面,还提供三种不同的布局变体: "simple", "card", 和 "split"。
若要更改您的身份验证布局,修改在您的应用程序的 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 3、Tailwind 以及 Flux UI 构建。与我们所有的入门套件一样,所有后端和前端代码都存在于您的应用程序中,以实现完全自定义。
大部分前端代码位于 resources/views 目录中。您可以自由修改任何代码,以自定义应用程序的外观和行为:
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前端代码位于 resources/views 目录,而 app/Livewire 目录包含 Livewire 组件对应的后端逻辑。
Livewire 入门套件包含两种不同的主要布局供您选择:“侧边栏”布局和“头部”布局。侧边栏布局是默认布局,但您可以通过修改应用程序的 resources/views/components/layouts/app.blade.php 文件所使用的布局来切换到头部布局。此外,您应该将 container 属性添加到主 Flux 组件:
<x-layouts.app.header>
<flux:main container>
{{ $slot }}
</flux:main>
</x-layouts.app.header>Livewire starter kit 随附的认证页面,例如登录页面和注册页面,也提供了三种不同的布局变体:"简洁", "卡片", 和 "分栏"。
要更改您的身份验证布局,请修改应用程序 resources/views/components/layouts/auth.blade.php 文件所使用的布局:
<x-layouts.auth.split>
{{ $slot }}
</x-layouts.auth.split>所有入门套件都包含内置双因素认证 (2FA) 由 Laravel Fortify 提供支持, 为用户账户增加一层额外的安全保障. 用户可以使用任何基于时间的一次性密码 (TOTP) 支持的认证应用程序来保护他们的账户.
双因素认证默认启用,并支持 Fortify 提供的所有选项:
Features::twoFactorAuthentication([
'confirm' => true,
'confirmPassword' => true,
]);默认情况下,React、Vue 和 Livewire 启动套件都利用 Laravel 内置的认证系统,提供登录、注册、密码重置、电子邮件验证等功能。此外,我们还提供由 WorkOS AuthKit 驱动的每个启动套件变体,它提供:
将 WorkOS 作为您的身份验证提供商 需要一个 WorkOS 账户. WorkOS 为月活跃用户数不超过 100 万的应用程序提供免费身份验证.
要将 WorkOS AuthKit 用作您应用程序的身份验证提供商,请在通过 laravel new 创建新的基于入门套件的应用程序时选择 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 是用户从你的应用程序注销后将被重定向到的位置。
使用 WorkOS 支持的 starter kit 时,我们建议您在应用程序的 WorkOS AuthKit 配置设置中禁用“电子邮件 + 密码”身份验证,允许用户仅通过社交身份验证提供商,通行密钥,“魔术身份验证”,和 SSO 进行身份验证。这使您的应用程序能够完全避免处理用户密码。
此外,我们建议您配置您的 WorkOS AuthKit 会话不活动超时时间,以匹配您的 Laravel 应用程序配置的会话超时阈值,通常为两小时。
React 和 Vue 入门套件兼容 Inertia 的服务器端渲染功能。要为你的应用程序构建一个兼容 Inertia SSR 的包,请运行 build:ssr 命令:
npm run build:ssr为方便起见,composer dev:ssr 命令也可用。此命令将在为您的应用程序构建 SSR 兼容包后,启动 Laravel 开发服务器和 Inertia SSR 服务器,允许您使用 Inertia 的服务器端渲染引擎在本地测试您的应用程序:
composer dev:ssr使用 Laravel 安装器创建新的 Laravel 应用程序时,你可以向 --using 标志提供任何在 Packagist 上可用的社区维护入门套件:
laravel new my-app --using=example/starter-kit为确保您的 starter kit 可供他人使用,您需要将其发布到 Packagist。您的 starter kit 应在其 .env.example 文件中定义其所需的环境变量,并且任何必要的安装后命令都应列在 starter kit 的 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文件,以更改默认电子邮件模板的外观和样式。