从零开始构建一个现代化前端项目：一个光谷老码农的血泪复盘

武汉·光谷软件园，2024年3月的一个雨夜
我盯着屏幕上闪烁的终端光标，咖啡杯底结了一层褐色的垢——这已经是本周第三杯了。

大家好，我是阿哲，一个在武汉光谷软件园摸爬滚打六年的前端老油条。经历过2022年那波大厂裁员潮（没错，就是你们刷到“脉脉上哭诉”的那一批），靠着半年啃文档、刷LeetCode、疯狂投简历，去年十月终于跳槽成功，月薪从15k涨到了22k，勉强能在关山大道附近租个两居室（房租3500，物业另算，武汉的朋友们懂的都懂）。

今天不聊裁员，也不晒offer，就想和大家唠唠最近让我又爱又恨的一件事：从零开始搭建一个现代化前端项目。听起来是不是平平无奇？但如果你也像我一样，曾经被“脚手架跑不起来”、“依赖冲突”、“后端接口还没写你就得联调”这些破事折磨过，那这篇复盘可能会让你拍大腿：“原来不是我一个人这么惨！”

---

起因：老板一句话，前端肝三天

事情得从去年12月底说起。那天周五下午五点，眼看就要下班去接娃（我老婆总说我“上班像搬砖，下班像逃难”），产品经理小李突然冲进我们工位区，手里还拎着一杯蜜雪冰城——这人一喝奶茶准没好事。

“阿哲，新项目下周启动，你来搭前端架子！技术栈用React，要‘现代化’，最好能直接上CI/CD。对了，后端是Java组的老王他们，接口文档……可能下周一才有。”

我差点把键盘砸他脸上。

“现代化”？这个词在互联网圈就跟“赋能”“抓手”一样，听着高大上，实则全是坑。而且后端接口还没影，我就得开干？这不是让我对着空气画饼吗？

但没办法，谁让我是“资深前端”呢？资历越深，背锅越稳。

当晚回家，老婆看我瘫在沙发上发呆，问我：“又被PUA了？”
我苦笑：“比PUA狠，这是‘前置开发’——后端还没动，前端先造轮子。”

---

第一步：别急着写代码，先想清楚“现代化”到底是个啥

很多人一听到“从零开始”，立马 npx create-react-app my-app，然后一顿操作猛如虎。但我在大厂六年学到的最重要一点是：架构先行，代码靠后。

所谓“现代化前端项目”，在我理解里，至少包含这几个核心要素：

1. 工程化完备：TypeScript + Vite（告别Webpack的慢）
2. 状态管理清晰：Zustand 或 Redux Toolkit（别再用 class component 了求你了）
3. UI 组件库统一：Ant Design 或 Mantine（别自己造 Button）
4. 接口层抽象：Axios 封装 + 请求/响应拦截
5. 环境配置规范：.env 文件区分 dev/staging/prod
6. 代码质量保障：ESLint + Prettier + Husky + lint-staged
7. 部署自动化：GitHub Actions + Nginx 配置

听起来很多？其实拆开做，一天就能搭好骨架。关键是——别让后端拖你后腿。

---

第二步：后端还没动？那就 mock 到他们脸红！

这里必须吹一波 MSW（Mock Service Worker）。这玩意儿简直是前端独立开发的神器。

去年我还在上一家公司时，后端老哥总说：“你先写页面，接口明天给。”结果“明天”变成“下个月”。现在学聪明了——接口没来？我自己造！

我在 src/mocks/ 目录下建了个 handlers.ts：

import { rest } from 'msw'

export const handlers = [
  rest.get('/api/users', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        data: [
          { id: 1, name: '张三', role: '前端' },
          { id: 2, name: '李四', role: '后端' }
        ]
      })
    )
  })
]

然后在 main.tsx 里加个判断：

if (import.meta.env.DEV) {
  const { worker } = await import('./mocks/browser')
  worker.start()
}

搞定！从此我不再等后端。上周三，后端老王终于把接口文档发过来，我对比了一下 mock 数据，居然 90% 字段一致——我差点感动哭了。

程序员黑话时间：
“后端交付延迟” → “前端提前进入 mock 自嗨模式”
“接口字段不一致” → “前后端契约精神崩塌现场”

---

第三步：React 不是玩具，是生产工具

很多人觉得 React 就是写 JSX、useState、useEffect。但真正在大厂做业务，你会发现：组件拆分、状态流向、错误边界、性能优化才是日常。

我这次项目采用了“分层架构”：

• pages/：路由页面，只负责组合
• components/：通用 UI 组件（Button, Modal）
• features/：业务模块（比如 user-profile）
• hooks/：自定义逻辑（useFetchUser, useDebounce）
• services/：接口调用层（axios 封装在这里）

举个例子，获取用户列表：

// services/userService.ts
import axios from 'axios'

const api = axios.create({ baseURL: '/api' })

export const fetchUsers = () => api.get('/users').then(res => res.data)

// hooks/useUsers.ts
import { useState, useEffect } from 'react'
import { fetchUsers } from '@/services/userService'

export const useUsers = () => {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchUsers().then(data => {
      setUsers(data)
      setLoading(false)
    })
  }, [])

  return { users, loading }
}

这样，页面组件就干净得像刚洗过的白衬衫：

// pages/UserListPage.tsx
const UserListPage = () => {
  const { users, loading } = useUsers()

  if (loading) return <Spin />
  return <UserTable data={users} />
}

好处是什么？
当后端突然改了接口路径（比如 /api/users 变成 /v2/users），我只需要改 userService.ts，其他地方纹丝不动。这种“解耦感”，只有被坑过的人才懂。

---

第四步：和后端联调？先签“和平协议”

说到后端，不得不提我和老王的“恩怨情仇”。

上周五晚上八点，我正准备提交代码，他突然在钉钉@我：“阿哲，登录接口改了，密码字段改成 pwd 了，之前是 password。”

我血压瞬间拉满。

于是第二天我拉他开了个15分钟短会，定了三条“前后端契约”：

1. 字段命名统一：全部用 snake_case（user_id）或 camelCase（userId），别混用
2. 错误码规范：401 是未登录，403 是权限不足，别随便返回 500
3. 接口文档实时更新：用 Swagger 或 Apifox，别发 Word 文档！

他还挺配合，说：“行，以后接口有变，我先改文档，再改代码。”

那一刻，我仿佛看到了“前后端和谐共处”的曙光。

---

第五步：部署上线，别让运维半夜打电话骂你

很多前端只关心本地跑起来，但真正的“现代化”，体现在 CI/CD 流水线上。

我在 GitHub 仓库里配了个 .github/workflows/deploy.yml：

name: Deploy to Staging
on:
  push:
    branches: [ develop ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          source: "dist/*"
          target: "/var/www/staging"

每次推到 develop 分支，自动构建、打包、上传到测试服务器。后端老王看到后惊了：“你们前端现在这么卷？”

我笑笑：“这不是卷，是专业。”

---

回头看：焦虑、踩坑，但也成长

说实话，刚开始搭这个项目时，我特别焦虑。毕竟刚跳槽三个月，怕搞砸了影响转正。有天晚上凌晨两点，Vite 插件和 TypeScript 类型死活对不上，我坐在阳台上抽了半包烟，差点想放弃。

但第二天早上，我告诉自己：“你不是六年前那个连 webpack 都配不明白的小白了。”

现在的我，知道怎么查 issue、怎么读源码、怎么在社区找解决方案。更重要的是，我学会了——不要等完美，先跑起来。

现代化前端项目，不是一蹴而就的“艺术品”，而是一个不断演进的“活系统”。今天你用 Vite，明天可能换 Turbopack；今天用 Zustand，后天可能上 Jotai。技术会变，但工程思维不会。

---

给正在“从零开始”的你几点建议

1. 别追求一步到位：先跑通 Hello World，再慢慢加功能
2. Mock 是你的朋友：别让后端卡住你的进度
3. 目录结构要清晰：半年后你自己回来看代码，会感谢现在的你
4. 和后端建立契约：沟通成本远低于返工成本
5. 自动化能省则省：一次配置，终身受益

---

最后：在光谷，做个清醒的码农

写这篇文章的时候，窗外又下起了武汉春天特有的毛毛雨。我看了看工资条，22k 看似不错，但房贷+奶粉+老人药费，还是紧巴巴的。可即便如此，每当看到自己写的代码跑在线上，用户流畅地操作，那种成就感，是钱买不到的。

技术这条路，没有捷径。但只要你在光谷软件园的某个格子间里，认真敲下每一行代码，你就在成为更好的自己。

共勉。

—— 阿哲，一个不想被 AI 取代的前端，在武汉，继续搬砖。