新建项目

新建项目前提是完成 技术选型，然后根据选型结果搭建工程模板。

模板项目结构

下面以 react 单页面应用为例（具体配置参考子文档）：

project
├─ public
│  └─ index.html
├─ src
│  ├─ assets              # 静态资源（图片、字体、全局样式）
│  ├─ components          # 通用组件
│  ├─ pages / containers  # 页面级组件
│  ├─ hooks               # 公共 hooks
│  ├─ utils               # 工具函数
│  ├─ services / api      # 接口请求
│  ├─ store               # 状态管理
│  ├─ router              # 路由配置
│  ├─ types               # 全局类型
│  ├─ styles              # 全局样式、变量
│  ├─ config              # 环境配置
│  ├─ App.tsx
│  └─ main.tsx
├─ .editorconfig
├─ .eslintrc.js
├─ .prettierrc
├─ .stylelintrc.js
├─ tsconfig.json
├─ vite.config.ts / webpack.config.js
├─ package.json
└─ README.md

实践文章

• 新建 Vite + React + TS 项目（推荐）
• 新建 Next.js 全栈项目（React 全栈）
• webpack5 从 0 搭建 react SPA（学习用，实际项目优先 Vite）
• 新建一个 react 单页面项目（CRA 实战）（已过时，仅作历史参考）

注意事项

1. 避免重新造轮子：先用官方脚手架（create-vite、create-next-app），再按需定制
2. 约定文件命名：组件 PascalCase、工具/hook camelCase
3. 路径别名必加：@ 指向 src，配合 tsconfig paths
4. 不要 eject：用 react-app-rewired 或迁移到 Vite 替代 CRA 的 eject