{"id":17148705,"url":"https://github.com/oxoyo/vue-mui","last_synced_at":"2026-01-05T09:06:12.945Z","repository":{"id":86506685,"uuid":"114774520","full_name":"OXOYO/vue-mui","owner":"OXOYO","description":"美团外卖APP demo","archived":false,"fork":false,"pushed_at":"2017-09-25T06:27:34.000Z","size":1712,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T11:45:35.106Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OXOYO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-19T14:25:55.000Z","updated_at":"2022-03-17T01:39:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"31c71348-f2fa-443b-bccf-a994168a8513","html_url":"https://github.com/OXOYO/vue-mui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/OXOYO/vue-mui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OXOYO%2Fvue-mui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OXOYO%2Fvue-mui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OXOYO%2Fvue-mui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OXOYO%2Fvue-mui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OXOYO","download_url":"https://codeload.github.com/OXOYO/vue-mui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OXOYO%2Fvue-mui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28215499,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2026-01-05T02:00:06.358Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T21:29:34.839Z","updated_at":"2026-01-05T09:06:12.928Z","avatar_url":"https://github.com/OXOYO.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# :mortar_board: 美团外卖APP\n\n👉 项目演示地址：http://39.108.232.27:9000\n\n基于 **Vue 全家桶 (2.x)** 制作的美团外卖APP ，一个媲美原生的移动端外卖 App，项目完整、功能完备、UI美观、交互一流。\n\n## :book: 技术栈\n\n\u003cimg align=\"right\" src=\"http://oph264zoo.bkt.clouddn.com/17-9-15/96325894.jpg\"/\u003e\n\n【前端】\n\n- **Vue**：构建用户界面的 MVVM 框架，核心是响应的数据绑定和组系统件\n- **vue-router**：为单页面应用提供的路由系统，项目上线前使用了路由懒加载技术，来异步加载路由优化性能\n- **vuex**：Vue 集中状态管理，在多个组件共享某些状态时非常便捷\n- **vue-resource**：服务端通讯，项目后期改用 `axios`\n- **axios**：服务端通讯。基于 `Promise` 的网络请求插件\n- **vue-lazyload**：第三方图片懒加载库，优化页面加载速度\n- **better-scroll**：iscroll 的优化版，使移动端滑动体验更加流畅\n- **Mint UI**：一套基于 Vue 2.0 的移动端组件库，出自饿了么前端\n- **Sass(Scss)**：css 预编译处理器\n- **ES6**：ECMAScript 新一代语法，模块化、解构赋值、Promise、Class 等方法非常好用\n- **Moment.js**：日期时间格式化插件\n\n【后端及数据库】\n\n- **Node.js**：利用 Express 起一个本地测试服务器\n- **Express**：一个自身功能极简，完全是由路由和中间件构成一个的WEB开发框架\n\n【自动化构建及其他工具】\n\n- **vue-cli**：Vue 脚手架工具，快速初始化项目代码\n- **ESLint**：代码风格检查工具，规范代码书写\n- **pm2**：一个带有负载均衡功能的Node应用的进程管理器，此项目用于在阿里云服务器启动服务\n\n## :closed_book: 收获\n\n1. 对 vue 的组件、指令、选项、模版渲染、事件绑定、计算属性等有了一定了解\n2. 了解了 vue 组件之间的交互、传值\n3. 熟悉了在 vue 项目中使用第三方插件（组件）\n4. 熟悉了组件化、模块化的开发思维\n5. 熟悉了 vue-router 控制路由和子路由的方式\n6. 再次熟悉项目开发流程：项目分析设计 -\u003e 项目环境搭建 -\u003e 依赖安装 -\u003e 页面架构设计 -\u003e 组件开发 -\u003e 测试联调 -\u003e 发布上线\n1. 总结了一套 Vue 通用组件，可以在其它项目中复用的 10+ 个基础组件、15+ 个业务组件\n2. 总结了一套常用的 SCSS mixin 库\n3. 总结了一套常用的 JS 工具函数库\n4. 体会到组件化、模块化开发带来的便捷\n5. 体会到将对象封装成类(ES6 class) 的便捷性，以及利用工厂方式初始化类实例\n6. 学会利用过渡效果及动画效果制作良好的用户交互体验\n\n\n## :pencil: 实现细节\n\n主要功能：首页、商家模块、发现、订单、我的\n\n### 首页\n\n首页数据 mock 美团移动端数据 - [接口](http://i.waimai.meituan.com)\n\n### 商家模块\n\n该页面主要实现了点餐、商品评价、商家信息预览等功能，内置购物车\n\n数据通过 `axios` 异步请求获取，前期使用 mock 数据，后期抓取xx数据\n\n公告浮层中使用了移动端经典的 `CSS-Sticky-Footer` 布局：关闭按钮被挤下去\n\n公告浮层设计了淡入淡出效果，并使用了针对 IOS 用户的渐进增强效果： `backdrop-filter`\n\n导航栏解决移动端1像素边框问题，并设计了通用 mixin\n\n下面三个部分使用嵌套子路由实现：\n\n**点餐**：\n\n- 布局上采用嵌套 Flex 布局。\n- 滚动效果借助 `better-scroll` 滚动插件实现。\n- 实现了左右菜单联动效果：右侧滚动，左侧对应菜单高亮，左侧点击，右侧滚动到对应区域。\n- 设计了迷你购物车组件\n- 利用 css 过度动画实现了购物车加减动态效果\n- 利用 js 钩子实现了加入购物车飞行小球效果\n\n**评价**：\n\n- 复用 `star`、`cross-line`、`ratings-select` 等组件，体会到组件化开发的便捷性\n\n**商家**：\n\n- 借助 `better-scroll` 实现了横向滚动和纵向滚动效果\n- 收藏功能使用 `localstorage` 本地存储，并设计了通用 store 方案\n\n\n## :pushpin: TODO\n\n1. 做一个node服务端，配合mongodb，实现商品的上下架、用户的登录注册等功能\n2. 丰富各个模块的深度\n\n## :package: Build Setup\n\n``` bash\n# clone the repo into your disk.\n$ git clone https://github.com/bxm0927/vue-meituan.git\n\n# install dependencies\n$ npm install\n\n# serve with hot reload at localhost:8080\n$ npm run dev\n\n# build for production with minification\n$ npm run build\n```\n\n\n## :four_leaf_clover: License\n\nThe code is available under the [MIT license](https://opensource.org/licenses/MIT).\n\n![](http://oph264zoo.bkt.clouddn.com/17-8-11/10545126.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foxoyo%2Fvue-mui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foxoyo%2Fvue-mui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foxoyo%2Fvue-mui/lists"}