从零开始构建一个现代化前端项目：研二狗的踩坑实录
作者注：我是深圳某211高校软件工程研二学生，目前在实验室接了一个和腾讯云合作的边缘计算可视化项目。平时除了被导师催论文，还得给组里本科生讲技术分享（上周五刚被迫搞了场Rust入门讲座，结果台下睡倒一片）。最近因为想暑期进大厂实习，疯狂刷LeetCode + 搞前端基建，这篇就当是复盘+攒人品了。
起因：产品经理说“就加个小功能”
事情得从去年双11前说起。我们实验室接了个“高大上”的需求：用Web界面实时展示全球边缘节点状态。当时我内心OS：“不就是个ECharts地图嘛？” 结果产品经理（其实是导师兼任）补了一句：“要支持动态拓扑、低延迟更新、暗黑模式，还要适配手机端……对了，下周演示。”
我当场瞳孔地震。要知道我们之前前端还是jQuery + Bootstrap 3 的祖传代码，连Webpack都没配过。更要命的是，隔壁后端同学用Go写的API接口文档居然还在Confluence里手写（还画了UML草图，真的栓Q）。
那晚我盯着VS Code发呆到凌晨三点，突然意识到：这哪是加功能？这是要重构整个前端架构啊！而且——面试官最爱问“你从0到1搭过项目吗？” 这不就是送分题素材？
技术选型：别卷React了，试试新玩具？
先说结论：我最终用了 Vite + Vue 3 + TypeScript + Pinia + UnoCSS。为什么没选React？不是不香，而是……
- 团队现状：组里本科生大多只会Vue 2，强行上React学习成本太高（而且没人愿意周末加班学JSX）
- 开发体验：Vite的HMR快到离谱，改一行代码0.1秒热更新，对比Webpack动不动30s的编译时间，简直是降维打击
- TypeScript友好度：Vue 3的Composition API + TS 写起来贼顺，尤其配合VS Code的智能提示
- 轻量化：UnoCSS比Tailwind更灵活，按需生成CSS，打包体积直接砍掉40%
吐槽一句：后端同学听说我用Vue，一脸鄙夷：“现在大厂都用React了，你这简历怕是要挂。” 我反手甩出字节跳动内部技术栈报告——人家TikTok Web端主力还是Vue呢！
关键依赖清单（package.json 精简版）
{
"dependencies": {
"vue": "^3.4.0",
"pinia": "^2.1.7",
"axios": "^1.6.0"
},
"devDependencies": {
"vite": "^5.0.0",
"typescript": "^5.3.0",
"unocss": "^0.58.0",
"@vitejs/plugin-vue": "^4.5.0"
}
}
坑点实录：那些让我想砸键盘的瞬间
1. GitHub Actions 自动部署翻车现场
为了显得专业，我配置了GitHub Actions做CI/CD：PR合并后自动build并推到腾讯云COS。结果第一次上线就炸了——本地跑得好好的，线上白屏。
Debug两小时才发现：Vite默认把资源路径设为/assets/xxx，但COS的静态托管根路径是/dist/。解决方案是在vite.config.ts里加一行：
export default defineConfig({
base: './', // 关键！解决相对路径问题
// ...
})
教训：永远别信“本地能跑就行”，生产环境专治各种不服。
2. 后端API的跨域之痛
后端同学用Gin框架写了个RESTful API，但死活不肯开CORS。理由是：“你们前端自己配代理啊！”
行吧，我在vite.config.ts里加了代理：
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
结果测试环境部署时又挂了——因为测试服域名不是localhost！最后妥协方案：后端加了个Access-Control-Allow-Origin: *（虽然不安全，但导师说“内网项目无所谓”）。
性能优化：让用户少骂一句“加载好慢”
关键指标监控
| 指标 | 优化前 | 优化后 | 工具 |
|---|---|---|---|
| 首屏加载 | 3.2s | 1.1s | Lighthouse |
| Bundle Size | 2.1MB | 890KB | Webpack Bundle Analyzer |
| FCP | 2.8s | 0.9s | Chrome DevTools |
具体骚操作
- 懒加载路由：用Vue Router的
defineAsyncComponent拆分页面 - 图片压缩：所有静态资源走Sharp预处理（脚本写在
scripts/build.js里） - 防抖搜索：用户输入拓扑节点名时，加500ms防抖避免疯狂请求后端
- 骨架屏：数据加载时显示灰色块，心理上觉得快很多（用户体验玄学）
最骚的是暗黑模式切换：不用CSS变量硬切，而是用UnoCSS的dark:前缀，配合<html class="dark">动态切换，性能比JS方案高30%！
开发心得：这些事早点知道就好了
别重复造轮子：
一开始我想自己写WebSocket重连逻辑，结果发现socket.io-client已经处理了断线重连、心跳检测。省下两天时间刷了三道力扣（面试题储备+1）。TypeScript不是银弹：
组里本科生抱怨TS太难，我就妥协写了// @ts-ignore。结果三天后他自己改代码，类型报错满屏——宁可前期多写interface，也别后期debug到秃头。和后端对齐字段命名：
他们返回node_status，我前端用nodeStatus，结果axios.interceptors.response里得手动转换。后来统一约定：后端用snake_case，前端用camelCase，中间层自动转换。GitHub不是备份盘：
有次我commit message写“fix bug”，结果一周后根本不知道改了啥。现在强制要求：feat(topo): add real-time latency display fix(api): handle null response from /nodes
面试题关联：面试官可能这么问
“你们前端如何保证和后端接口一致？”
→ 答：Swagger生成TS接口定义 + Mock Service Worker拦截请求“首屏加载慢怎么优化？”
→ 答：分包、CDN、关键资源内联、预加载（顺便提一嘴我们用了Vite的preload指令）“如何做错误监控？”
→ 答：Sentry集成 + 自定义window.onerror上报（虽然我们项目小到用不上，但得装懂）
最后：为什么我觉得前端越来越像“全栈”
以前觉得前端就是切页面，现在搞个现代化项目，得操心：
- 构建工具链（Vite/Rollup配置）
- CI/CD流水线（GitHub Actions）
- 性能监控（Lighthouse CI集成到PR）
- 甚至容器化（Dockerfile里跑
npm run build）
上周和腾讯的同学吃饭，他说他们前端团队现在要会写简单的Go中间件——因为SSR需要。我听完默默打开了Rust书（别问，问就是“未来已来”）。
写在结尾
这个项目虽然只是实验室demo，但让我彻底告别了“前端=HTML+CSS”的认知。真正的现代化前端，是用户体验、工程化、协作效率的三位一体。
现在每次打开控制台看到100分的Lighthouse报告，都会傻笑一下。虽然导师还在催论文，但至少——我的简历上能写“独立搭建高性能前端架构”了（手动狗头）。
彩蛋：如果你在深圳，欢迎来参加我们每月一次的“湾区Rust夜”（虽然是蹭腾讯会议室办的）。上次有个实习生现场用Rust写了个WASM模块替换前端加密逻辑，性能提升5倍…… 啊，跑题了。
共勉：代码会崩，需求会改，但热爱不灭。
评论 0