Web前端开发人员在项目各个开发阶段需要关注的点

需求评审阶段，作为前端开发人员需要关注的方面有：

产品需求评审

• 业务功能页面的具体实现

• 难点功能的讨论

• 开发边界确认

• 需求的合理分配（前后端分工）

• 产品需求不合理的，要当场提出，理清前后关系

设计稿评审

• 主要框架的沟通，风格定义

• 架构与设计的对接

• 接口api字段与设计稿的一致性（需求文档、设计稿、yapi文档三方对齐）

• 确认组件之间的跳转及交互形式

• 设计稿进度的阶段性输出，优先确认框架layout层级、导航菜单层数及交互呈现确认

前端讨论会

• 基础架构确定、模块的划分

• 技术栈和工具的选择

• 编码规范、格式、版本标准的确定

• 组件库选型、业务模块的公共组件的抽象封装

• 重难点技术问题的分析

• 用户体验和交互的优化

• 项目经验的交流

技术开发阶段，作为前端开发人员需要关注的方面有：

前端架构

• 基础架构、脚手架工程搭建

• 编码风格的统一（间距、换行、缩进、组件命名方式、函数命名规则、样式命名规则）

• store数据管理及封装

• 文件夹层级结构、图片及图标的管理方案

• Vite、webpack、及全局设置

• Node版本确定

• 代码库管理

• UI组件库选择

• 公共组件的复用及封装，重点在于从业务层抽象出逻辑组件

• 样式部分Tailwindcss/unocss/iconfont字体图标应用和主题颜色变量换肤

• layout层级布局

• CI/CD流水线的设置

• 接口请求封装和异常拦截处理

• 登录及账户角色用户体系模块的开发

• 权限管理模块开发

• 自动化测试和代码校验

• 数据埋点方案

• 异常监控方案

• Mock数据方案

接口与后端协作

• 接口梳理与文档对齐

• TypeScript接口定义

• 接口文件的封装和注释

• Jsdoc注释文档书写

• 推动后端完成接口自测和自动化测试

编码规范与质量保证

• 代码校验格式

• 编码规范（包括TypeScript、UI组件、Hooks函数、Utils函数）

• 异常拦截和处理window.onerror vue.onhandeError

• 超时处理

• 集成测试

测试与测试用例评审

• 明确测试周期（一般是项目周期）

• 明确测试边界（设备范围、系统版本、浏览器版本、最小最大窗口尺寸）

• 明确组件的交互形式（超出隐藏的呈现形式、表单校验错误提示呈现形式）

• 明确二次确认的呈现形式（气泡确认、弹窗确认、是否锁住屏幕、是否有遮罩）

• 明确前端报错和后端报错的提示呈现形式

• 是否在提交测试团队之前有前端单元测试、集成测试、端到端测试环节

• 前端单元测试、集成测试、端到端测试是否要以测试团队用例为准

项目管理阶段，作为前端开发人员需要关注的方面有：

需求和设计对接

• 设计稿初步对接（一定要提前沟通，分批次阶段性输出，注意关注领导的看法）

• 架构人员与设计的沟通（全局风格、表单组件、UI组件库的选型）

• 沟通时要掌握方式方法，可由项目前端架构人员与产品、设计、后端统一意见之后，再与团队开发人员一起沟通

团队协作

• 需求拆分与排期、接口梳理工作的分工、可同时完成Typescript类型书写

• 持续推动前端人员的积极参与和经验分享，熟悉产品功能，抽象组件能力聚焦，避免重复加工

• 持续推动后端api接口的可用性测试，接口字段与产品需求文档和设计稿的三方统一，商定接口错误码的规则

• 持续推动设计稿的风格一致性，组件一致性

• 注重团队成员的个人成长，给年轻的员工分派相对有挑战性的功能，并辅助其完成开发方案的设计

• 注重项目质量把控，给老员工分派独立模块，让其腾出时间精力做CodeReview，并指导年轻员工

• 注重架构的健壮，工程由架构人员搭建，鼓励采用新的技术，插件版本的升级迭代

• 注重前端开发人员在整个项目中的话语权，前端负责人在接收到不同级别领导关注的声音之后，需要有独立专业的分析，把控成员开发节奏不受干扰

---

前端开发节奏需要关注（待完善）

启动阶段

• 需求分析和项目规划，完成前端讨论会，确定技术栈和开发计划，包括基础架构、重难点。

设计与开发阶段

• 设计稿对接，接口梳理，开始架构基础搭建和前期公共组件开发。

• 中期开发，完成主要模块和公共组件的开发。

• 后期开发，完善功能，处理异常，进行自测。

测试与上线阶段

• 进行集成测试，准备预上线测试。

• 完成预上线测试，部署上线。

后续维护

• 持续进行：上线后进入维护与迭代阶段，根据用户反馈进行优化。