外包服务大赛项目脚手架说明

项目技术栈

这是一个现代化、高效的前端开发框架，结合了以下核心技术：

• React: 用于构建用户界面的 JavaScript 库
• Vite: 下一代前端构建工具，提供极速的开发体验
• Ant Design (antd): 企业级 UI 设计语言和 React 组件库
• TypeScript: JavaScript 的超集，提供静态类型检查
• Less: CSS 预处理器，增强 CSS 的编写能力

项目结构

项目目录结构如下：

contets2025/
├── assets/                # 静态资源
├── public/                
├── example/               # 组件使用示例，mvp场景
├── src/                   # 公共组件集合
│  ├── agent/              # agent组件
│  ├── chantbot/           # 聊天机器人
│  ├── CreateExamPaper/    # 试卷组件
│  ├── QuestionRender/     # 题目组件
├── styles/                # 全局样式，默认导入每个less文件内
│  ├── mixin.less          # less混合方法
│  ├── varianles.less      # less全局变量
├── utils/                 # 工具文件
├── .gitignore             # git提交忽略的文件配置
├── index.html             # 应用HTML入口
├── package.json           # 管理项目配置信息文件
├── tsconfig.json          # TypeScript配置
└── vite.config.ts         # Vite配置

开发流程（使用node19以上版本）

安装依赖

npm install
# 或
yarn

开发模式

npm run dev
# 或
yarn dev

测试构建

npm run build:test
# 或
yarn build:test

生产构建

npm run build
# 或
yarn build

最佳实践

1. 组件设计
   • 将组件分为展示组件和容器组件
   • 使用函数组件和 React Hooks
   • 合理使用 Context、Redux 进行状态管理
2. 样式管理
   • 使用 Less 变量统一管理颜色、间距等
   • 组件样式与组件文件放在一起
   • 全局样式放在 styles 目录
3. 类型定义
   • 为组件 Props 和 API 响应定义接口
   • 使用泛型处理通用逻辑
   • 合理使用类型别名和枚举
4. 性能优化
   • 使用 React.memo 优化组件渲染
   • 合理使用 useMemo 和 useCallback