从0搭建完整的企业级前端工程化体系，覆盖代码规范，CI/CD,性能优化，AI辅助审查全链路
本项目基于 Vue3+Typescript+Vite+pnpm 技术栈，通过23个专题Demo+1个AI Code Review工具，完整实践了从“本地开发”到“线上部署”的工程化全流程。
核心目标：解决多人协作线下代码质量不可控，部署流程繁琐，线上问题难定位等团队痛点。
全程流程展示：配有全程从搭建到代码到测试到完善的完整流程 fork 即看即用 快速上手 易于理解
文件夹名字开头带点 `.`，代表这是隐藏文件夹
demo/
├── .github/
│ └── workflows/
│ ├── ci.yml # CI 流水线
│ └── deploy.yml # CD 流水线
├── .vscode/
│ └── setting.json # vscode 配置 此处是live server的端口配置 以及保存prettier自动化
├── Demo1 pnpm 硬链接与符号链接机制验证/
│ ├── npm/ # npm 验证区
│ └── pnpm/ # pnpm 验证区
|── Demo2/
| └── demo2-env/
| ├── package.json
| ├── pnpm-lock.yaml
| ├── index.html
| ├── visualize.html
| ├── knowledge-graph.json
| ├── tsconfig.json
| ├── vite.config.ts
| ├── playwright.config.js
| │
| ├── public/
| │ ├── favicon.svg
| │ ├── icons.svg
| │ └── sw.js
| │
| ├── deploy/ # 当前构建部署产物
| │ ├── index.html
| │ ├── favicon.svg
| │ ├── icons.svg
| │ └── assets/
| │ ├── index-yMkJyNDY.js
| │ ├── index-yMkJyNDY.js.map
| │ ├── vue-vendor-Ys7FJ5fz.js
| │ ├── vue-vendor-Ys7FJ5fz.js.map
| │ └── vue-vendor-DAacDxeL.css
| │
| ├── backups/ # 历史构建备份
| │ ├── dist-2026-08-03T06-54-51-273Z/
| │ │ ├── index.html
| │ │ ├── favicon.svg
| │ │ ├── icons.svg
| │ │ └── assets/
| │ │ ├── index-yMkJyNDY.js
| │ │ ├── index-yMkJyNDY.js.map
| │ │ ├── vue-vendor-Ys7FJ5fz.js
| │ │ ├── vue-vendor-Ys7FJ5fz.js.map
| │ │ └── vue-vendor-DAacDxeL.css
| │ │
| │ └── dist-2026-08-03T08-04-27-411Z/
| │ ├── index.html
| │ ├── favicon.svg
| │ ├── icons.svg
| │ └── assets/
| │ ├── index-yMkJyNDY.js
| │ ├── index-yMkJyNDY.js.map
| │ ├── vue-vendor-Ys7FJ5fz.js
| │ ├── vue-vendor-Ys7FJ5fz.js.map
| │ └── vue-vendor-DAacDxeL.css
| │
| ├── router/
| │ └── index.ts
| │
| ├── scripts/
| │ ├── build-graph.ts
| │ ├── deploy.ts
| │ ├── generate.ts
| │ └── rollback.ts
| │
| ├── e2e/
| │ └── homepage.spec.ts
| │
| └── src/
| ├── App.vue
| ├── main.js
| ├── style.css
| │
| ├── assets/ # 源码静态资源
| │ ├── hero.png
| │ ├── vite.svg
| │ └── vue.svg
| │
| ├── api/
| │ ├── product.ts
| │ └── testApi.ts
| │
| ├── components/
| │ ├── HelloWorld.vue
| │ ├── LogoDebugTrigger.vue
| │ └── WebSocketDemo.vue
| │
| ├── composables/
| │ └── useVConsole.ts
| │
| ├── stores/
| │ └── modules/
| │ └── product.ts
| │
| ├── types/
| │ ├── global.d.ts
| │ ├── logger.d.ts
| │ └── vconsole.d.ts
| │
| ├── utils/
| │ ├── logger.ts
| │ ├── performanceReporter.ts
| │ ├── request.ts
| │ ├── requestPool.ts
| │ ├── retry.ts
| │ └── _tests_/
| │ └── math.test.ts
| │
| └── views/
| ├── Admin.vue
| ├── Home.vue
| ├── User.vue
| └── product/
| └── index.vue
├── screenshots/
├── 全流程操作过程.MD
├── Full-process-Operation.MD
├── LICENSE
├── README.en.md
└── README.md
省略:
.git/
node_modules/
构建产物、Source Map 和部分静态资源细节
- | 框架 | Vue3+Typescript |
- | 构建工具 | Vite |
- | 包管理工具 | pnpm |
- | 代码规范 | ESLint+Prettier |
- | CI/CD | Github Actions + Github Pages|
- | 单元测试 | Vitest |
- | 代码规范 | ESLint+Prettier+Husky+Lint-Staged |
- | E2E测试 | Playwright |
- | 网络治理 | Axios + 请求池 +指数退避重试 |
- | 抓包代理 | whistle |
- | 调试工具 | vConsole + SourceMap + 远程日志回捞 |
- | 性能优化 | Lighthouse |
- | 性能监控 | Web Vitals(LCP/INP/CLS)
Largest Contentful Paint(最大内容绘制【加载性能】)
Cumulative Layout Shift (累积布局偏移【页面会不会乱跳】)
Interaction to Next Paint (交互至下一次绘制【全部交互响应】)|
- | 代码审查 | AI Code Review |
- | AI辅助审查 | 知识图谱生成 + AI Code Review |
- ESLint + Prettier + Husky 强制代码规范，不合格代码无法提交
- 多环境配置（.env.production/.env.staging/.env.development），不同环境不同配置 一套代码三套环境
- 自动化代码生成器(`pnpm gen`)，一键生成界面/ API / Store骨架
- 路由懒加载 + manualChunks分包，首屏体积减少40%-60%
- SourceMap生产报错精准定位源码
- CDN 路径配置 + 版本资源号 hash 控制浏览器缓存
- Lighthouse性能分析，性能优化
- Axios + 请求池控制并发数：同域名最多6个并发，防止浏览器崩溃
- 指数退避重试(500ms->1000ms->2000ms...)
- whistle抓包代理，模拟网络环境：Mock数据，重定向等/ 跨域CORS注入 / HTTPS 解密 /线上热替换
- 单元测试：Vitest，覆盖核心工具函数
- E2E测试：Playwright自动打开浏览器，模拟用户真实操作
- CI流水线：Github Actions，push后自动执行 lint+test+build,失败则阻止合并
- CD流水线：CI通过后自动构建并发布到Github Pages
- 部署与回滚：`pnpm deploy` 备份+部署+冒烟测试，`pnpm rollback` 回滚一键恢复
- vconsole隐藏入口：连续点击5次，显示调试入口，无需发版即可线上调试
- 远程日志回捞：错误日志存localStorage，用户一键导出JSON
- ServiceWorke：断网刷新页面依然可访问（PWA 离线缓存）
- WebSockets:全双工实时消息推送，实时更新数据
- Web Vitals:LCP/INP/CLS/TTFB性能监控实时采集
- 知识图谱生成：`ts-morph` 静态分析源码，`d3.js` 可视化展示函数依赖关系
- AI Code Review 三种方式：
- 方式一：手动复制 Prompt 喂给 AI（最低成本）
- 方式二：基于 `pnpm graph` 生成知识图谱后半自动整理 Prompt
- 方式三：配置 API Key 全自动调用 AI 生成报告
# 1.安装依赖
- pnpm i
# 2.启动开发环境
- pnpm dev
# 3.启动生产环境
- pnpm build
- pnpm preview
# 4.启动测试环境
- pnpm test # 单元测试
- pnpm test:e2e # E2E测试
# 5.构建与部署
- pnpm build # 构建生产产物
- pnpm deploy # 自动化部署
# 6.回滚
- pnpm rollback # 一键回滚
# 7.AI辅助研发
- pnpm graph # 知识图谱生成
- 将 knowledge-graph.json 作为上下文输入 AI，生成 AI Code Review✅ 所有工程化能力均可复用：6 个工具函数即插即用（requestPool、retry、logger、useVConsole 等）
✅ CI/CD 全流程无人值守：从 git push 到自动部署到 GitHub Pages，完全自动化
✅ 线上调试无需重新发版：vConsole 隐藏入口 + 远程日志回捞，线上问题 5 分钟内定位
✅ AI 辅助 Code Review：知识图谱精准分析影响范围，AI 自动生成 Review 意见
GitHub Pages 地址：https://terrenceeeee.github.io/Front-end-engineering/
知识图谱示例：运行 pnpm graph 后生成 visualize.html 打开即可查看
类型 文件 复用方式
工具函数 utils/requestPool.ts 直接复制到新项目
工具函数 utils/retry.ts 直接复制到新项目
工具函数 utils/logger.ts 直接复制到新项目
工具函数 composables/useVConsole.ts 直接复制到新项目
工具函数 src/utils/performanceReporter.ts 直接复制到新项目
工具函数 src/components/LogoDebugTrigger.vue 直接复制到新项目
工具函数 src/components/WebSocketDemo.vue 直接复制到新项目
配置文件 .eslintrc.cjs 复制 + 微调（是 React 项目，去掉 plugin:vue，换成 React 规则集）
配置文件 .prettierrc.cjs 复制 + 微调（改改 printWidth（行宽）、singleQuote（单引号）偏好）
配置文件 .husky/pre-commit 复制 + 微调（改规则集）
配置文件 vite.config.ts 的 build.rollupOptions 复制 + 微调（改规则集）
配置文件 .github/workflows/deploy.yml 复制 + 微调（改VITE_BASE_PATH（部署子路径）、Node 版本）
配置文件 playwright.config.js 复制 + 微调（改baseURL（http://127.0.0.1:5173→新项目端口）、testDir（./e2e））
配置文件 vite.config.ts 的 resolve.alias 复制 + 微调（改'@': path.resolve(__dirname, 'src') 路径）
配置文件 vite.config.ts 的 test 配置 复制 + 微调（改规则集）
配置文件 .github/workflows/ci.yml 复制 + 微调（改 Node 版本）
脚本 scripts/generate.ts 改模板内容后复用
脚本 scripts/deploy.ts 改部署目标后复用
脚本 scripts/rollback.ts 改备份路径后复用
- 作者：ChamLerrence
- GitHub: https://github.com/terrenceeeee
- 完成时间：2026 年 9 月
- 学习路径：从零搭建 23 个工程化 Demo + AI Code Review 项目
MIT © 2026 Terrenceeeee