旧 Vue 项目小步修改实战

后端同学最常接到的前端任务不是“从 0 搭建新项目”，而是“在现有项目上小改一个功能”。这类任务的关键不是写代码快，而是改得稳。

一、修改前先做 10 分钟侦察

先回答 4 个问题：

1. 这个页面的数据来自哪个接口文件？
2. 页面是否依赖全局 store 或权限指令？
3. 同类型页面有没有可复用实现？
4. 改动影响哪些按钮、弹窗、校验规则？

如果这 4 个问题没搞清楚，先别改代码。

二、旧项目小改的标准流程

1. 建分支，记录需求边界。
2. 在本地完成“最小可运行改动”。
3. 先自测主路径，再补异常路径。
4. 提交时附影响范围和回归点。

核心原则：每次改动都要可回滚、可解释、可验证。

三、三个高频场景实战

场景 1：列表新增一个字段

步骤：

1. 确认后端接口是否已返回字段。
2. 补充类型定义（types）。
3. 修改表格列渲染（views）。
4. 补一次搜索/导出等关联能力回归。

风险点：

• 字段空值处理不一致。
• 列宽导致布局抖动。
• 排序字段名与后端不一致。

场景 2：表单增加一个输入项

步骤：

1. 在表单模型中增加字段默认值。
2. 增加前端校验规则。
3. 在新增和编辑回填逻辑中同步处理。
4. 确认提交参数映射正确。

风险点：

• 编辑回填遗漏新字段。
• 校验规则和后端约束不一致。
• 清空/重置逻辑忘记覆盖新字段。

场景 3：按钮权限调整

步骤：

1. 确认后端权限码。
2. 对齐路由 meta.permission 或按钮指令。
3. 校验无权限用户是否正确隐藏或禁用。
4. 检查接口层是否也有服务端鉴权。

风险点：

• 只做前端隐藏，后端未鉴权。
• 权限码拼写不一致导致误放开。

四、建议的“安全改动”策略

• 单次需求优先少改文件、少改层级。
• 避免顺手重构一大片无关代码。
• 每个改动点都能对应需求条目。
• 大改拆成多次小提交，便于回滚和评审。

五、提测前自检清单

• 正常路径：新增、编辑、查询都通过。
• 异常路径：接口报错、超时、无权限有兜底。
• 兼容路径：旧数据回显不出错。
• 影响路径：同模块其它页面无明显回归。

六、后端同学的协作建议

• 主动给前端补“字段语义说明”和示例数据。
• 统一错误码与错误文案，减少前端猜测。
• 对改动接口补最小可复现 curl 示例。

这样做，你的前端改动效率会明显提高，而且更容易一次提测通过。