「经典题」完整的前端项目开发流程

一个项目从一开始的计划到最后的上线,大概要经过以下的流程:

目录

一、产品设计

1、原型交互图

2、产品设计文档

3、文档参考:

二、原型评审

三、项目分工

四、项目开发

第一阶段:库/框架选型

第二阶段：简单构建优化

第三阶段JS/CSS模块化

第四阶段：组件化开发与资源管理

五、项目测试

六.项目构建

七.项目上线

---

一、产品设计

主要负责人 : 产品经理
产品经理前期负责收集销售,客户,领导的零散需求,然后做需求分析,完成产品设计

需求分析一般有以下几种情况:
1.产品经理自己进行需求分析
2.产品经理和项目负责人进行需求分析
3.产品经理和整个项目成员共同开会讨论,进行需求分析

产品经理负责把需求梳理成一个可以演示的整体方案,主要包括2样东西:

1、原型交互图

2、产品设计文档

3、文档参考:

（1）-产品定位
        a、前期规划
        b、产品定位
        c、对外交互模式
        d、当前数据模式
（2）.产品技术架构
（3）.产品功能架构
（4）.产品功能
       a、登录页面
       b、首页
       c、案例
       d、系统管理

二、原型评审

原型审评主要是由产品经理给市场部,运营部,公司领导等介绍展示产品原型设计图以及基本的交互功能,然后收集意见再次对原型图进行修改完善,直至产品设计通过

三、项目分工

项目分工主分为2部分:

1、UI 部门开始准备产品设计图
2、开发部门商讨开发计划并整理出接口文档

四、项目开发

项目开发阶段,每天早上项目会有一个内部的早会,主要对前一天的工作做汇报和当天的工作做安排.每天下午都会写一个工作日志

四个阶段来完成基本的前端项目开发流程及技术选型

第一阶段	库/框架选型（暂定react）
第二阶段	简单构建优化
	NPM管理包
	node+webpack打包
第三阶段	JS、CSS模块化开发
第四阶段	组件化开发

第一阶段:库/框架选型

使用react框架或vue框架实现，基本上现在没有人完全从0开始做网站了。React框架，解放了不少生产力，合理的技术选型可以为项目节省许多工程量这点毋庸置疑。

第二阶段：简单构建优化

由于我们当前技术选择为react解决了开发效率问题 ，但是必须要兼顾运行性能。前端工程进行到第二阶段我们将选一种构建工具，对代码进行压缩、校验，之后再以页面为单位进行简单的资源合并。

第三阶段:JS/CSS模块化

JS模块化—JS模块化方案很多如AMD/CommonJS/ES6 Module

CSS模块化：使用less。具体说明将在第四阶段组件化中详细说明

第四阶段：组件化开发与资源管理

前端组件化开发理念：

1、页面上的每个独立的可视。可交互区域视为作一个组件;

2、每个组件对应一个工程目录，组件所需的各种资源(JS、Image、CSS)都在这个目录下就近维护;

3、由于组件具有独立性，因此组件与组件之间可以，自由组合;

4、页面只不过是组件的容器，负责组合组件形成功能完整的界面;

5、当不需要某个组件或者想要替换组件时，可以整个目录删除/替换

结合前端提到模块化开发，我们将划分为几种开发概念

名称	说明	示例
JS模块	算法和数据单元	网络请求(Ajax.js)
		应用配置(config)
		接口（API.js）
		工具函数（utils.js）
CSS模块	功能性样式单元	栅格系统(grid.less)
		字体图标或小图标(icon.less)
		首页样式(inex.less)
UI组件	可视/可交互功能单元	页头(common/header.html)
		页尾(common/footer.html)
		导航(common/nav.html)
页面	UI组件容器	首页(index)
		列表页(list)
		会员中心(youraccount)

五、项目测试

测试部门对产品进行测试,整理出bug文档,开发部门各自认领自己负责的功能点的bug并修改

六.项目构建

测试完成后,项目提交到生产环境,通过构建工具,webpack,Gulp等对项目进行压缩合并等操

七.项目上线

将打包好的dist文件给后端,后端进行部署,运维负责上线任务