基于Vue全家桶制作的的高仿美团APP
美团外卖APP
? 项目演示地址:http://39.108.232.27:9000
? GitHub:github.com/bxm0927/vue…
基于 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
- 做一个node服务端,配合mongodb,实现商品的上下架、用户的登录注册等功能
- 丰富各个模块的深度
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.
作者:白小明
链接:https://juejin.im/post/59b8ea926fb9a00a636a2f48
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
基于Vue全家桶制作的的高仿美团APP相关推荐
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vu ...
- 《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.推荐信息制作 推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一 ...
- 《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作 在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...
- 《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目 首先打开在线编辑器地址:https://editor.ivx ...
- 《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.美食页顶部商家页制作 1.1 页面主格调确认 该美食页为首页中美食按钮 ...
- vue音乐笔记_基于vue全家桶的移动端音乐web app
项目描述 这是一个基于 Vue2.x 和网易云音乐 API制作的移动端 web app 项目:由于是出于练习和实验的目的,因此并非是网易云音乐 app 的替代品,目前也没有涵盖全部的功能: 该项目主要 ...
- [在线+源码]vue全家桶+Typescript开发一款习惯养成APP
vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. 源码地址 欢迎star 项目演示地址 建议直接添加到主屏幕(ios端体验差一些). ...
- 基于Vue 全家桶实现网易云音乐 WebApp
基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓 ...
最新文章
- vue项目通过命令行传参实现多环境配置(基于@vue/cli)
- shutil模块,为什么说它是os模块的兄弟模块?
- 软工实践练习一——使用Git进行代码管理心得
- Java堆、栈、内存分析
- 软考新思维--2017年上半年信息系统项目管理师上午试题分析与答案(试题6-10题)...
- python信用评分卡_基于Python的信用评分卡模型分析(二)
- 手把手教你用 Python 绘制酷炫的桑基图!
- Android进阶笔记12:ListView篇之图片优化
- Ajax json 数据格式
- JFreeChart学习示例
- Markdown 笔记神器 Typora 如何上传本地图片(图床功能)?
- 在windows平台上测试自己的人脸检测算法在FDDB数据集
- JQuery的选择器对控件ID含有特殊字符的解决方法
- java解压zip压缩包
- 我的中兴五年:加班为何成了底层员工心中永远的痛
- 完美解决电脑老是弹出广告窗口!
- 计算机专业设计(论文)内容及要求,计算机专业毕业设计要求.doc
- 中间件 | 负载均衡策略
- bib文件引用参考文献方法--心得
- cocos2dx项目显示窗口大小调整