序言
in
初学vue时曾在网上搜索vue的实战项目源码，无奈大部份都是简单的demo，对于考量vue没有太大的帮助，剩下的一些大部份都是像音乐播放器之类的展示型项目，交互没有预期这么复杂。但我们实际在工作中，常常会碰到有购物车的项目，这类项目由于涉及到money，所以对逻辑严谨度要求高，页面之间交互复杂，又会伴随着登陆、注册、用户信息等等，经常会让我们很难受。既然还没人用vue写过这样的项目，那不如我来写，开源下来对能见到的人也会有帮助。
这些功能性的项目很实用并且常常也很沉闷，没有音乐播放器这么看上去艳丽，思来想去发觉饿了么是一个不错的素材，一来它足够复杂，开放的外卖平台比通常的公司独有商店愈加复杂。二来看到这么多小吃，你们也不会觉得到厌恶。
为何是饿了么，而不是百度，美团？缘由很简单，三个外卖大鳄里，饿了么的色调和布局是最漂亮的，看上去最舒服。
此项目大大小小共45个页面，涉及注册、登录、商品展示、购物车、下单等等外卖管理系统，是一个完整的流程。通常公司虽然是官网的单页面项目都没那么复杂，假如这个项目能驾驭的了，相信大部份公司的其他单页面应用也就不在话下，虽然更复杂，也不会比这个高到那里去。
由于借助业余时间来做，年前就开始写，又跨个年，周期有点长，项目从零布局到完成共用了2个多月的时间，目前项目早已完成，正在进行一些性能的优化，降低详尽的注释。
另外，这个项目和慕课网视频的那种饿了么没有任何关系，慕课网的项目只有一个页面，我在看完vue的官方文档后直接写了这个项目，没有参照任何人的代码，请你们不要混为一谈。
注：此项目纯属个人瞎搞，正常下单请选择饿了么官方顾客端。
技术栈
vue2+vuex+vue-++ES6/7+fetch+sass+flex+svg
项目运行注意：因为涉及大量的ES6/7等新属性，node须要6.0以上版本
git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elm npm install npm run dev
另外
此项目有配套的后台系统，假如想前后台同时开发，可以下载对应的后台系统：后台项目传送地址。
此时启动项目使用：npmrunlocal而不是npmrundev。
假如只做后端开发，请忽视这句话。
说明
假如对您有帮助，您可以点右上角"Star"支持一下感谢！^_^
或则您可以""一下，我会不断掉源更多的有趣的项目
开发环境macOS10.12.3566.10.0
非常谢谢辰女生@，在百忙之中抽出时间和我一起完成了这个项目，辛苦了
如有问题请直接在中提，或则您发觉问题并有特别好的解决方案，欢迎PR
项目交流群：(QQ)
推荐一个react+redux开源项目，对react感兴趣的同学赶快去瞧瞧。地址在这儿
另外一个vue2+vuex的入门项目，比当前的项目简单好多，特别适宜入门练习。地址在这儿
关于数据插口的说明2017-05-30
因为一些缘由，原先的数据插口难以使用，造成项目未能正常运行。之后改用建立的后台系统插口，数据插口的格式保持了和官网的一致。并提供对应的后台管理系统
疗效演示
查看demo请戳这儿（请用手机模式预览）
联通端扫描下方二维码
目标功能总结
1、因为并不是elm官方，但是由于要开代理，必须在pc端打开，最多只能做到下单这一步，下单成功后可以在手机顾客端查看并付款。
2、一般涉及到money的网页逻辑都比较复杂，尤其像饿了么这样一个开放的平台，店家和乳品种类繁杂，页面与页面之间交互复杂，在讲到购物车和下单功能时诸多的数据和逻辑一度让人很难受，又没有设计和插口api文档，只能一步步摸索。
3、vue因其轻量级的框架在中大型项目中表现亮眼，在小型单页面应用中由于vuex的存在外卖管理系统，表现仍然出众，在处理复杂交互逻辑的时侯，vuex的存在是不可或缺的。所以说借助vue+vuex完全可以去做小型的单页面项目。
4、项目讲到如今，从登陆注册到、首页、搜索、商家列表、购物车、下单、订单列表、个人中心一个流程走完以后、不但对vue的理解更深一层，并且对之后掌控小型项目的时侯也有特别多的帮助，做一个实际的项目能够对自己有很大的提高。
5、曾一度怀疑，花几个月的时间做这样一个项目究竟有没有意义，原本只是想做一个小项目练练手，没想到后来越写越多，不过坚持出来后我相信一切都是值得的。
6、项目早已完成，共45个页面。
最终目标
1、用node.js建立一个模拟外卖平台的后台系统。地址在这儿
2、利用react-写出跨和IOS的原生APP版本。地址在这儿
3、如果时间来的及，会出一店家版本。
所以我的目的是建立一个横越前后端，联通IOS、的完整生态圈。
。。。敬请期盼
部份截图商铺列表页
商铺筛选页
餐厅乳品列表与购物车
确认订单页
搜索页
登陆页
个人中心
项目布局
. ├── build // webpack配置文件 ├── config // 项目打包路径 ├── elm // 上线项目文件，放在服务器即可正常访问 ├── screenshots // 项目截图 ├── src // 源码目录 │ ├── components // 组件 │ │ ├── common // 公共组件 │ │ │ ├── alertTip.vue // 弹出框组件 │ │ │ ├── buyCart.vue // 购物车组件 │ │ │ ├── computeTime.vue // 倒计时组件 │ │ │ ├── loading.vue // 页面初始化加载数据的动画组件 │ │ │ ├── mixin.js // 组件混合(包括：指令-下拉加载更多，处理图片地址) │ │ │ ├── ratingStar.vue // 评论的五颗星组件 │ │ │ └── shoplist.vue // msite和shop页面的餐馆列表公共组件 │ │ ├── footer │ │ │ └── footGuide.vue // 底部公共组件 │ │ └── header │ │ └── head.vue // 头部公共组件 │ ├── config // 基本配置 │ │ ├── env.js // 环境切换配置 │ │ ├── fetch.js // 获取数据 │ │ ├── mUtils.js // 常用的js方法 │ │ └── rem.js // px转换rem │ ├── images // 公共图片 │ ├── page │ │ ├── balance │ │ │ ├── balance.vue // 余额页 │ │ │ └── children │ │ │ └── detail.vue // 余额说明 │ │ ├── benefit │ │ │ ├── benefit.vue // 红包页 │ │ │ └── children │ │ │ ├── commend.vue // 推荐有奖 │ │ │ ├── coupon.vue // 代金券说明 │ │ │ ├── exchange.vue // 兑换红包 │ │ │ ├── hbDescription.vue // 红包说明 │ │ │ └── hbHistory.vue // 历史红包 │ │ ├── city │ │ │ └── city.vue // 当前城市页 │ │ ├── confirmOrder │ │ │ ├── children │ │ │ │ ├── children │ │ │ │ │ ├── addAddress.vue // 添加地址页 │ │ │ │ │ └── children │ │ │ │ │ └── searchAddress.vue // 搜索地址页 │ │ │ │ ├── chooseAddress.vue // 选择地址页 │ │ │ │ ├── invoice.vue // 选择发票页 │ │ │ │ ├── payment.vue // 付款页 │ │ │ │ ├── remark.vue // 订单备注页 │ │ │ │ └── userValidation.vue // 用户验证页 │ │ │ └── confirmOrder.vue // 确认订单页 │ │ ├── download │ │ │ └── download.vue // 下载App │ │ ├── find │ │ │ └── find.vue // 发现页 │ │ ├── food │ │ │ └── food.vue // 食品筛选排序页 │ │ ├── forget │ │ │ └── forget.vue // 忘记密码，修改密码页 │ │ ├── home │ │ │ └── home.vue // 首页 │ │ ├── login │ │ │ └── login.vue // 登录注册页 │ │ ├── msite │ │ │ └── msite.vue // 商铺列表页 │ │ ├── order │ │ │ ├── children │ │ │ │ └── orderDetail.vue // 订单详情页 │ │ │ └── order.vue // 订单列表页 │ │ ├── points │ │ │ ├── children │ │ │ │ └── detail.vue // 积分说明 │ │ │ └── points.vue // 积分页 │ │ ├── profile │ │ │ ├── children │ │ │ │ ├── children │ │ │ │ │ ├── address.vue // 地址 │ │ │ │ │ └── children │ │ │ │ │ ├── add.vue // 新增地址 │ │ │ │ │ └── children │ │ │ │ │ └── addDetail.vue // 搜索地址 │ │ │ │ ├── info.vue // 帐户信息 │ │ │ │ └── setusername.vue // 重置用户名 │ │ │ └── profile.vue // 个人中心 │ │ ├── search │ │ │ └── search.vue // 搜索页 │ │ ├── service │ │ │ ├── children │ │ │ │ └── questionDetail.vue // 问题详情 │ │ │ └── service.vue // 服务中心 │ │ ├── shop │ │ │ ├── children │ │ │ │ ├── children │ │ │ │ │ └── shopSafe.vue // 商铺认证信息页 │ │ │ │ ├── foodDetail.vue // 商铺信息页 │ │ │ │ └── shopDetail.vue // 单个商铺信息页 │ │ │ └── shop.vue // 商铺筛选页 │ │ └── vipcard │ │ ├── children │ │ │ ├── invoiceRecord.vue // 购买记录 │ │ │ ├── useCart.vue // 使用卡号购买 │ │ │ └── vipDescription.vue // 会员说明 │ │ └── vipcard.vue // 会员卡办理页 │ ├── plugins // 引用的插件 │ ├── router │ │ └── router.js // 路由配置 │ ├── service // 数据交互统一调配 │ │ ├── getData.js // 获取数据的统一调配文件，对接口进行统一管理 │ │ └── tempdata // 开发阶段的临时数据 │ ├── store // vuex的状态管理 │ │ ├── action.js // 配置actions │ │ ├── getters.js // 配置getters │ │ ├── index.js // 引用vuex，创建store │ │ ├── modules // store模块 │ │ ├── mutation-types.js // 定义常量muations名 │ │ └── mutations.js // 配置mutations │ └── style │ ├── common.scss // 公共样式文件 │ ├── mixin.scss // 样式配置文件 │ └── swiper.min.css │ ├── App.vue // 页面入口文件 │ ├── main.js // 程序入口文件，加载各种公共组件 ├── favicon.ico // 图标 ├── index.html // 入口html文件 . 56 directories, 203 files
GPL
免责声明：部分文章信息来源于网络以及网友投稿，本站只负责对文章进行整理、排版、编辑，出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性，如本站文章和转稿涉及版权等问题，请作者在及时联系本站，我们会尽快为您处理。
