CICD Frontend

一个简单的 React + Vite 前端，使用 Node.js 和 pnpm。页面包含计数增加、减少、重置，以及 React / Vite 官方文档入口，适配桌面和手机。

环境

• Node.js ^20.19.0 或 >= 22.12.0；CI 使用 Node.js 20。
• pnpm 9.15.9。

本地开发

在 CICD 目录下执行：

pnpm install
pnpm dev

默认地址是 http://localhost:5173，端口被占用时 Vite 会自动选择下一个可用端口，以终端输出为准。编辑 src/App.jsx 或样式文件后会自动更新页面。

检查与构建

pnpm lint
pnpm test
pnpm build
pnpm preview

pnpm lint 使用 Oxlint 检查代码；pnpm test 使用 Vitest 单次运行组件测试；pnpm build 将生产文件输出到 dist/；pnpm preview 在本地预览构建结果，默认地址是 http://localhost:4173。

CI 环境可以依次运行：

pnpm install --frozen-lockfile
pnpm lint
pnpm test
pnpm build

GitHub Actions 工作流位于 .github/workflows/ci.yml，在推送到 main 和所有 Pull Request 时执行上述步骤，并启用 pnpm 缓存。将 CICD 作为仓库根目录上传时，需要一并提交 pnpm-lock.yaml。

将 dist/ 目录发布到静态文件服务器即可部署。pnpm preview 只用于本地预览，不作为生产服务器。

主要文件

src/
  assets/       # 模板自带的图片与标志
  App.jsx       # 页面与计数逻辑
  App.css       # 页面样式
  index.css     # 全局样式
  main.jsx      # React 入口
index.html      # HTML 入口
vite.config.js  # Vite 配置

计数范围为 0 到 9999，刷新页面后回到 0。项目为纯前端示例，不需要后端服务或环境变量。