入门套件
简介
为了让您在构建新的 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-app2npm install && npm run build3composer 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 components3├── hooks/ # React hooks4├── layouts/ # Application layouts5├── lib/ # Utility functions and configuration6├── pages/ # Page components7└── 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 components3├── composables/ # Vue composables / hooks4├── layouts/ # Application layouts5├── lib/ # Utility functions and configuration6├── pages/ # Page components7└── 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/views2├── components # Reusable Livewire components3├── flux # Customized Flux components4├── livewire # Livewire pages5├── partials # Reusable Blade partials6├── dashboard.blade.php # Authenticated user dashboard7├── 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_ID
、WORKOS_API_KEY
和 WORKOS_REDIRECT_URL
环境变量。这些变量应与 WorkOS 控制面板中为您的应用程序提供的值相匹配。
1WORKOS_CLIENT_ID=your-client-id2WORKOS_API_KEY=your-api-key3WORKOS_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
文件,以更改默认电子邮件模板的外观。