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

Posted 2020-09-14

最近在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的话，那么-号就会出现，而且还是动画形式的出现。这勾起了我的好奇心，打开源码查看，原来是使用了。

 

 

 

 

 

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