关键词：
参考技术A前端开发流程概述
前端开发流程可分为需求分析、开发阶段、测试阶段、维护阶段，下面分别进行叙述。
2.1 需求分析
这个环节中，首先是和客户进行交流，了解客户的需求，然后分析项目的可行性，撰写项目需求文档。如果项目可行，则起讨论具体方案，分模块分步骤进行规划，分析项目进度安排、所需成本，进行原型设计（包括页面布局图，页面逻辑流程图，说明文档等。通过原型设计，可以让项目组和客户都可以对项目有一个直观感受，同时可以低成本高效率的复现业务场景和各模块流程）。
可以说需求分析阶段是整个前端项目的基础，基础不牢，地动山摇。可以试想，如果和客户沟通不顺畅，有的方面客户没搞清楚是什么效果，开发完成后就可能与客户发生纠纷；如果可行性有问题，有的模块很难实现或成本超出预算，就很难处理。
2.2 开发阶段
这个环节是前端工程师主要参与的部分，按照需求分析阶段的规划按步骤完成任务。
根据产品需求分析文档和原型图进行UI设计，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。
根据UI设计进行规划，提取界面中可以复用的模块方便重复利用，分析界面是否有实现难度比较困难的地方，进行沟通和功能排期，按功能大小以及难度进行功能时间的评估，和后端沟通好排期时间，保证大家能够更有效地开发合作，针对功能复杂的地方要先理清思路。
不要盲目开发前端搭建框架。根据设计图进行前端界面开发，以及遇到的问题及时与产品、UI、后台人员沟通，保持大家信息一致，针对不清楚的地方也要及时沟通，以免做错功能。
根据后端接口进行字段填充，以及部分功能开发。针对缺少的字段或者数据结构进行提出，及时与后端反应，尽量让大家都能以最小的改动完成后续开发工作。前后端都要按照规范进行开发，针对不规范的地方要给与提出、指正，营造出规范的工作模式，以后维护成本和沟通成本更低以及开发效率更高。如果前端的设计进度远远超前后端的接口和数据结构设计，也不必等后端，可以自行开发nodejs服务器配合postman等接口软件进行开发。
前后端功能联调、完成自测。检查功能完成情况，看是否有遗漏，出现问题及时沟通解决。
2.3 测试阶段
发布测试、修改bug、发布上线，自测完成后提交测试，测试根据提交的项目以及需求进行测试，提出bug给相关人员修改，开发人员周期性的配合修改bug，保证今天能够修复昨天的bug。
发布dev环境，配合测试，修复bug以及需求优化
发布test环境，修复bug以及需求优化
发布it环境，修复bug以及需求优化
发布pre环境，修复bug以及需求优化
pre验收之后，发布线上环境，产品进行验收
2.4 维护阶段
如果客户验收通过，项目就进入了维护阶段，程序的维护包括程序上线后后续bug的修复和程序版本的更新。
3 个人经验总结
3.1 文档很重要
前端项目的文档似乎已经作为前端工程化的标准流程之一了，文档写的好，可以便于同事快速了解你的代码功能和需求，便于协作。可以想象，随之项目复杂度增加，体量越来越庞大，开发团队人数也越来越多。这种情况下，如果像变魔术一样隐匿中间流程而直接得出结果，后果可想而知：项目复杂度越增加就越难以管理，开发效率低，合作混乱，结果甚至导致项目死亡。
好的文档看起来就像一个产品说明书，但作用却远远超过了说明书，不仅仅告诉你如何使用，还应该告诉你项目的设计思路，用了哪些组件，哪些部分不完善，将来有什么规划等等。这是一份比较好的说明文档。
3.2 与客户及时沟通很重要
3.3 扎实的基本功很重要
尽管当下框架、函数库、工具包等更新迭代非常快，前端工程师有很多新的知识要学，但原生JS、HTML和CSS依然是重要的基本功，在学习前沿工具的同时不能放弃基本功的训练。
前端开发流程
产品经理下达任务——ui作图——前端根据ui的图做效果——与后台人员交流 工作中的流程：早上开早会，产品经理下达命令，讲述昨天完成任务，今日目标。关于项目中的介绍，一般有工作经验的人，常用的动态效果... 查看详情
前端vue+后端django项目创建以及自动部署流程(代码片段)
...发的同学只需要稍微会一些工具就可以完成部署的工作。前端Vue项目创建+自动部署准备工作：本地安装了Node、npm本地安装了WebStorm 查看详情
前端vue+后端django项目创建以及自动部署流程(代码片段)
...发的同学只需要稍微会一些工具就可以完成部署的工作。前端Vue项目创建+自动部署准备工作：本地安装了Node、npm本地安装了WebStorm 查看详情
前后端分离项目知识汇总（开发流程，跨域，开发接口）
...介绍前后端分离二、项目开发前端相关知识点开发CRUD接口改造登录到本地接口跨域如何解决跨域问题？登录功能完善常见的跨域错误前... 查看详情
前端开发流程---我们应该做些什么
一、拿到原型图，先自我解析需求，画出思维导图，流程图在未拿到UI给定的PSD时，可以先理清我们的需求依赖的外部资源后端提供的接口UI出图的大概布局后期频繁改动的地方需要实现的效果下拉刷新动画效果吸顶效果懒加载... 查看详情
主流的h5前端开发流程
...随内容变化），最后用该尺寸的设计稿进行标注、切图，前端采用flexible进行适配。二、flexible使用方法Flexible的使用方法非常简单，只需要引入flexible_css.js和flexible.js下载地址l 第一种方法将文件下载后放入项目中引用（省略... 查看详情
项目开发主要流程
...间）=》开启动会（确定时间点）=》开发（后端要提前和前端对接好预定义接口）=》测试（写测试用例，产品、测试人员、开发核对测试用例，测试，预发版测试，冒烟测试）=》改bug=》上线=》项目总结 查看详情
项目开发的一般流程
...计出完稿子，拿给客户看看，图片是否可以。可以的话，前端用html代码实现图 查看详情
web前端开发都需要干的工作流程有哪些？
在公司，我们前端开发的siri们需要做的事情?铛铛铛！请看这里呦...当公司 接了一个项目首先我们经常需要：需求分析+策划架构+交互设计（UX）+界面设计（UI)+前端开发+后端开发+运维测... 查看详情
微信网页授权流程(前端篇)
功能描述公司最近有个项目要做基于微信的H5校服定制wepApp的开发，之前完全没有接触过微信开发，很是兴奋，有种磨刀霍霍向猪羊的感觉。由于本人经验有项，描述不准确的地方请大家及时指出。功能描述:当用户点击如下所示... 查看详情
系列网页。前端开发流程
实践了一段时间，发现《Freshman。前端开发流程。》里面的东西比較适合从头到尾开发一个新页面的情况，而在详细开发工作中，我们大部分时候是开发一系列网页。有一些元素（比方非常多页面的top/banner部分）是相似的。所以... 查看详情
汽车之家unity前端通用架构升级实践
随着之家3D虚拟化需求的增加，各产品线使用Unity引擎的项目也越来越多，新老项目共存，代码维护成本也随之增加。代码质量参差加之代码规范仍没有完全统一产生高昂学习成本进一步加重了项目维护负担。为应对这些问题，... 查看详情
前端开发的流程
想分几篇文章来说说前端开发。 一般的网站开发流程包括四个方面： 1、 总结需求 2、 设计界面 3、 前端开发 4、 后端开发 开发... 查看详情
前端开发之走进vue.js
Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通过Vue.js来构建一个中大型的前端项目，同... 查看详情
关于项目流程
...UI设计师产生结果：设计效果图静态页面制作参与人员：前端工程师产 查看详情
开发步骤
...前后端分离的架构进行开发，前后端分离架构总体上包括前端和服务端，通常是多人协作并行开发，开发步骤如下：1、需求分析梳理用户的需求，分析业务流程2、接口定义根据需求分析定义接口3、服务端和前端并行开发依据接... 查看详情
项目的整体开发流程
1.项目运营过程2.总的项目开发过程3.项目过程要求4.开发过程5.项目初期问题6.开发人员的每迭代开发流程 查看详情
前端开发的一般流程
前端的开发过程中主要有以下流程：编写代码->单元测试->检查语法->整合代码->生成文档->压缩代码->部署测试环境->测试->发布。产品最终的结果是原型图，而原型图可以理解为设计的草图设计师的结果是psd文... 查看详情