vue2.0 饿了么项目学习总结

最近在GitHub上发现一个基于vue2.0的饿了么项目。本着互联网的分享精神，现在将我自己所理解的，所总结的经验分享给大家。本篇文字我将从学习的角度向大家分享。

在学习本项目之前我已经将vue2.0的 官网官方案例 和vue-router的官方案例和api看了一遍。 

点击下载项目资料  

注意：网页打开的速度有些缓慢还有可能访问失败但是绝对可以打开的，有条件的朋友可以使用FQ软件打开网址。

运行项目

注：我已在我的电脑上装了node环境、vue-cli、webpack的全局变量

1、讲下载的文件存放在一个自己方便查找的地方，我存在D:\Study\vue-sell-master。 一般我们管这个地址叫做工程文件地址。

2、打开命令行工具（win键+R 输入cmd回车）依次输入 d: 回车、cd: D:\Study\vue-sell-master 回车，此时命令行就定位到了我们的工程文件目录，输入npm install 回车，即可安装项目中所以的依赖(此处需要一段时间，如果有淘宝镜像会快很多，想了解淘宝镜像的请自行百度)。

3、输入 npm run dev  回车。然后在浏览器打开，localhost:8088  即可访问项目地址。此时咱们就可以看到饿了么的项目啦。

分析项目 - 知识点讲解

1、路由配置

　　打开项目的第一眼就看见了项目上分的tab栏，而我的第一感觉就是使用了vue-router的路由系统，打开源码一看果然是使用了路由系统。在项目的main.js 中的一个 routes变量中就是与路由的相关配置。

不懂路由配置的的同学可以访问http://jsfiddle.net/yyx990803/L7hscd8h/ 进行查看。

2、动画效果　　

　　然后在页面中的增加和减少商品数量吸引力我，在点击+按钮时如果商品数量是0的话，那么-号就会出现，而且还是动画形式的出现。这勾起了我的好奇心，打开源码查看，果然是使用了。

　　因为路由地址默认访问的是goods页面。我们打开goods，发现加减号的位置使用的是一个叫cartcontrol组件。在52行找到组件对应的文件文件名叫cartcontrol。我们打开cartcontrol文件。发现动画位置使用了一个transition的组件，transition组件的作用就是做动画不懂的同学可以访问 https://cn.vuejs.org/v2/guide/transitions.html 进行学习。

 

　　在官方案例中，动态效果分为四个阶段v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除、v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除、v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除、v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation 完成之后移除。

　　我们看案例中cartcontrol中第60行-66号是定义动画效果的css。很明显第60行作者将v-enter-active，和move-leave-active。定义为了0.4s linear。意思就是显示和隐藏都是0.4s，以linear形式运动。并且在第62行定义了，动画进入过度开始时和离开后后的效果。在第48行定义了元素本身的样式。因为vue的动画实现是在每个阶段通过给元素增加class名字来实现的。vue快速的给元素增加了带有opacity:0的class，在快速删除这个class过度效果是已0.4s形式过度。所以大家就看见了-的按钮以渐显和渐隐的形是展示。

 

 

 

 

本篇文字未完，持续更新。