Vue:基于Vue2的饿了么实战总结

前言

某课上有Vue前端饿了么实战项目,这个练习对于初学者来说再好不过了,美中不足的是,尽管该项目录制时间很新,16年11月份录制,然而当时Vue版本仍然停留在1.0,目前最新的版本已经更新到2.1.8一些API也有所修改,项目中也有些错误老师没来得及修正。我花了前后大概一周的时间,学习完了全部内容,并且将项目改造成了2.x版本,填补了许多因为版本升级留下的坑,这里做一个简单的总结,先来看看最终效果

Vue:基于Vue2的饿了么实战总结_第1张图片
首页
Vue:基于Vue2的饿了么实战总结_第2张图片
食品详情页
Vue:基于Vue2的饿了么实战总结_第3张图片
评价页
卖家详情页

最后两页就是完全自己写的了,因为,嘿嘿/滑稽

你能够学到的

Vue Webpack的相关配置

老师较为细致的讲解了Vue-Cli的webpack配置,你不需要会去,但是应该知道哪些模块用来干嘛的。

Mock

使用调试环境搭建的服务器模拟后台JSON数据请求,涉及node的express操作,不理解原理没关系,只要会配置模拟数据就好,当然,一个好前端,node还是需要学习的

Vue-Resource

虽然官方已经宣布不再维护了,但是2.x版本依然得到很好的支持,this.$http操作更符合Vue原生。你能够通过这个工具进行ajax操作

Vue-Router

官方的前端路由,虽然项目中只是简单视图切换,但你也应该基本了解前端路由基本原理,搭建出一般SPA应用

Vue基本API操作

基本项目学完以后,你就能对data,props,components,methods,created,nextTick,computed等等有深入的认识。可能在你以前阅读API中没能理解的模块有了清晰认知,也能信手拈来的进行应用。

CSS中的奇淫技巧

项目中老师用到了许多对于CSS样式细微操作,可能很多同学对于CSS不是很在乎,但是为了达到和设计图一样的效果,你想到的可能和表现出来的就不太一样。

debug

软件开发中很重要的一环,可能许多人在敲代码的时候自信心爆棚,但是进行调试的时候就会被各种bug崩溃。老师在敲代码的过程中也会出现许多的错误,而这些也正好我们新手所经常的遇到的,你见可以看见老师用什么思维去解决问题,调试台报错的问题很容易解决,难的是不报错的问题,更需要你从逻辑层面去思考。基本学习完成以后,你也能处理开发过程中遇到的绝大多数问题

你不能学到的

Vue的各类插件

老师基本只用了Vue的原生API就完成了整个项目,唯一应用的是better-scroll库,这个库有很多坑爹的地方,你需要靠自己进行调试

Vuex

Vuex 之于 Vue 就像 Redux 之于 React,处理复杂的组件数据交互。但是项目中只用刀了父子组件沟通,所以没有使用vuex

Vue-Router的高级操作

这个前端路由还有很多的能力,比如懒加载,命名路由,history模式等。如果你的项目中需要,你可能还是得参考API

表单控件操作

Vue对于表单控件使用了双向绑定,然而项目中没有需要输入的功能,因此没有包含此部分的练习

你可能遇到的坑

transition单独提出来

transition不再是绑定在某个div组件内,而是以

进行包裹组件,使用CSS过渡在2.0中只是一个过渡状态,你需要指定样式的最终表现

单组件只能有一个root


  

必须用一个标签包裹组件而不是并列的两个标签

v-el v-ref的移除

实战中老师使用v-el去获取DOM元素,2.x统一为ref,如果绑定的是html标签则获得的是DOM对象,是组件则获得组件实例

$dispatch的移除

老师在写小球动画的时候,用了事件派发去通知兄弟组件,2.x中已经彻底移除,想要获得相同效果的话需要创建一个空组件充当event bus,偷了个懒就没写。

better-scorll库的坑

这个库挺坑的,在食品详情页,第一次进入时候可以成功触发点击事件,但是之后就不行。因此,我让它每次进入食品详情页都新建一个bs对象,或许你会找到更好的方法

最后

如果你对于Vue并不熟悉,再或者你对JS的面向对象不熟悉,Array,String类型的原生操作不熟悉,ES6语法不熟悉,那么这个实战项目可能并不适合你。你还是需要深入学习javascript,然后再学习Vue的官方文档。总而言之,这个实战项目并不适合纯新手。
当然,如果你学习完整个项目以后,并且了解每一个模块的运行机制。那么你就瞥见了现代前端工程的开发模式,再去学习angular react 小程序便会得心应手了。
就是这样 :)

你可能感兴趣的:(Vue:基于Vue2的饿了么实战总结)