基於 vue2 + vuex2 構建一個具有 40 多個頁面的大型單頁面應用 餓了麼
前言
初學vue時曾在網上搜索vue的實戰專案原始碼，無奈大部分都是簡單的demo，對於深究vue沒有太大的幫助，剩下的一些大部分都是像音樂播放器，知乎論壇之類的展示類專案，互動沒有預期那麼複雜。但我們實際在工作中，經常會遇到有購物車的專案，這類專案因為涉及到money，所以對邏輯嚴謹度要求高，頁面之間互動複雜，又會伴隨著登陸、註冊、使用者資訊等等，常常會讓我們很頭疼。既然還沒人用vue寫過這樣的專案，那不如我來寫，開源出來對能看到的人也會有幫助。
這種功能性的專案很實用但是往往也很枯燥，沒有音樂播放器那麼看起來絢麗，思來想去發現餓了麼是一個不錯的素材，一來它足夠複雜，開放的外賣平臺比一般的公司獨有商鋪更加複雜。二來 見到那麼多美食，大家也不會感覺到厭煩。我會用反向代理來解決跨域問題，直接使用餓了麼的官方資料，而不是本地模擬資料，不過必須在pc端開啟。
此專案大大小小共 40 多個頁面，涉及註冊、登陸、商品展示、購物車、下單等等，是一個完整的流程。一般公司即便是官網的單頁面專案都沒這麼複雜，如果這個專案能駕馭的了，相信大部分公司的其他單頁面應用也就不在話下，即便更復雜，也不會比這個高到哪裡去。
因為利用業餘時間來做，週期有點長，從專案從零布局到現在的35個頁面共用了2個多月的時間，目前專案慢慢接近尾聲，同時也在進行一些優化和bug的解決。
另外，這個專案和慕課網視訊的那個餓了麼沒有任何關係，慕課網的專案只有一個頁面，我在看完vue的官方文件後直接寫了這個專案，沒有參照任何人的程式碼，請大家不要混為一談。
注：此專案純屬個人瞎搞，正常下單請選擇餓了麼官方客戶端。
原始碼地址：
效果演示
(演示demo是上個月版本，使用的是模擬資料，ios會出現卡頓的現象，且很多已修復的bug未更新，最新效果請clone程式碼並執行，可以獲取真實的官網資料。我會盡快更新demo);
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、專案已完成的頁面共 35 個，已經慢慢接近尾聲。
部分截圖
城市列表頁
搜尋地址頁
商鋪列表頁
商鋪篩選頁
搜尋頁
餐館食品列表與購物車
餐館評論頁
食品詳情頁
餐館資訊頁
登陸頁
重置密碼頁
個人中心
確認訂單頁
訂單列表頁
其他頁面正在開發中。。。
最後
本專案主要用於熟悉如何用 vue2 構建一箇中大型專案
vue在開發的過程中的體驗很不錯，上手快、執行效率高，餓了麼從angular轉向vue不是沒有道理的，看來vue會越來越火
開發環境 macOS 10.12.3 Chrome 55
另外推薦一個 react + redux 開源專案，對react感興趣的朋友趕緊去看看。地址在這裡