基於 vue2 + vuex 構建一個具有 45 個頁面的大型單頁面應用
- 2019 年 12 月 5 日
- 筆記
本文作者：IMWeb 蒼都 原文出處：IMWeb社區 未經同意，禁止轉載
前言
初學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] 上傳頭像 — 完成
付款 — 臣妾做不到啊
總結
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的完整生態圈。
。。。敬請期待
部分截圖
商鋪列表頁
商鋪篩選頁
搜索頁
餐館食品列表與購物車
登陸頁
個人中心
確認訂單頁
