前言
初學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文件夾放在服務器即可正常訪問
說明
本項目主要用於熟悉如何用 vue2 架構一個大型項目
如果對您有幫助，您可以點右上角 "Star" 支持一下 謝謝！ _
或者您可以 "follow" 一下，我會不斷開源更多的有趣的項目
開發環境 macOS 10.12.3 Chrome 55
特別感謝辰妹子，在百忙之中抽出時間和我一起完成了這個項目，辛苦了🌹
如有問題請直接在 Issues 中提，或者您發現問題並有非常好的解決方案，歡迎 PR 👍
推薦一個 react + redux 開源項目，對react感興趣的朋友趕緊去看看。地址在這里
另外一個 vue2 + vuex 的入門項目，比當前的項目簡單很多，非常適合入門練習。地址在這里
關於 demo 與 數據 的說明🤔
1、下載代碼運行后，因為開啟了反向代理，可以獲取真實的官方數據，最終可以進行下單(真實的下單，而不是模擬，下單后可以在官方App中查看並付款，親自試過，且成功付款點餐)，但是為了安全起見，登陸的帳號為固定的帳號，以免泄露個人信息，不過照樣可以點餐。
2、demo的數據為模擬的固定數據，只做為效果演示，因為反向代理必須在PC端運行代碼才行。
效果演示
(demo使用的是模擬數據，數據是固定的，只做為樣式的演示，要獲取真實的數據，請clone代碼並運行);
查看demo請戳這里（請用chrome手機模式預覽）
移動端掃描下方二維碼
目標功能
- [x] 定位功能 -- 完成
- [x] 選擇城市 -- 完成
- [x] 搜索地址 -- 完成
- [x] 展示所選地址附近商家列表 -- 完成
- [x] 搜索美食，餐館 -- 完成
- [x] 根據距離、銷量、評分、特色菜、配送方式等進行排序和篩選 -- 完成
- [x] 餐館食品列表頁 -- 完成
- [x] 購物車功能 -- 完成
- [x] 店鋪評價頁面 -- 完成
- [x] 單個食品詳情頁面 -- 完成
- [x] 商家詳情頁 -- 完成
- [x] 登陸、注冊 -- 完成
- [x] 修改密碼 -- 完成
- [x] 個人中心 -- 完成
- [x] 發送短信、語音驗證 -- 完成
- [x] 下單功能 -- 完成 ✨✨🎉🎉
- [x] 訂單列表 -- 完成
- [x] 訂單詳情 -- 完成
- [x] 下載App -- 完成
- [x] 添加、刪除、修改收貨地址 -- 完成
- [x] 帳戶信息 -- 完成
- [x] 服務中心 -- 完成
- [x] 紅包 -- 完成
- [x] 上傳頭像 -- 完成
- [x] 付款 -- 臣妾做不到啊~~
總結
1、因為並不是elm官方，而且因為要開代理，必須在pc端打開，最多只能做到下單這一步，下單成功后可以在手機客戶端查看並付款。
2、一般涉及到money的網頁邏輯都比較復雜，尤其像餓了么這樣一個開放的平台，商家和食品種類繁多，頁面與頁面之間交互復雜，在寫到 購物車 和 下單 功能時眾多的數據和邏輯一度讓人很頭疼，又沒有設計和接口api文檔，只能一步步摸索。
3、vue因其輕量級的框架在中小型項目中表現亮眼，在大型單頁面應用中因為vuex的存在，表現依然出色，在處理復雜交互邏輯的時候，vuex的存在是不可或缺的。所以說利用 vue + vuex 完全可以去做大型的單頁面項目。
4、項目寫到現在，從 登陸注冊到、首頁、搜索、商家列表、購物車、下單、訂單列表、個人中心 一個流程走完之后、不但對vue的理解更深一層，而且對以后掌控大型項目的時候也有非常多的幫助，做一個實際的項目才能對自己有很大的提升。
5、曾一度懷疑，花幾個月的時間做這樣一個項目到底有沒有意義，本來只是想做一個小項目練練手，沒想到后來越寫越多，不過堅持下來后我相信一切都是值得的。
6、項目已經完成，共45個頁面。
最終目標
1、用node.js構建一個模擬外賣平台的后台系統。(已經開始制作)
2、利用 react-native 寫出跨 Android 和 IOS 的原生APP版本。
3、如果時間來的及，會出一個pc端的網頁版。
所以我的目的是構建一個橫跨前后端，移動IOS、Android的完整生態圈。
。。。敬請期待
部分截圖
商鋪列表頁
商鋪篩選頁
搜索頁
餐館食品列表與購物車
登陸頁
個人中心
確認訂單頁
訂單列表頁
