Runcode 项目使用教程

Runcode 项目使用教程

1. 项目目录结构及介绍

runcode/
├── client/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── styles/
│   │   ├── App.tsx
│   │   ├── index.tsx
│   ├── package.json
│   ├── tsconfig.json
├── server/
│   ├── src/
│   │   ├── docker/
│   │   ├── routes/
│   │   ├── app.ts
│   ├── package.json
│   ├── tsconfig.json
├── question/
│   ├── FrontEnd/
│   │   ├── demo/
│   │   │   ├── answer.md
│   │   │   ├── answer.mjs
│   │   │   ├── index.md
│   │   │   ├── index.mjs
│   │   │   ├── test.mjs
├── .gitignore
├── .npmrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── pnpm-lock.yaml
├── qs.mjs
├── qscreate.mjs

目录结构介绍

• client/: 客户端代码目录，包含前端代码和相关配置文件。

  • public/: 存放静态资源文件。
  • src/: 前端源代码目录，包含组件、页面、样式等。
  • package.json: 客户端项目的依赖配置文件。
  • tsconfig.json: TypeScript 配置文件。

• server/: 服务端代码目录，包含后端代码和相关配置文件。

  • src/: 服务端源代码目录，包含 Docker 配置、路由等。
  • package.json: 服务端项目的依赖配置文件。
  • tsconfig.json: TypeScript 配置文件。

• question/: 存放前端编程题挑战的目录。

  • FrontEnd/: 前端编程题目录，包含各个题目的答案、描述和测试文件。

• .gitignore: Git 忽略文件配置。

• .npmrc: npm 配置文件。

• CHANGELOG.md: 项目更新日志。

• LICENSE: 项目许可证。

• README.md: 项目说明文档。

• package.json: 项目根目录的依赖配置文件。

• pnpm-lock.yaml: pnpm 锁定文件。

• qs.mjs: 前端编程题生成脚本。

• qscreate.mjs: 前端编程题创建脚本。

2. 项目启动文件介绍

客户端启动文件

• client/src/index.tsx: 客户端入口文件，负责渲染 React 应用。
• client/src/App.tsx: 客户端主应用组件，包含路由和全局状态管理。

服务端启动文件

• server/src/app.ts: 服务端入口文件，负责启动 Koa 服务器并加载路由。

3. 项目配置文件介绍

客户端配置文件

• client/package.json: 客户端项目的依赖配置文件，包含项目名称、版本、依赖包等信息。
• client/tsconfig.json: TypeScript 配置文件，定义 TypeScript 编译选项。

服务端配置文件

• server/package.json: 服务端项目的依赖配置文件，包含项目名称、版本、依赖包等信息。
• server/tsconfig.json: TypeScript 配置文件，定义 TypeScript 编译选项。

项目根目录配置文件

• package.json: 项目根目录的依赖配置文件，包含项目名称、版本、依赖包等信息。
• pnpm-lock.yaml: pnpm 锁定文件，确保依赖包版本一致性。
• .gitignore: Git 忽略文件配置，指定哪些文件或目录不需要被 Git 管理。
• .npmrc: npm 配置文件，定义 npm 的行为和配置。
• CHANGELOG.md: 项目更新日志，记录项目的版本更新和变更内容。
• LICENSE: 项目许可证，定义项目的开源许可协议。
• README.md: 项目说明文档，提供项目的概述、安装和使用说明。