tofacebook.com -专业IT技术社区 # day1:项目流程和开发环境的搭建 - tofacebook.com-专业IT技术社区
276°

# day1:项目流程和开发环境的搭建

项目的流程

需求分析(需求文档,产品部门提供)

  • 原型设计(Axure,通常产品经理输出、UI)
  • UI (user interface),用户界面 UE (user experience ) 用户体验 UED (user experience design ) 用户体验设计 UCD (user center design ) 以用户为中心的设计
  • 架构设计 & 技术调研 & 研发计划 & 接口的设计
  • 编码
  • 联调
  • 提测(测试团队负责测试)
  • 上线(灰度上线、正式上线)

需求分析

需求规格说明 需求确认(沟通确认) 需求反复修改(立项的时候,确立需求变更的流程)

原型设计

作用:让需求变得更清晰,业务流程更清楚,UI设计的参考

工时评估

技术调研 1d 框架代码搭建 2d 模块开发 ,职位:2d,搜索,2d,我的1d 前后端联调:3d 测试(迭代):3d 上线(内测、试用):1d 合计:15d

需要考虑的其它因素:节假日、风险时间、。。。

搭建框架

架构设计

  • 前后端分离(前端:html css js 后端:提供接口、数据库操作、。。),前后端不分离:(.jsp .php .aspx)
  • rmvc 模式 router :路由 model: 数据层 view 视图层 controller 控制层(业务逻辑的处理,router+model衔接到一块)

技术栈:es6 + zepto.js + scss ....

构建环境:gulp + webpack

移动端适配的方案:rem + 百分比

开发环境的搭建:目标:支持热更新,研发和生产编译出不同的版本

搭建项目用到的依赖可以在此网站查找用法以及作用npmjs

  1. 生成package.json npm init -y或者yarn init -y
  2. yarn add global gulp-cli yarn add gulp -D// -D , --dev 开发环境的依赖 --save -S 生产环境的依赖
  3. yarn add gulp-webserver -D //搭建研发的server
  4. yarn add node-sass gulp-sass -D //编译scss文件
  5. yarn add gulp-concat -D //文件的合并
  6. yarn add webpack-stream -D //编译js文件
  7. yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime -D//编译es7 es6 到es5

已有 0 条评论

    我有话说: