项目结构构建
以下集成内容仅对主要对项目的通用层次结构，进行设计说明，如需进行代码对照，可参考目录下 react19_ts 项目内实际代码，文档与代码会在git上持续补充
git仓库地址：https://gitee.com/xiaoli-account/react19_tsReact 19 TypeScript 项目目录结构说明
项目概述
本项目是一个基于 React 19 和 TypeScript 的前端项目，集成了现代化的开发工具和库，包括 React Router、Zustand 状态管理、Ant Design UI 组件库、TailwindCSS 等。
根目录结构
.├── .env.development # 开发环境配置文件├── .env.production # 生产环境配置文件├── .env.mock # Mock 环境配置文件├── .gitignore # Git 忽略配置├── .vscode/ # VSCode 配置├── README.md # 项目说明文档├── index.html # HTML 入口文件├── package.json # 项目配置和依赖├── public/ # 静态资源目录├── src/ # 源代码目录│ ├── App.tsx # 根组件│ ├── main.tsx # 应用入口文件│ ├── assets/ # 静态资源│ ├── components/ # 公共组件│ ├── config/ # 全局配置│ ├── hooks/ # 自定义 Hooks│ ├── i18n/ # 国际化配置│ ├── layout/ # 布局组件│ ├── pages/ # 页面视图 (路由组件)│ ├── plugins/ # 外部插件配置│ ├── router/ # 路由配置│ │ ├── index.tsx # 路由入口│ │ └── routes.ts # 路由定义│ ├── services/ # API 服务层 (HTTP 请求)│ │ ├── auth.ts # 认证相关接口│ │ └── user.ts # 用户相关接口│ ├── store/ # 状态管理 (Zustand)│ │ ├── index.ts # Store 导出│ │ └── user.ts # 用户状态│ ├── styles/ # 全局样式│ ├── types/ # TypeScript 类型定义│ └── utils/ # 工具函数├── tsconfig.app.json # App TS 配置├── tsconfig.json # 主 TS 配置├── tsconfig.node.json # Node TS 配置├── postcss.config.js # PostCSS 配置├── tailwind.config.js # TailwindCSS 配置└── vite.config.ts # Vite 配置
技术栈
- **核心框架**: React 19 + TypeScript
- **构建工具**: Vite
- **路由管理**: React Router v7
- **状态管理**: Zustand
- **UI 组件库**: Ant Design
- **样式方案**: TailwindCSS + Sass
- **流程图引擎**: LogicFlow
- **HTTP 客户端**: Axios
- **国际化**: i18next + react-i18next
项目特点
1. **现代化架构**: 采用 React 19 + Vite 最新技术栈
2. **类型安全**: 全量 TypeScript 开发
3. **原子化样式**: 集成 TailwindCSS，提升开发效率
4. **轻量级状态**: 使用 Zustand 进行简洁的状态管理
5. **国际化**: 完整的 i18n 多语言支持
6. **代码规范**: ESLint + Prettier 统一代码风格
开发命令
# 启动开发服务器npm run dev# 构建生产版本npm run build# 代码检查npm run lint# 预览生产构建npm run preview
