从零开始构建一个现代化前端项目：一个二本逆袭者的实战手记

去年十月，武汉的秋天来得特别早。那天晚上十点半，我坐在光谷软件园B3栋的工位上，盯着屏幕上那个空荡荡的 create-react-app 项目目录发呆。窗外长江二桥的灯光在雨雾中模糊成一片，而我的大脑也像被蒙了层纱——这个新启动的内部运营工具，要我“从零搭建一个现代化前端项目”，听起来简单，做起来却让我彻夜难眠。

我是谁？一个普通二本毕业、靠刷 LeetCode 和 GitHub 开源项目硬生生挤进大厂的 Java 后端，如今却被安排主导一个前端项目。没错，就是那个面试时被问到“React 和 Vue 的响应式原理区别”差点当场社死的人。但生活就是这样，你永远不知道下一次挑战会不会从后端跳到前端。

实战经验：选型比写代码更折磨人

项目目标很明确：给运营团队做一个数据看板 + 内容配置后台，要求开发快、维护易、体验好。老板说：“你们年轻人懂技术，自己定方案。”

于是我和两位实习生围在茶水间的小白板前，开始了长达三天的技术选型拉锯战。

框架之争：
Vue 还是 React？我们团队后端全是 Java，对 TypeScript 天然亲近。我翻出自己 GitHub 上 star 过的 200+ 项目，对比了社区活跃度、TypeScript 支持、学习曲线。最后拍板用 Vite + React + TypeScript —— 不是因为 React 多牛，而是我们组有个实习生刚在 B 站看完“React 18 新特性”系列，激情满满。我心想：行吧，至少有人能扛起组件库。

状态管理：
Redux？Zustand？还是直接用 React Context？我回想起自己第一次学 Redux 时被 action、reducer、middleware 绕晕的经历，果断放弃。最终选了 Zustand —— 代码少、心智负担低，还能天然支持 TypeScript。事实证明，这个决定让两个实习生三天就上手了核心逻辑。

UI 库：
Ant Design vs Arco Design？前者生态成熟，后者国产、文档友好。考虑到运营小姐姐们对“好看”的执念（她们真的会因为按钮圆角不够柔和打回需求！），我们选了 Arco Design。结果上线后她们果然夸：“这个配色好温柔～”

面试题挑战：现实比八股文残酷一百倍

你以为选完技术栈就万事大吉？Too young。

第一周，我就在 CI/CD 上栽了跟头。本地跑得好好的，推到 GitLab 就报错。排查半天，发现是 Vite 的 import.meta.env 在非 dev 模式下不生效。这问题我在面试时被问过：“Vite 的环境变量怎么处理？”当时背了标准答案，但真遇到 production 构建失败，才发现文档里那句“需通过 define 配置”藏得多深。

还有一次，运营同事提了个“很简单”的需求：上传 Excel 自动解析并预览。我自信满满地引入 xlsx 库，结果在 Safari 上直接崩了——因为用了 Array.prototype.at()，而 Safari 15.4 以下不支持。那一刻我突然理解了为什么大厂面试总问“兼容性处理”。不是为了刁难你，是真的会踩坑。

最崩溃的是性能问题。当数据量涨到 10 万行，表格渲染直接卡死。我连夜研究虚拟滚动，对比 react-window 和 virtuoso，最后用 virtuoso + 动态列宽计算搞定了。第二天晨会上，运营主管笑着说：“小伙子，现在滑动丝滑多了！”——那一刻，值了。

运营不是“打杂”，而是产品的眼睛

以前我以为运营就是“提需求的”，直到这次深度合作才明白：他们是离用户最近的人。

有一次，我按常规做了个日期筛选器，结果运营小李直接冲到我工位：“这个不能只选一天！我们要看连续7天的趋势！”我愣住——原来他们每天要看竞品活动周期，单日数据毫无意义。我立刻重构了时间选择逻辑，加了“自定义周期”和“同比环比”开关。

还有一次，他们反馈“导出按钮太隐蔽”。我本想反驳“Figma 原型就这么画的”，但忍住了。回去看用户行为热力图，发现 60% 的人根本找不到导出入口。于是我把按钮从右上角挪到列表下方，并加了动画提示。第二天，导出使用率涨了 3 倍。

这些细节，没有一行写在 PRD 里，却决定了产品生死。我终于懂了：技术不是炫技，是为业务服务。这也是为什么我现在每次写组件，都会先问运营：“你们平时怎么用这个功能？”

GitHub：我的第二简历

说到 GitHub，不得不提我的“逆袭密码”。

三年前，我还是月薪 8k 的外包仔，住在关山大道月租 1200 的老小区。每天下班后刷题、做 demo、往 GitHub 传代码。记得有次为了搞懂 Webpack，我手写了 200 行 loader，虽然没人 star，但面试官看到后眼睛一亮：“你这个实现思路很清晰。”

如今我的 GitHub 有了 1.2k followers，虽然不算多，但每次新项目启动，我都会先搜一遍有没有现成轮子。这次用的 Excel 解析方案，就是基于一个 star 500+ 的开源库二次封装的。我还顺手提了两个 PR，修复了中文路径 bug——没想到作者 merged 后还私信感谢我。

GitHub 不只是代码仓库，更是你的技术名片。HR 可能看不懂你的架构图，但看到你 commit 频繁、issue 回复及时、PR 描述清晰，就知道你靠谱。

从焦虑到从容：一个普通人的成长

上周五晚上，我又加班到十点。但这次不是因为 bug，而是主动优化首屏加载速度。回家路上，老婆发微信：“今天能准时吃饭吗？”我笑着回：“马上到，项目上线了，以后不用天天熬了。”

回想一年前，我还在为“能不能转正”失眠；现在，薪资从 15k 涨到了 22k，还在光谷买了个小两居（虽然房贷压得喘不过气）。但最大的变化不是数字，是心态——我不再害怕“不会”，因为知道所有问题都有解法，只要肯查、肯试、肯问。

最后一点真心话

如果你也在从零搭建项目，别被“现代化”吓住。所谓现代化，不是堆砌最新技术，而是用合适的工具解决真实问题。

• 别为了用微前端而微前端，十个页面的项目用 Next.js 足够；
• 别迷信 SSR，如果 SEO 不重要，CSR + 静态资源 CDN 更香；
• 别忽视测试，哪怕只写关键路径的 E2E，也能省下半夜救火的时间。

技术选型没有标准答案，只有“当下最合适”。就像我，一个 Java 后端硬着头皮搞前端，不也活下来了？

共勉。
—— 一个在光谷软件园搬砖的普通人，2024年秋