基於 vue2 重寫餓了麼App

前言

初學vue時曾在網上搜索vue的實戰項目源碼，無奈大部分都是簡單的demo，對於深究vue沒有太大的幫助，剩下的一些大部分都是像音樂播放器之類的展現型項目，交互沒有預期那麼複雜。但咱們實際在工做中，常常會遇到有購物車的項目，這類項目由於涉及到money，因此對邏輯嚴謹度要求高，頁面之間交互複雜，又會伴隨着登錄、註冊、用戶信息等等，經常會讓咱們很頭疼。既然還沒人用vue寫過這樣的項目，那不如我來寫，開源出來對能看到的人也會有幫助。

這種功能性的項目很實用可是每每也很枯燥，沒有音樂播放器那麼看起來絢麗，思來想去發現餓了麼是一個不錯的素材，一來它足夠複雜，開放的外賣平臺比通常的公司獨有商店更加複雜。二來 見到那麼多美食，你們也不會感受到厭煩。

爲啥是餓了麼，而不是百度，美團？緣由很簡單，三個外賣大佬裏，餓了麼的色調和佈局是最漂亮的，看起來最舒服。

此項目大大小小共 45 個頁面，涉及註冊、登錄、商品展現、購物車、下單等等，是一個完整的流程。通常公司即使是官網的單頁面項目都沒這麼複雜，若是這個項目能駕馭的了，相信大部分公司的其餘單頁面應用也就不在話下，即使更復雜，也不會比這個高到哪裏去。

由於利用業餘時間來作，年前就開始寫，又跨個年，週期有點長，項目從零布局到完成共用了2個多月的時間，目前項目已經完成，正在進行一些性能的優化，增長詳細的註釋。

另外，這個項目和慕課網視頻的那個餓了麼沒有任何關係，慕課網的項目只有一個頁面，我在看完vue的官方文檔後直接寫了這個項目，沒有參照任何人的代碼，請你們不要混爲一談。

注：此項目純屬我的瞎搞，正常下單請選擇餓了麼官方客戶端。

源碼地址：

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

技術棧

vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg

項目運行

注意：因爲涉及大量的 ES6/7 等新屬性，nodejs 必須是 6.0 以上版本 ，node 7 是測試版，有可能會出問題，建議使用 node 6 穩定版 😱

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

cd vue2-elm

npm install

編譯環境

npm run dev

訪問 http://localhost:8088

線上版本

npm run build

生成的elm文件夾放在服務器便可正常訪問

關於 demo 與 數據 的說明🤔

一、下載代碼運行後，由於開啓了反向代理，能夠獲取真實的官方數據，最終能夠進行下單(真實的下單，而不是模擬，下單後能夠在官方App中查看並付款，親自試過，且成功付款點餐)，可是爲了安全起見，登錄的賬號爲固定的賬號，以避免泄露我的信息，不過照樣能夠點餐。

二、demo的數據爲模擬的固定數據，只作爲效果演示，由於反向代理必須在PC端運行代碼才行。

效果演示

(演示效果爲模擬數據，只作展現用，真實效果請下載項目並運行，便可獲取真實的官網數據);

查看demo請戳這裏（請用chrome手機模式預覽）

移動端掃描下方二維碼

目標功能

• 定位功能 -- 完成
• 選擇城市 -- 完成
• 搜索地址 -- 完成
• 展現所選地址附近商家列表 -- 完成
• 搜索美食，餐館 -- 完成
• 根據距離、銷量、評分、特點菜、配送方式等進行排序和篩選 -- 完成
• 餐館食品列表頁 -- 完成
• 購物車功能 -- 完成
• 店鋪評價頁面 -- 完成
• 單個食品詳情頁面 -- 完成
• 商家詳情頁 -- 完成
• 登錄、註冊 -- 完成
• 修改密碼 -- 完成
• 我的中心 -- 完成
• 發送短信、語音驗證 -- 完成
• 下單功能 -- 完成 ✨✨
• 訂單列表 -- 完成
• 訂單詳情 -- 完成
• 賬戶信息 -- 完成
• 上傳頭像，修改用戶名 -- 完成
• 積分商城 -- 完成
• 服務中心 -- 完成
• 添加、刪除、修改收貨地址 -- 完成
• 付款 -- 臣妾作不到啊～

說明

本項目主要用於熟悉如何用 vue2 架構一個大型項目

若是對您有幫助，您能夠點右上角 "Star" 支持一下 謝謝！ ^_^

或者您能夠 "follow" 一下，我會不斷開源更多的有趣的項目

開發環境 macOS 10.12.3 Chrome 55

特別感謝辰妹子，在百忙之中抽出時間和我一塊兒完成了這個項目，辛苦了

若有問題請直接在 Issues 中提，或者您發現問題並有很是好的解決方案，歡迎 PR

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

另一個 vue2 + vuex 的入門項目，比當前的項目簡單不少，很是適合入門練習。地址在這裏

總結

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

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

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

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

五、曾一度懷疑，花幾個月的時間作這樣一個項目到底有沒有意義，原本只是想作一個小項目練練手，沒想到後來越寫越多，不過堅持下來後我相信一切都是值得的。

六、項目已經完成，共45個頁面。

最終目標

一、用node.js構建一個模擬外賣平臺的後臺系統。(已經開始製做)

二、利用 react-native 寫出跨 Android 和 IOS 的原生APP版本。

三、若是時間來的及，會出一個pc端的網頁版。

因此個人目的是構建一個橫跨先後端，移動IOS、Android的完整生態圈。

。。。敬請期待

部分頁面截圖

商鋪列表頁

商鋪篩選頁

餐館食品列表與購物車

登錄頁

我的中心

確認訂單頁

訂單列表頁