# React开发模版

**Repository Path**: adminzhu/react-development-template

## Basic Information

- **Project Name**: React开发模版
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-02
- **Last Updated**: 2025-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MY-REACT-APP 项目文档

## 项目概述

MY-REACT-APP 是一个基于 React 18、TypeScript、Vite 和 React Router 构建的前端项目模板。该项目旨在提供一个现代化、高性能的前端开发基础架构。

## 项目结构

MY-REACT-APP/
├── .vscode/                # VS Code 配置文件
├── data/                   # 模拟数据文件
├── dist/                   # 构建输出目录
├── node_modules/           # 项目依赖
├── public/                 # 公共资源文件
├── src/                    # 源代码目录
│   ├── api/                # API 请求相关代码
│   ├── assets/             # 静态资源文件
│   ├── components/         # 可复用组件
│   ├── config/             # 项目配置
│   ├── hooks/              # 自定义 Hook
│   ├── language/           # 国际化相关
│   ├── layouts/            # 布局组件
│   ├── redux/              # 状态管理 (可选)
│   ├── routers/            # 路由配置
│   ├── styles/             # 全局样式
│   ├── types/              # TypeScript 类型定义
│   ├── utils/              # 工具函数
│   ├── views/              # 页面组件
│   ├── App.tsx             # 根组件
│   └── main.tsx            # 入口文件
├── .editorconfig           # 编辑器配置
├── .env                    # 环境变量
├── .env.development        # 开发环境变量
├── .env.production         # 生产环境变量
├── .env.test               # 测试环境变量
├── .eslintignore           # ESLint 忽略文件
├── .eslintrc.js            # ESLint 配置
├── .gitignore              # Git 忽略文件
├── .prettierignore         # Prettier 忽略文件
├── .prettierrc.js          # Prettier 配置
├── .stylelintignore        # Stylelint 忽略文件
├── .stylelintrc.js         # Stylelint 配置
├── commitlint.config.js    # Commitlint 配置
├── index.html              # HTML 模板
├── LICENSE                 # 许可证
├── lint-staged.config.js   # lint-staged 配置
├── package-lock.json       # 依赖锁定文件
├── package.json            # 项目配置
├── postcss.config.js       # PostCSS 配置
├── README.md               # 项目文档 (当前文件)
├── run.bat                 # 启动脚本 (Windows)
├── tsconfig.json           # TypeScript 配置
└── vite.config.ts          # Vite 配置

## 技术栈

- **React 18**: 用于构建用户界面的 JavaScript 库
- **TypeScript**: 为 JavaScript 提供类型系统的超集
- **Vite**: 下一代前端构建工具，提供极速的开发体验
- **React Router**: 用于实现单页应用的路由功能
- **ESLint**: 代码质量和风格检查工具
- **Prettier**: 代码格式化工具
- **Stylelint**: CSS 代码检查工具
- **Husky + lint-staged**: 代码提交前的 lint 检查
- **Commitlint**: 规范 Git 提交信息

## 安装与运行

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 开发环境

```bash
npm run dev
# 或
yarn dev
```

### 构建生产环境

```bash
npm run build
# 或
yarn build
```

### 本地预览生产构建

```bash
npm run preview
# 或
yarn preview
```

## 环境变量

项目支持多环境配置：

- `.env`: 通用环境变量
- `.env.development`: 开发环境专用变量
- `.env.production`: 生产环境专用变量
- `.env.test`: 测试环境专用变量

## 代码规范

1. **ESLint**: 遵循项目 `.eslintrc.js` 配置
2. **Prettier**: 遵循项目 `.prettierrc.js` 配置
3. **Stylelint**: 遵循项目 `.stylelintrc.js` 配置
4. **Commit 信息**: 遵循 Commitlint 规范

## 目录规范

- **api/**: 存放所有与后端 API 交互的代码
- **assets/**: 存放静态资源如图片、字体等
- **components/**: 存放可复用的基础组件
- **config/**: 存放项目配置相关代码
- **hooks/**: 存放自定义 Hook
- **language/**: 存放国际化相关代码
- **layouts/**: 存放页面布局组件
- **redux/**: (可选) 存放 Redux 相关代码
- **routers/**: 存放路由配置
- **styles/**: 存放全局样式文件
- **types/**: 存放 TypeScript 类型定义
- **utils/**: 存放工具函数
- **views/**: 存放页面级组件

## 贡献指南

1. 提交代码前请确保运行 `npm run lint` 或 `yarn lint` 检查代码规范
2. 提交信息请遵循 Commitlint 规范
3. 新增功能请添加相应的单元测试
4. 修改代码请确保不影响现有功能

## 许可证

本项目采用 [MIT License](LICENSE) 许可证。