基于Vue全家桶制作的的高仿美团APP

鸣谢:该项目核心部分参考了 慕课网精英讲师ustbhuangyi的课程 ,其余部分 高仿美团APP构建。

转载http://www.tuicool.com/articles/ZB7Z3qZ

前端菜鸟项目,大佬们轻喷~

美团外卖APP

:point_right: 项目演示地址: http://39.108.232.27:9000

:point_right: GitHub: https://github.com/bxm0927/vue-meituan

基于 Vue 全家桶 (2.x) 制作的美团外卖APP ,一个媲美原生的移动端外卖 App,项目完整、功能完备、UI美观、UE一流。

技术栈

【前端】

  • Vue:构建用户界面的 MVVM 框架,核心是响应的数据绑定和组系统件
  • vue-router:为单页面应用提供的路由系统,项目上线前使用了路由懒加载技术,来异步加载路由优化性能
  • vuex:Vue 集中状态管理,在多个组件共享某些状态时非常便捷
  • vue-resource:服务端通讯,项目后期改用  axios
  • axios:服务端通讯。基于  Promise  的网络请求插件
  • vue-lazyload:第三方图片懒加载库,优化页面加载速度
  • better-scroll:iscroll 的优化版,使移动端滑动体验更加流畅
  • Mint UI:一套基于 Vue 2.0 的移动端组件库,出自饿了么前端
  • Sass(Scss):css 预编译处理器
  • ES6:ECMAScript 新一代语法,模块化、解构赋值、Promise、Class 等方法非常好用
  • Moment.js:日期时间格式化插件

【后端及数据库】

  • Node.js:利用 Express 起一个本地测试服务器
  • Express:一个自身功能极简,完全是由路由和中间件构成一个的WEB开发框架

【自动化构建及其他工具】

  • vue-cli:Vue 脚手架工具,快速初始化项目代码
  • ESLint:代码风格检查工具,规范代码书写
  • pm2:一个带有负载均衡功能的Node应用的进程管理器,此项目用于在阿里云服务器启动服务

收获

  • 对 vue 的组件、指令、选项、模版渲染、事件绑定、计算属性等有了一定了解
  • 了解了 vue 组件之间的交互、传值
  • 熟悉了在 vue 项目中使用第三方插件(组件)
  • 熟悉了组件化、模块化的开发思维
  • 熟悉了 vue-router 控制路由和子路由的方式
  • 熟悉项目开发流程:项目分析设计 -> 项目环境搭建 -> 依赖安装 -> 页面架构设计 -> 组件开发 -> 测试联调 -> 发布上线
  • 总结了一套 Vue 通用组件,可以在其它项目中复用的 10+ 个组件
  • 总结了一套常用的 SCSS mixin 库
  • 总结了一套常用的 JS 工具函数库
  • 体会到组件化、模块化开发带来的便捷
  • 体会到将对象封装成类(ES6 class) 的便捷性,以及利用工厂方式初始化类实例
  • 学会利用过渡效果及动画效果制作良好的用户交互体验

实现细节

主要功能:首页、商家模块、发现、订单、我的

首页

首页数据 mock 美团移动端数据 - 接口

商家模块

该页面主要实现了点餐、商品评价、商家信息预览等功能,内置购物车

数据通过 axios 异步请求获取,前期使用 mock 数据,后期抓取xx数据

公告浮层中使用了移动端经典的 CSS-Sticky-Footer 布局:关闭按钮被挤下去

公告浮层设计了淡入淡出效果,并使用了针对 IOS 用户的渐进增强效果: backdrop-filter

导航栏解决移动端1像素边框问题,并设计了通用 mixin

下面三个部分使用嵌套子路由实现:

点餐:

  • 布局上采用嵌套 Flex 布局。
  • 滚动效果借助  better-scroll  滚动插件实现。
  • 实现了左右菜单联动效果:右侧滚动,左侧对应菜单高亮,左侧点击,右侧滚动到对应区域。
  • 设计了迷你购物车组件
  • 利用 css 过度动画实现了购物车加减动态效果
  • 利用 js 钩子实现了加入购物车飞行小球效果

评价:

  • 复用  star 、 cross-line 、 ratings-select  等组件,体会到组件化开发的便捷性

商家:

  • 借助  better-scroll  实现了横向滚动和纵向滚动效果
  • 收藏功能使用  localstorage  本地存储,并设计了通用 store 方案

TODO

  1. 做一个node服务端,配合mongodb,实现商品的上下架、用户的登录注册等功能
  2. 丰富各个模块的深度

Build Setup

# clone the repo into your disk.
$ git clone https://github.com/bxm0927/vue-meituan.git

# install dependencies
$ npm install

# serve with hot reload at localhost:8080
$ npm run dev

# build for production with minification
$ npm run build

License

The code is available under the MIT license .

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本课程讲了Vue3+Vue2+Uni-app(uniapp)入门基础与实战,其中还重点讲解了ES6、TypeScript这些基础知识,实战由两大价值5000元的真实企业级项目组成,分别是仿京东电商网站和仿美团微信点餐小程序,同时两大项目代码全部赠送,还赠送前后端架构模板,工作中直接使用。VUE和uni-app是目前热门的前端框架,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件和插件,正式上线白屏问题,性能优化、解决iphoneX“刘海”兼容性问题、微信支付、微信授权登录,获取位置在地图上显示,获取用户所在的城市和街道信息,微信小程序发布审核等。对正在工作当中或打算学习VUE和uni-app高薪就业的你来说,那么这门课程便是你手中的葵花宝典。学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目。只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。此vue和uni-app课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!代码和ppt均可下载!免费提供《企业级完整实战项目接口文档》,绝对可用

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值