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           // 頁面初始化加載數據的動畫組件
|            |-- 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                        // 說明

總結

一、由於並非elm官方，並且由於要開代理，必須在pc端打開，因此預計最多隻能作到下單這一步，下單成功後能夠在手機客戶端查看並付款。

二、目前下單功能已經實現✨✨??，下單功能徹底採用官網真實數據，能夠控制官網發短信或者打電話到指定的手機號碼，下單後能夠在手機App中查看而且付款。

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

四、vue因其輕量級的框架在中小型項目中表現亮眼，在大型單頁面應用中由於vuex的存在，表現依然出色，在處理複雜交互邏輯的時候，vuex的存在是不可或缺的。因此說利用 vue + vuex 徹底能夠去作大型的單頁面項目。

五、在項目中並無使用太多的插件，全部功能儘量本身實現，對插件依賴太多並非一件好事。

六、項目寫到如今，從 登錄註冊到、首頁、搜索、商家列表、購物車、下單、訂單列表、我的中心 一個流程走完以後、不但對vue的理解更深一層，並且對之後掌控大型項目的時候也有很是多的幫助，作一個實際的項目才能對本身有很大的提高。

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

項目截圖

城市列表頁

搜索地址頁

商鋪列表頁

商鋪篩選頁

搜索頁

餐館食品列表與購物車

餐館評論頁

餐館信息頁

登錄頁

我的中心

確認訂單頁

訂單列表頁

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

最後

本項目主要用於熟悉如何用 vue2 構建一箇中大型項目

vue在開發的過程當中的體驗很不錯，上手快、運行效率高，餓了麼從angular轉向vue不是沒有道理的，看來vue會愈來愈火

開發環境 macOS 10.12.3 Chrome 55

另外推薦一個 react + redux 開源項目，對react感興趣的朋友趕忙去看看。地址在這裏

我的時間有限，還有其餘的項目要作，在此感謝辰妹子，我的中心的全部頁面都由她來完成，辛苦了！?

若是以爲不錯，請star一下吧 ?