摘要：注此項目純屬個人瞎搞，正常下單請選擇餓了么官方客戶端。目前下單功能已經實現，下單功能完全采用官網真實數據，可以控制官網發短信或者打電話到指定的手機號碼，下單后可以在手機中查看并且付款。

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           // 頁面初始化加載數據的動畫組件
|            |-- mixin.js             // 組件混合(包括：指令-下拉加載更多，處理圖片地址)
|            |-- ratingStar.js        // 評論的五顆星組件
|            |-- shoplist.js          // msite和shop頁面的餐館列表公共組件
|       |-- footer                   // 底部公共組件
|       |-- header                      // 頭部公共組件
|   |-- config                       // 基本配置
|       |-- env.js                   // 環境切換配置
|       |-- fetch.js                 // 獲取數據
|       |-- mUtils.js                // 常用的js方法
|       |-- rem.js                   // px轉換rem
|   |-- images                       // 公共圖片
|   |-- pages                        // 頁面組件
|       |-- city                     // 當前城市頁
|        |-- food                      // 食品篩選排序頁
|        |-- confirmOrder             // 確認訂單頁
|          |--children
|            |--invoice                 //    選擇發票頁
|            |--remark                 //    訂單備注頁
|            |--payment                 //    付款頁
|            |--userValidation         //    用戶驗證頁
|            |--chooseAddress         //    選擇地址頁
|              |--children
|                |--addAddress        //    添加地址頁
|                  |--children
|                    |--searchAddress // 搜索地址頁
|       |-- find                     // 發現頁
|       |-- forget                   // 忘記密碼，修改密碼頁
|       |-- home                     // 首頁
|       |-- login                    // 登陸注冊頁
|       |-- msite                    // 商鋪列表頁
|       |-- order                    // 訂單列表頁
|            |--children
|                |--orderDetail         // 訂單詳情頁
|       |-- profile                  // 個人中心
|            |--children
|                |--balance             // 我的余額
|                |--benefit             // 我的優惠
|                |--info                 // 帳戶信息
|                |--points             // 我的積分
|                |--service             // 服務中心
|       |-- search                   // 搜索頁
| ? ? ? |-- shop ? ? ? ? ? ? ? ? ? ? // 商鋪篩選頁
|            |-- children             
|                  |-- foodDetail       // 商鋪信息頁     
|                  |-- shopDetail       // 單個商鋪信息頁
|                    |-- children             
|                          |-- shopSafe // 商鋪認證信息頁     
|       |-- vipcard                  // vip辦理頁
|
|   |-- plugins                      // 引用的插件
|
|   |-- router                       // 路由配置
|
|   |-- service                      // 數據交互統一調配
|        |-- template                 // 開發階段的臨時數據
|        |-- getData.js               // 獲取數據的統一調配文件，對接口進行統一管理
|
|   |-- store                        // vuex的狀態管理
|       |-- modules                  // store模塊
|       |-- action.js                // 配置actions
|       |-- getters.js               // 配置getters
|       |-- index.js                 // 引用vuex，創建store
|       |-- mutation-types.js        // 定義常量muations名
|       |-- mutations.js             // 配置mutations
|
|   |-- style                        // 各種樣式文件
|       |-- common.scss              // 公共樣式文件
| ? ? ? |-- mixin.scss ? ? ? ? ? ? ? // 樣式配置文件
|
|   |-- App.vue                      // 頁面入口文件
|
|   |-- main.js                      // 程序入口文件，加載各種公共組件
|
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 代碼編寫規格
|-- .gitignore                       // 忽略的文件
|-- favicon.ico                      // 頁面左上角小圖標
|-- index.html                       // 入口html文件
|-- package.json                     // 項目及工具的依賴配置文件
|-- README.md                        // 說明

1、因為并不是elm官方，而且因為要開代理，必須在pc端打開，所以預計最多只能做到下單這一步，下單成功后可以在手機客戶端查看并付款。

2、目前下單功能已經實現????，下單功能完全采用官網真實數據，可以控制官網發短信或者打電話到指定的手機號碼，下單后可以在手機App中查看并且付款。

3、一般涉及到money的網頁邏輯都比較復雜，尤其像餓了么這樣一個開放的平臺，商家和食品種類繁多，頁面與頁面之間交互復雜，在寫到 購物車 和 下單 功能時眾多的數據和邏輯一度讓人很頭疼，又沒有設計和接口文檔，只能一步步摸索。

4、vue因其輕量級的框架在中小型項目中表現亮眼，在大型單頁面應用中因為vuex的存在，表現依然出色，在處理復雜交互邏輯的時候，vuex的存在是不可或缺的。所以說利用 vue + vuex 完全可以去做大型的單頁面項目。

5、在項目中并沒有使用太多的插件，所有功能盡可能自己實現，對插件依賴太多并不是一件好事。

6、項目寫到現在，從 登陸注冊到、首頁、搜索、商家列表、購物車、下單、訂單列表、個人中心 一個流程走完之后、不但對vue的理解更深一層，而且對以后掌控大型項目的時候也有非常多的幫助，做一個實際的項目才能對自己有很大的提升。

7、項目已完成的頁面共 22 個，最主要的購物下單功能已經實現，預計全部完成后總頁面數在 35 個左右。

其他頁面正在開發中。。。

本項目主要用于熟悉如何用 vue2 構建一個中大型項目
vue在開發的過程中的體驗很不錯，上手快、運行效率高，餓了么從angular轉向vue不是沒有道理的，看來vue會越來越火
開發環境 macOS 10.12.3  Chrome 55
另外推薦一個 react + redux 開源項目，對react感興趣的朋友趕緊去看看。地址在這里

個人時間有限，還有其他的項目要做，在此感謝辰妹子，個人中心的所有頁面都由她來完成，辛苦了！?

如果覺得不錯，請star一下吧 ?