使用Vue2.x高效还原"美团外卖"项目

（ 效果图 ）

讲师介绍 

大家好，我是米斯特吴，多年前后端开发经验，就职于国内一线互联网公司，专家工程师(对标百度t7、阿里p8) 。在腾讯课堂中拥有大量前后端课程, 学员粉丝超过3万人, 跟米斯特吴学习编写高质量且可扩展的代码，提升通用性强的代码能力。 

目前已经上线的课程包含Vue.js / Angular4 / Node.js / React.js / ES6等相关课程, 每个课程都是腾讯课堂销量最高的课程, 无论是免费课程, 还是收费课程, 都得到各位朋友的高度认可,也非常期待你能够参与我们的课程。

我希望我的付出，可以得到更多人的认可，可以帮助到更多人。

项目介绍

通过高仿《美团外卖》APP学会Vuejs2.x的实际使用，使用Vue.js+webpack+axios+betterScroll等前端最新最热的技术，采用组件化、模块化的开发方式，让你用更少的代码做更快速的开发。提取外卖App最核心的商家模块（包括商品、评论、商家介绍等各模块），完全高仿《美团外卖》外卖APP，让你更能领略Vue.js组件化的魅力。

以外卖App商家页为主线，引出开发所涉及的各种相关知识点，让同学们了解一个项目从0到1的整个过程，干货满满。

为了让你更容易在工作中实际运用Vue.js，讲师以上线代码的标准写代码，让你切实感受到什么是扩展性、通用性强的优质代码。

有什么要求？

有一定前端HTML、CSS、JavaScript基础知识。

有一定Vuejs基础。

具有一定自学能力，相当于有一年左右前端开发经验或用过其它前端框架进行过项目开发。

我将从这门课程中学到什么？

了解一个真实项目完整的开发流程

学会组件化、模块化的开发模式

掌握使用Vue-cli脚手架初始化Vuejs项目

了解webpack配置及打包原理

学会模拟json后端数据，前后端分离开发

学会使用vue-router开发单页应用

学会使用Axios与后端数据交互

学会如何在Vuejs框架里和第三方JS插件

交互学会制作并使用图标字

学会如何真机调试学会flex弹性布局

目标受众是谁？

想要了解Vuejs实际项目中的应用

想要了解Vuejs如何进行APP开发的

想要知道如何使用Vuejs进行单页面开发

想要知道项目是如何从0~1，如何从无到有的

想要知道真实一线公司如何开发项目的以及项目开发流程的

该如何编写易维护，便于扩展，通用性强的代码

项目涉及到技术栈: 

vue全家桶：Vue、Vue-router、Vue-cli等 

组件化：单Vue文件 

模块化：ES6 Module 

第三方模块：better-scroll axios等 

基础开发环境和包管理：Node、npm 

构建工具：webpack 

编辑器：vscode

项目主要功能 

点餐页面

点选商品后自动添加到购物车，并计算好总价，在商品列表、购物车列表和商品详情页都可以随意增减数目，此外左侧商品分类和右侧的商品相互关联，通过better-scroll插件滑动商品列表时，相应的商品分类也会跟着跳转。

用户评价页面

主要包括一个TAB栏，包括三部分：全部、有图和评价三个模块。

商家信息页面

主要介绍一些商家基本信息，可以通过better-scroll插 件，进行左右滑动图片。

项目难点 

该项目业务逻辑主要集中在点餐模块，而点餐模块中难点便是如何实现商品列表滑动，以及右侧商品分类和左侧商品列表如何联动？ 

首先要实现商品列表的滑动，就需要用到一个better-scroll插件，better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

项目总结 

vue数据和视图的分离,以数据驱动视图，只关心数据变化，DOM操作被封装，在实际开发过程中大大提高了效率。