作者：柚子
 6 年前端 | Vue3 / TS / 工程化  
 状态：2026.06.05 离职，正在找工作

## 一、为什么要写这篇

上一篇写了 **《面试官问我：你怎么做 WebSocket 稳定性设计的？》**，  
不少同行私信我说：

 “能不能再讲讲你从 0 到 1 做系统的真实经历？”

于是我想起去年接手 **三与叁山餐饮 ERP** 项目时，  
那段一边写代码、一边踩坑、一边重构的日子。

这篇文章，不聊 API，不聊用法。  
只聊 **我踩过的最痛的 5 个坑**。

## 二、项目背景

- ERP 后台管理系统（PC 端）
- Vue3 + TypeScript + Pinia + Vite
- 多角色、多权限、多模块
- 门店、仓库、财务、审批全部打通

**核心挑战：**
 不是“能不能做”，而是“能不能长期维护”。

## 三、坑 1：权限设计写死

### 当时怎么做的
- 前端硬编码角色
- if else 满天飞
- 新角色一来就改代码

### 出了什么问题
- 代码越来越臃肿
- 新需求改动成本极高
- 一改就崩

### 后来怎么改
- 引入 **RBAC 权限模型**
- 角色 / 权限 / 菜单解耦
- 后端返回权限树，前端只负责渲染

✅ 教训：  
 **权限不是判断，而是结构。**

## 四、坑 2：路由动态生成没做好

### 当时怎么做的
- 前端写死路由
- 权限校验分散在各处
- 刷新页面状态丢失

### 出了什么问题
- 菜单乱
- 404 多
- 权限形同虚设

### 后来怎么改
- 后端返回路由配置
- 前端动态注册路由
- 统一做权限守卫

✅ 教训：  
 **路由不是页面集合，而是系统骨架。**

---

## 五、坑 3：接口没有统一拦截

### 当时怎么做的
- axios 随处 new
- 错误处理各写各的
- 报错信息不统一

### 出了什么问题
- 前端疯狂弹 toast
- 异常无法追踪
- 用户体验极差

### 后来怎么改
- 全局 axios 实例
- 统一 request / response 拦截
- 错误码映射 & 日志上报

✅ 教训：  
 **接口不是调通就算完成，异常处理才是重点。**

## 六、坑 4：工程规范缺失

### 当时怎么做的
- 没有 ESLint
- Git 提交随意
- 命名风格千人千面

### 出了什么问题
- 代码难以维护
- CR 极度痛苦
- 新人根本接不住

### 后来怎么改
- 强制 ESLint + Prettier
- Git commit 规范
- 目录结构 & 命名约定

✅ 教训：  
 **规范不是束缚，是保护。**

## 七、坑 5：过度依赖 AI 生成代码

### 当时怎么做的
- Cursor / Trae 直接生成业务代码
- 不加审查就合并
- 只看“能跑”

### 出了什么问题
- 边界条件缺失
- 异常分支不完整
- 上线后直接炸

### 后来怎么改
- AI 只负责生成模板
- 人工 Review 所有逻辑
- 核心业务绝不盲信 AI

✅ 教训：  
 **AI 是杠杆，不是决策者。**

## 八、我现在做 0‑1 项目的标准动作

1. 权限模型先行
2. 路由结构优先于页面开发
3. 接口层统一封装
4. 工程规范一步到位
5. AI 辅助，但不主导

## 九、给正在做系统的前端几句实话

1. **别急着写页面，先把结构想清楚**
2. **权限、路由、工程化，决定系统寿命**
3. **AI 提效，但不要让它替你做决定**
4. **能扛事，比会写代码更重要**

有什么问题欢迎评论区随时沟通🙏

**共勉。**