使用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操作被封装,在实际开发过程中大大提高了效率。
使用Vue2.x高效还原美团外卖项目相关推荐
- CH12-综合项目—仿美团外卖
文章目录 目标 一.项目分析 目标 项目概述 开发环境 模块说明 二.效果展示 目标 店铺界面 店铺详情界面 店铺详情界面 确认清空购物车的对话框 菜品详情界面 订单界面和支付界面 三.服务器数据准备 ...
- 基于Android的仿美团外卖系统设计与实现 文档+源码+视频
基于Android的仿美团外卖系统设计与实现 演示视频 摘 要 为了巩固所学 Android 基础知识,要开发一款仿美团外卖的项目,该项目与我们平常看到的美团外卖项目界面比较类似,展示的内容包括店铺. ...
- 2018最新vue.js实战项目:美团外卖平台
vue.js实战项目:美团外卖平台 第1章 课程简介 1-1 课程简介 1-2 课程安排 第2章 Vue.js介绍 2-1 Vuejs介绍-近年来前端开发趋势 2-2 Vuejs介绍-MVVM框架 2 ...
- 美团外卖平台vue.js实战项目(完整)
vue.js实战项目:美团外卖平台 第1章 课程简介 1-1 课程简介 1-2 课程安排 第2章 Vue.js介绍 2-1 Vuejs介绍-近年来前端开发趋势 2-2 Vuejs介绍-MVVM框架 2 ...
- 仿美团外卖的全栈项目(vue+node+mongodb)带支付-大三求实习
关于 2019届大三学生,前段时间一直想一个人单独开发一个较为完整的项目,在众多应用中,考虑之后选择了美团外卖来模仿,这段时间就利用课余时间进行开发,前端用vue+vuex+vue-router+ax ...
- Springboot项目方式对接美团外卖提供的ERP厂商开放平台
对于还是开发菜鸟阶段的我来说,走了不少弯路,包括文档的一些坑也是自己一个一个慢慢填的.总的来说美团提供的开放平台确实没有饿了么做的好,很多东西写的也不够清楚,希望通过这篇博客分享一些自己开发过程中遇到 ...
- 自动化测试在美团外卖的实践与落地
随着美团到家业务的发展,系统复杂度也在持续增长.测试用例数量近两年增长约一倍,单端数量超过1万2千条,而研发人员的工作从大部分时间在开发,转变成一半时间在开发.一半时间在模拟环境和自测.因此,引入自动 ...
- 【测试开发】自动化测试在美团外卖的实践与落地
文章目录 自动化测试在美团外卖的实践与落地 1.项目背景 2.项目目标 3.方案选型 4.实践和探索 4.1 问题和挑战 4.2 前置条件准备 4.3 用例录制与回放的数据一致性 4.4 用例录制与回 ...
- 美团外卖iOS App冷启动治理
一.背景 冷启动时长是App性能的重要指标,作为用户体验的第一道"门",直接决定着用户对App的第一印象.美团外卖iOS客户端从2013年11月开始,历经几十个版本的迭代开发,产品 ...
最新文章
- 预编译 ASP.NET 网站以进行部署
- Windows 10 Anaconda Python 3.7 安装 MXNet GPU版
- Golang面向过程编程-函数
- hyperledger-simple-app
- python获取当前文件夹下所有文件名
- 中柏平板u盘启动_大冶深圳东莞平板硫化机推选得新科技自动化
- 十进制小数转换二进制的问题
- 确认!字节跳动 AI Lab 负责人马维英离职,将赴清华加入张亚勤团队
- ES6的类Class基础知识点
- 数据库 左连接拼接多个表该怎么写?
- creo 根据点坐标文件创建样条曲线
- PDF如何编辑,怎么删除PDF页眉页脚
- Quartz表达式校验方法
- Action Extension
- 用C++编写天体运动
- Java8使用jdeps —— Java类依赖性分析器
- SQLServer The datediff function resulted in an overflow
- SQL将Json字符串转为表格
- 贝尔曼-福特算法(Bellman-Ford)最短路径问题
- java-集合-set(不重复集合)知识分解——庖丁解牛版
热门文章
- 中国国民休闲状况调查(2020)
- 2020中国零售品牌数字化转型白皮书
- 美团点评企业研究报告
- java嵌套循环语句_Java学习笔记(七) 循环语句
- 作者:​张群(1988-),女,博士,中国电子技术标准化研究院设备与数据研究室副主任。...
- 作者:杨慰民(1970-),男,博士,中国移动通信集团福建有限公司网管中心副总经理...
- 【项目管理】虚拟团队
- 【计算机网络】分组交换网中的时延,丢包和吞吐量
- 【计算机网络】为什么一个路由器会有两个wifi信号
- 离散数学之集合论 【上】