vue2 + vuex 高度还原 饿了么 App，用真实数据登陆官网，并实现购物车、下单功能

前言

vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目，选择了饿了么也只是因为经常用，熟悉它的布局。之前的饿了么官网是用angular写的，最近才发现原来这段时间改成了vue，看来饿了么也入了vue的坑。

既然要写一个完整的项目，就要认真对待，所以除了付款其他所有功能都尽可能的实现，包括登陆、注册、个人中心、搜索、购物车、下单等等，也包括所有我能注意到的细节也都一并做出来，所以这绝对算是一个比较大的项目。

项目不使用模拟数据，所有数据均使用从官网实时获取的真实数据，最大程度实现和官网一样的功能，所以首先遇到的问题是跨域，我们启动本地服务器是获取不到官网数据的，这是跨域的。当然解决的方法很多，jsonp，nginx反向代理，webpack-dev-server的proxy，这里我用的是 http-proxy-middleware 原理都是一样的。

注：此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。

源码地址：

https://github.com/bailicangdu/vue2-elm

效果演示

(演示效果为模拟数据，只做展示用，真实效果请下载项目并运行，即可获取真实的官网数据);

demo地址（请用chrome手机模式预览）

移动端扫描下方二维码

技术栈

vue2 + vue-rotuer2 + vuex + webpack + ES6/7 + fetch + sass + flex + svg + http-proxy-middleware反向代理

目标功能

• 定位功能 – 完成
• 选择城市 – 完成
• 搜索地址 – 完成
• 展示所选地址附近商家列表 – 完成
• 搜索美食，餐馆 – 完成
• 根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 – 完成
• 餐馆食品列表页 – 完成
• 购物车功能 – 完成
• 店铺评价页面 – 完成
• 单个食品详情页面 – 完成
• 商家详情页 – 完成
• 登陆、注册 – 完成
• 修改密码 – 完成
• 个人中心 – 完成
• 发送短信、语音验证 – 完成
• 下单功能 – 完成 ✨✨����
• 订单列表 – 完成
• 订单详情 – 完成
• 帐户信息
• 上传头像，修改用户名
• 积分商城
• 服务中心
• 添加、删除、修改收货地址
• 付款(很难实现)

项目布局

|-- build                            // webpack配置文件
|-- config                           // 项目打包路径
|-- elm                              // 上线项目文件，放在服务器即可正常访问
|-- screenshots                      // 项目截图
|-- src                              // 源码目录
|   |-- components                   // 组件
|       |-- common                   // 公共组件
|           |-- buyCart.js           // 购物车组件
|           |-- loading.js           // 页面初始化加载数据的动画组件