vue实现饿了么外卖系统(完整开发流程)

目标

1.掌握vue.js项目在实战中的用
2.学会使用vue.js
3.组件化、模块化的开发方式

涉及知识内容

1.vue-cli
2.axiox ajax通信、vue-resource(更新后不支持) 推荐axios
3.webpack构建工具
4.mock.ls模拟数据
5.es6 eslint代码风格工具(看个人需求,也可以用es5写)

学到什么

1.标准开发流程,做事的方式
2. 工程化、组件化、模块化的思想
3. 移动端开发常用小技巧
4. flex弹性布局
5. 交互设计

如何做技术选型

多方面因素:
一、技术方面:

1.社区(是否成熟/活跃)、有问题可以找到解决方案;
2.开源框架的其他方面(文档更新是及时、框架轻量级)

二、人才方面:
1. 对于新技术,开发人员上手成本
vue: 上手成本低,语法清晰,template模板,借鉴react虚拟dom思想、angular设计模式,数据绑定,且对细腻dom进行了优化
react:有自己及独特的语法==》jss语法,将html、css都写到js里面,学习成本相对较大
angular:后端人员写出的,借鉴后端的思想。需要懂后台语言。

2.团队技术积累:
如果团队其他人员都在用传统的开发工具,,你却用新框架,出现问题后没有其他人不能一起解决,新技术可以用,但是不能耽误最后发版影响进度。

对于公司来说,上线的项目使用的技术不一定要最新最潮,但一定是最稳当的

vue核心思想

1.数据驱动: 写vue时,一定不要有操作dom的代码出现,dom的渲染、显示、隐藏,均由数据的状态控制;
2.组件化:扩展html元素,封装可重复用的一个代码,和之前写的弹窗组件。翻页组件等类似

如何在公司中能够开发一个项目

  • 产品给出需求文档,产品原型
  • 阅读文档,梳理需求
  • 评审需求(产品逻辑、交互是否合理)
  • UI出图,交互设计稿
  • 开始做详细设计(拆分需求模块,技术选型,调研技术方案中的不确定(用什么语言,什么框架等,demo验证))
  • 详细设计评审(开会决定设计是否可行)
  • 出项目排期(做详细设计时已基本预估出时间安排,所以做详细设计是很重要的)
  • 进入开发
  • 搭建项目框架
  • 模拟mock数据(mock.js模拟数据)
  • 实现页面
  • 自测(自己检测bug。逻辑等)
  • 联调(和后端人员调试)
  • 过冒烟case(测试写的一个测试用例,自己先测试逻辑是否通顺,不通过则退回)
  • 提交测试代码,部署测试环境,测试人员接入测试
  • 改bug
  • 部署上线
  • 验证

Tips:
搭建项目框架:vue-cli
脚手架:帮你减少 为减少重复性工作而做的重复性工作 的工具

比如写gulp脚本本是为了减少重复性工作,但每次写项目都要写gulp脚本,且内容大同小异,而脚手架就是为了减少重复写gulp脚本

猜你喜欢

转载自blog.csdn.net/mandyucan/article/details/80648526