前端开发流程

（〇）流程概述

• 领导或甲方提出需求，评审需求；
• 根据需求画出原型图，评审原型图；
• 技术实现评审，进行排期，开始开发；
• 技术选型；
• 项目架构搭建；
• 根据原型图出效果图，评审效果图；
• 前端根据效果图绘制静态页面；
• 与后端对接接口；
• 本地自测；
• 发布测试环境，提测；
• bug反馈，反复修改与修正；
• 部署上线；

（一） 立项

领导或甲方提出需求，评审需求；

产出：立项申请书

（二）需求确认

根据需求画出原型图，评审原型图；

产出：原型图，功能清单，需求说明书

（三）工程排期

根据系统功能，复杂度等因素进行排期，安排出各项需求的时间节点

产出：排期表

（四）技术选型

根据需求进行合适的技术选型，本部分主要使用Vue作为开发主要框架，具体主要分为以下几种

• 1. Vue原生
     开发门户网站，个性化定制要求比较高，兼容性要求比较高，使用Vue原生功能开发
• 2. Vue + 第三方组件库
     开发后台管理系统，兼容性以及页面显示要求不高，可使用第三方组件库，加快开发，常用的第三方组件库有element-ui（PC端常用），vant-ui（手机端常用）
• 3. uni-app
     开发小程序，使用uni-app
• 4. vue-garr
     开发多tab系统，各个子系统之间关系较为分离，适宜选择微服务的方式
• 5. next
     开发服务端渲染项目，使用next项目作为基础架构
     注：同时确定的还有后端技术，数据库，代码托管平台，服务器，提测系统等等。

产出：技术方案文档

（五）项目整体架构

设计项目整体架构，项目的整体架构设计主要参考vue-element-admin的架构设计，不同项目可能会有不同的架构。

分割线

六、七、八为普通业务开发流程，此阶段开发过程开始进入项目细节，通常以多个小需求的模式进行增量开发，每当进入此阶段时，通常需要前端、后端、产品、美工再次开会进行需求的细节讨论，以确定需求的具体细节，可行则执行，不可行则修改或丢弃。前端分有些许不同，有的做基础服务，而有的做系统业务，分工不同会导致开发流程的差异，以下为开发系统业务的流程。

产出：效果图、周报、说明文档、接口文档

（六）根据原型图出效果图

UI根据原型图，设计出效果图，此效果图为前端开发的参考，正常情况下前端同学应当1:1还原美工设计图。

（七） 绘制静态页面

前端根据效果图绘制出静态页面，包括布局，颜色，大小，各种操作的显示效果等等，如需要数据的地方，可以先将数据写死在data中，或者mock数据，个人推荐前一种。

（八）前端端联调

页面编写完成后，需要与后端进行接口对接，通常后端会提供接口文档，顺利的话不需要进行协调，如果出现接口使用方式不明、接口报错等问题的出现，可以结合http状态码与后端进行联调。

（九）自测

前端开发完成之后，需要进行自测，或许不专业，但也尽量避免低级错误的发生，如边界问题等等。

（十）提测

自测完成之后，将代码发布到测试环境，然后在提测平台上发起申请进行提测。

（十一）bug反馈

提测后可能依旧会存在一些问题，如bug依旧存在或者需求有变更的情况，需要驳回，前端修复完成之后再次提测，此过程可能反复多次，知道不在有bug为止。

（十二）部署上线

部署正式环境，开放服务给用户。此过程也可细分为灰度上线与正式上线两部分，灰度上线即让一部分用户使用体验，提供反馈，根据用户进行修复与优化。