devdojo / genesis
应用程序启动套件 - 基于 Laravel Folio 和 Volt 构建
Requires
- php: ^8.1
- codeat3/blade-phosphor-icons: ^2.0
- illuminate/support: ^10.0|^11.0
- laravel/folio: ^1.0
- laravel/ui: ^4.2
- livewire/livewire: ^3.0
- livewire/volt: ^1.0
Requires (Dev)
- phpunit/phpunit: ^9.5.10
This package is auto-updated.
Last update: 2024-09-13 14:23:25 UTC
README
关于 Genesis
Genesis 是一个 Laravel 启动套件,它利用了 TALL Stack 以及单文件 Volt 和 Folio 文件。此启动套件包含 身份验证、用户仪表板、编辑个人资料 和一系列 UI 组件。
了解以下技术(Genesis 是基于这些技术构建的)将非常有用:
以下是如何安装和配置 Genesis 的说明。
安装
此预设旨在安装到一个全新的 Laravel 应用程序 中。
创建一个新的 Laravel 应用程序后,可以使用以下命令安装 Genesis
composer require devdojo/genesis dev-main php artisan ui genesis
要使用 基于类的 API,请包含
--option=class
。例如:php artisan ui genesis --option=class
接下来,请确保编译您的资源文件
npm install && npm run dev
重要
如果您使用了 Laravel 安装程序并且选择了 sqlite
作为您的数据库,迁移可能已经被执行。在这种情况下,您就可以开始了 🎉 另一方面,您需要连接数据库并运行以下命令 👇
php artisan migrate
访问您的应用程序主页,您就可以开始了 🤘
应用程序中的路由
目前 Genesis 创建了 11 个路由,包括主页、身份验证、仪表板视图等。您可以使用 php artisan folio:list
命令查看应用程序中当前的所有路由
GET / ................................................ index.blade.php GET /about ........................................... about.blade.php GET /auth/login ................................. auth/login.blade.php GET /auth/password/confirm ........... auth/password/confirm.blade.php GET /auth/password/reset ............... auth/password/reset.blade.php GET /auth/password/{token} ........... auth/password/[token].blade.php GET /auth/register ........................... auth/register.blade.php GET /auth/verify ............................... auth/verify.blade.php GET /dashboard ............................. dashboard/index.blade.php GET /learn ..................................... learn/index.blade.php GET /profile/edit ............................. profile/edit.blade.php Showing [11] routes
让我们来介绍 Genesis 提供的每个页面。
主页
主页(如上图所示 👆)位于 resources/views/pages/index.blade.php
。此文件以及所有其他页面都利用了 Folio 的基于页面的路由。
此文件包含一个中间件 redirect-to-dashboard
,它在文件顶部注册
middleware(['redirect-to-dashboard']);
这将当认证用户尝试访问主页时将其重定向到仪表板。如果您不想重定向认证用户,可以简单地删除此行。
关于页面
这是一个简单的关于页面,您可以随意删除或用于您的应用程序。此页面还包含 ui/marketing/breadcrumbs.blade.php 组件,也可以用于任何其他营销页面。
身份验证页面
所有身份验证文件都位于 resources/views/pages/auth
文件夹中。这些文件通过 Folio 与路由相映射。以下是当前的认证路由
- login.blade.php
- register.blade.php
- verify.blade.php
- 密码/确认页面.blade.php
- 密码/重置页面.blade.php
- 密码/[token].blade.php
仪表盘页面
仪表盘页面非常简洁,这使得您很容易进行自定义。您会注意到这个页面有以下中间件
middleware(['auth', 'verified']);
您可能希望将此中间件添加到您应用程序中需要确保用户已认证和验证的许多页面中。
编辑个人资料页面
编辑个人资料页面位于 resources/views/profile/edit
,您也可以通过访问 url.com/profile/edit
来加载此文件。此文件包含与仪表盘页面相同的中间件,这意味着用户在访问之前必须进行认证和验证。
此页面有三个不同的部分
- 更新个人资料部分,用户可以更新其个人资料中的名称和电子邮件。
- 更新密码部分,用户可以更新其密码。
- 删除个人资料部分,用户可以删除其个人资料。
要了解更多关于此文件的信息,请访问Wiki。
学习页面
此页面显示Genesis的README文件。它简单地获取您现在正在阅读的README.md文件,并在仪表盘中显示它。
布局
在Genesis中,有三个布局,位于 resources/views/components/layouts
内
- app.blade.php - 这是与您的应用程序关联的任何页面(用户必须认证)的布局
- marketing.blade.php - 这是用于主页、博客和其他营销页面的布局
- main.blade.php - 这是包含您的网站主要HTML结构的布局。 app 和 marketing 模板都继承自此主模板
您可以使用以下方式使用这些布局
<!-- App Layout --> <x-layouts.app> <!-- content here... --> </x-layouts.app> <!-- Marketing Layout --> <x-layouts.marketing> <!-- content here... --> </x-layouts.marketing> <!-- Main Layout --> <x-layouts.main> <!-- content here... --> </x-layouts.main>
有时您可能希望为页面使用 主布局。这些可能是不需要 app 或 marketing 标题/页脚内容的用例。例如,auth 页面继承 main 布局
UI组件
我们还提供了一些Blade组件,您可以在新应用程序中使用,这些组件位于 resources/views/components/ui
内。这些组件包括
- 按钮
- 复选框
- 输入框
- 明暗切换
- 链接
- logo
- 模态框
- 导航链接
- 占位符
- 选择框
- 文本链接
UI组件内部还有两个文件夹,包括 app 和 marketing。每个文件夹都对应可用的 app 和 marketing 布局。以下是这些文件夹中可用的组件
-- app.header -- marketing.header -- marketing.breadcrumbs
所有这些组件都很直观;然而,您可能想了解每个组件的工作原理,以便充分利用它。
在应用程序中更新logo就像更新 logo.blade.php 组件并添加您的logo SVG或图像一样简单。
测试
Genesis有一些基本的测试来测试认证功能。您可以通过运行以下命令来检查这些测试
./vendor/bin/pest
tests/Feature
文件夹中的每个测试都有一个与 resources/views/pages
文件夹中的每个页面对应的测试文件。
故障排除
有时您可能会在视图中看到行号打印出来,导致布局和输出奇怪。您想要运行 php artisan view:clear
。这可能是由于Folio和Volt仍在Beta测试中😉
NPM错误
如果您在 http://localhost:5173 上看到错误,请尝试
npm upgrade
Laravel安装器问题。
APP_URL 的设置会根据您如何安装 laravel 而有所不同。有些人可能使用 laravel 安装程序,有些人可能使用 composer。Vite 在 http://localhost:5173 上运行,而应用的其他部分则使用 http://[::1]:5173。
为了获得最佳效果,请尝试以下操作
composer create-project --prefer-dist laravel/laravel genesis-app
然后更改您的 .env 文件中的 APP_URL
APP_URL=http://127.0.0.1:8000
然后启动 npm 服务器和 laravel 服务器
npm run dev
php artisan serve
致谢
许可证
MIT 许可证(MIT)。有关更多信息,请参阅 许可证文件。