前端项目的开发流程

前端项目完整的开发流程包括：产品设计、原型评审、项目分工、项目开发、项目测试、项目构建、项目上线。

一、产品设计

主要负责人：产品经理

1、产品经理前期负责收集销售、客户、领导的零散需求，然后做需求分析，完成产品设计。

2、需求分析一般有以下几种情况：

• 产品经理 自己进行需求分析；
• 产品经理和项目负责人 进行需求分析；
• 产品经理和整个项目成员 共同开会讨论，进行需求分析。

3、产品经理负责把需求梳理成一个可以演示的整体方案，主要包含3样东西：

• 原型交互图
• 产品设计文档
• 文档参考：1）产品的定位：前期规划、产品定位、对外交互模式、当前数据模式；2）产品技术架构 3）产品功能架构 4）产品功能：登录页面、首页、案例、系统管理        

二、原型评审

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

三、项目分工

主要分成两部分：

        1、UI部门开始准备产品设计图；

        2、开发部门商讨开发计划并整理出接口文档。

四、项目开发

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

前段项目开发流程及技术选型：

        第一阶段：库/框架选定（vue/react）

               使用react框架/vue框架实现，现在基本没有完全从0开发网站。

        第二阶段：简单构建优化、NPM管理包、node+webpack打包

               react和vue虽然解决了开发效率

        第三阶段：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）
		首页样式（index.less）
UI组件	可视/可交互功能单元	页头（common/heade.html）
		页尾（common/footer.html）
		导航（common/nav.html）
页面	UI组件容器	首页（index）
		列表页（list）
		会员中心（youraccount）

 

五、项目测试

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

六、项目构建

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

七、项目上线

部署/上线：将我们本地开发好的项目 部署 到远程服务器上，使得任何电脑都可以通过我们远程服务器的公网ip或者域名加上端口号访问到我们的项目。

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