2
0

11-home-frontend.md 1.1 KB

前台Home页面开发流程规范 (Tailwind CSS版)

适用场景

前台用户界面开发,包括首页、登录页、注册页、会员中心等面向普通用户的页面实现流程。采用原生Tailwind CSS进行样式开发。不使用antd

目录结构

src/client/home/
├── index.tsx           # 入口文件
├── routes.tsx          # 路由配置
├── components/         # 共享组件
│   ├── ErrorPage.tsx   # 错误页面
│   ├── NotFoundPage.tsx # 404页面
│   └── ProtectedRoute.tsx # 路由保护组件
├── hooks/              # 自定义hooks
│   └── AuthProvider.tsx # 认证上下文
├── layouts/            # 布局组件
│   └── MainLayout.tsx  # 主布局
└── pages/              # 页面组件
    ├── HomePage.tsx    # 首页
    ├── LoginPage.tsx   # 登录页
    ├── RegisterPage.tsx # 注册页
    └── MemberPage.tsx  # 会员中心

1. 创建页面组件

  • 位置: src/client/home/pages/[PageName].tsx

2. 注册路由配置

  • 位置: src/client/home/routes.tsx ```