create-react-project

🚀 一个快速生成React项目的CLI工具，基于两个优秀项目的架构设计，集成了现代化的开发工具链和性能优化特性。

✨ 特性

• 🏗️ 现代化架构: React 18 + TypeScript + Vite + Antd + Redux Toolkit
• 📊 图表支持: 集成ECharts图表库，提供丰富的图表组件
• 🗺️ 地图支持: 集成AntV L7地图库，支持复杂的地图可视化
• ⚡ 性能优化: 首屏优化、字体延迟加载、代码分割、懒加载
• 🎨 样式方案: Less + CSS Modules + 响应式设计
• 🔧 开发工具: ESLint + Prettier + Husky + Commitizen
• 📱 移动端适配: 响应式设计 + 移动端优化
• 🚀 构建优化: 图片压缩、Gzip压缩、Bundle分析
• 🐛 Mock数据: 内置Mock数据支持，快速开发
• 📦 部署支持: Docker + Nginx + 部署脚本

🚀 快速开始

安装

# 全局安装
npm install -g create-react-project

# 或者使用npx
npx create-react-project my-app

使用

# 交互式创建项目
create-react-project my-app

# 指定项目类型
create-react-project -t dashboard my-dashboard

# 使用默认配置快速创建
create-react-project --yes my-app

# 查看帮助
create-react-project --help

📋 项目类型

🚀 Full Stack (完整版)

• 包含所有功能特性
• 适合大型企业级应用
• 完整的开发工具链

📊 Dashboard (仪表板)

• 专注于数据展示
• 丰富的图表组件
• 响应式布局设计

🔍 Analysis (数据分析)

• 数据可视化工具
• 图表和地图支持
• 分析功能组件

⚡ Minimal (基础版)

• 轻量级React应用
• 基础开发工具
• 快速原型开发

🛠️ 技术栈

核心框架

• React 18: 最新版本的React框架
• TypeScript: 类型安全的JavaScript超集
• Vite: 快速的构建工具

UI组件库

• Ant Design: 企业级UI设计语言
• CSS Modules: 模块化CSS解决方案
• Less: CSS预处理器

状态管理

• Redux Toolkit: 现代化的Redux工具包
• React Redux: React的Redux绑定

图表和地图

• ECharts: 强大的图表库
• AntV L7: 地理空间数据可视化

开发工具

• ESLint: 代码质量检查
• Prettier: 代码格式化
• Husky: Git钩子管理
• Commitizen: 标准化提交信息

📁 项目结构

my-app/
├── src/
│   ├── components/          # 可复用组件
│   │   ├── Charts/         # 图表组件
│   │   ├── Map/            # 地图组件
│   │   └── LazyLoad/       # 懒加载组件
│   ├── pages/              # 页面组件
│   ├── hooks/              # 自定义Hooks
│   ├── utils/              # 工具函数
│   │   ├── performance/    # 性能优化工具
│   │   └── map/            # 地图工具
│   ├── services/           # API服务
│   ├── store/              # 状态管理
│   ├── types/              # TypeScript类型
│   ├── styles/             # 全局样式
│   └── assets/             # 静态资源
├── mock/                   # Mock数据
├── scripts/                # 部署脚本
├── public/                 # 公共资源
├── vite.config.ts          # Vite配置
├── tsconfig.json           # TypeScript配置
├── package.json            # 项目配置
└── README.md               # 项目说明

🎯 性能优化特性

首屏优化

• 字体延迟加载策略
• 关键资源预加载
• DNS预解析和预连接
• 首屏关键路径优化

代码分割

• 智能分包策略
• 路由级别懒加载
• 组件级别懒加载
• 第三方库按需加载

资源优化

• 图片压缩和优化
• Gzip压缩支持
• 静态资源缓存策略
• Bundle分析和优化

🗺️ 地图功能

基础功能

• 点图层渲染
• 线图层渲染
• 面图层渲染
• Marker信息展示

高级特性

• 自定义图标生成
• 发光效果支持
• 交互事件处理
• 图层管理

📊 图表功能

基础图表

• 柱状图 (BarChart)
• 饼图 (PieChart)
• 折线图 (LineChart)
• 基础图表 (BaseChart)

图表工具

• 颜色生成工具
• 主题配置
• 响应式适配
• 数据格式化

🔧 开发工具

代码质量

• ESLint规则配置
• Prettier格式化
• TypeScript类型检查
• Git钩子管理

开发体验

• 热重载支持
• 代理配置
• Mock数据
• 错误边界

🚀 部署支持

部署方式

• 脚本部署
• Docker容器化
• Nginx配置
• 环境配置

部署脚本

• 生产环境部署
• 开发环境部署
• 自动化构建
• 错误处理

📖 使用示例

创建项目

# 创建完整版项目
create-react-project my-full-app

# 创建仪表板项目
create-react-project -t dashboard my-dashboard

# 快速创建（使用默认配置）
create-react-project --yes my-quick-app

开发命令

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

# 代码检查
npm run lint

# 代码格式化
npm run format

性能分析

# 分析打包结果
npm run build:analyze

# 查看Bundle大小
npm run build:optimized

🔧 配置说明

环境变量

创建 .env 文件：

# API配置
VITE_API_BASE_URL=https://your-api-domain.com
VITE_API_TIMEOUT=10000

# 应用配置
VITE_APP_TITLE=My React App
VITE_APP_VERSION=1.0.0

Vite配置

项目包含优化的Vite配置：

• 图片压缩
• Gzip压缩
• 代码分割
• 代理配置
• 路径别名

TypeScript配置

完整的TypeScript配置：

• 严格模式
• 路径映射
• 类型检查
• 模块解析

🤝 贡献指南

欢迎贡献代码和提出建议！

1. Fork 项目
2. 创建特性分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

📄 许可证

MIT License

🙏 致谢

感谢以下项目的优秀架构设计：

• analyse-front
• cockpit-front

📞 支持

如有问题或建议，请：

• 提交 Issue
• 发送邮件
• 联系开发团队

Happy Coding! 🎉