页面模板
当你需要在项目中新增页面时，Lovrabet CLI 可以帮你快速生成页面文件，而不用从零开始手写。
这个功能的价值
想象一下，传统方式下创建一个新页面需要：
- 创建文件目录
- 创建 React 组件文件
- 写基本的组件结构
- 配置路由
- 添加样式文件
- 还可能需要其他配置...
现在只需要一个命令，全部自动完成！
如何使用
运行以下命令：
lovrabet add page
然后 CLI 会引导你一步步完成配置。
可选模板
目前提供两种页面模板：
📄 blank - 空白页面
- 适合场景：你已经有明确的页面设计，想从零开始
- 包含内容：
- 基础的 React 组件结构
- 简单的 CSS 模块文件
- 基础的页面标题
👋 hello-world - 示例页面
- 适合场景：新手学习或需要参考示例
- 包含内容：
- 完整的页面布局示例
- 基础的交互逻辑
- 常用组件的使用示例
- 样式设计参考
路由路径规则
在输入路由路径时，需要遵循以下规则：
✅ 正确示例
about # 关于页面
contact # 联系页面
user/profile # 用户个人资料
user/settings # 用户设置
admin/dashboard # 管理后台首页
shop/product/detail # 商品详情页
user-center # 使用中划线
api_docs # 使用下划线
❌ 错误示例
/about # 不能以 / 开头
about/ # 不能以 / 结尾
user//profile # 不能包含连续的 //
user profile # 不能包含空格
user@profile # 不能包含特殊符号
中文页面 # 不支持中文名称
命名建议
- 单词小写：
about、contact - 多单词用中划线：
user-center、order-history - 多级路径清晰：
user/profile、admin/user/list
生成过程详解
1️⃣ 选择模板
CLI 问你想使用哪个模板，你可以选择 blank 或 hello-world。
2️⃣ 输入路由路径
CLI 问你这个页面的路由路径，比如 user/profile。
3️⃣ 生成文件
CLI 会：
- 在
src/pages/下创建相应的目录结构 - 复制模板文件到目标目录
- 自动替换模板中的占位符
4️⃣ 占位符替换
CLI 会智能替换模板中的占位符：
| 占位符 | 说明 | 示例（路由：user/profile） |
|---|---|---|
{ComponentName} | React 组件名 | Profile |
{DisplayTitle} | 页面标题 | Profile |
{PageName} | 完整路径 | user/profile |
{TemplateName} | 模板名 | blank 或 hello-world |
{CreatedDate} | 创建日期 | 2024-09-18 |
{CreatedTime} | 创建时间 | 14:30:25 |
完整使用示例
让我们通过一个完整的例子来看看如何使用：
示例 1：创建用户个人资料页面
$ lovrabet add page
❓ 请选择页面模板：
◆ blank (空白页面)
◆ hello-world (示例页面)
❓ 请输入路由路径： user/profile
✅ 页面创建成功！
文件位置： src/pages/user/profile/
访问地址： http://localhost:5173/user/profile
示例 2：创建商品列表页面
$ lovrabet add page
❓ 请选择页面模板：
◆ blank (空白页面)
◆ hello-world (示例页面) ← 选择这个
❓ 请输入路由路径： shop/products
✅ 页面创建成功！
文件位置： src/pages/shop/products/
访问地址： http://localhost:5173/shop/products
生成后下一步
页面创建完成后，你可以：
- 打开代码编辑器，查看
src/pages/下新生成的文件 - 启动开发服务：
lovrabet start - 访问新页面：在浏览器中输入对应的路由地址
- 开始开发：根据你的需求修改页面内容
常见问题
问题 1：生成的页面路由无法访问
可能原因：项目的路由配置没有包含动态路由。
解决方法：检查项目的路由配置文件，确保支持动态路由匹配。
问题 2：想修改页面模板
如果你对默认的页面模板不满意，可以：
- 查看 CLI 项目源代码中的
templates目录 - 修改模板文件
- 或者创建自定义模板
小提示：生成的页面只是起点，你可以根据需要随意修改和定制！