跳到内容

入门套件

简介

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

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

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

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

1composer global require laravel/installer

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

1laravel new my-app

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

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

启动 Laravel 开发服务器后,您的应用程序将在 Web 浏览器中通过 https://127.0.0.1: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

要发布其他 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、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

可用的布局

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)
  • 通行密钥身份验证
  • 基于电子邮件的“魔法身份验证”
  • SSO

使用 WorkOS 作为您的身份验证提供程序需要一个 WorkOS 帐户。 WorkOS 为每月活跃用户数不超过 100 万的应用程序提供免费身份验证。

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

配置您的 WorkOS 入门套件

在使用 WorkOS 驱动的入门套件创建新应用程序后,您应该在应用程序的 .env 文件中设置 WORKOS_CLIENT_IDWORKOS_API_KEYWORKOS_REDIRECT_URL 环境变量。这些变量应与 WorkOS 控制面板中为您的应用程序提供的值相匹配。

1WORKOS_CLIENT_ID=your-client-id
2WORKOS_API_KEY=your-api-key
3WORKOS_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}

注册后,用户将收到一封验证电子邮件。 要限制对某些路由的访问,直到用户的电子邮件地址被验证,请将 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 文件,以更改默认电子邮件模板的外观。

Laravel 是最有效率的方式来
构建、部署和监控软件。