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

前言

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

首页 食品详情页 评价页 卖家详情页

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

你能够学到的

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组件内，而是以

<transition name="fade"><div></div></transition>

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

单组件只能有一个root

<templete>
  <div></div>
</templete>

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

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 小程序便会得心应手了。
就是这样 :)