序言
in
初學vue時曾在網上搜索vue的實戰項目源碼，無奈大部份都是簡單的demo，對于考量vue沒有太大的幫助，剩下的一些大部份都是像音樂播放器之類的展示型項目，交互沒有預期這么復雜。但我們實際在工作中，常常會碰到有購物車的項目，這類項目由于涉及到money，所以對邏輯嚴謹度要求高，頁面之間交互復雜，又會伴隨著登陸、注冊、用戶信息等等，經常會讓我們很難受。既然還沒人用vue寫過這樣的項目，那不如我來寫，開源下來對能見到的人也會有幫助。
這些功能性的項目很實用并且常常也很沉悶，沒有音樂播放器這么看上去艷麗，思來想去發覺餓了么是一個不錯的素材，一來它足夠復雜，開放的外賣平臺比通常的公司獨有商店愈加復雜。二來看到這么多小吃，你們也不會覺得到厭惡。
為何是餓了么，而不是百度，美團？緣由很簡單，三個外賣大鱷里，餓了么的色調和布局是最漂亮的，看上去最舒服。
此項目大大小小共45個頁面，涉及注冊、登錄、商品展示、購物車、下單等等外賣管理系統，是一個完整的流程。通常公司雖然是官網的單頁面項目都沒那么復雜，假如這個項目能駕馭的了，相信大部份公司的其他單頁面應用也就不在話下，雖然更復雜，也不會比這個高到那里去。
由于借助業余時間來做，年前就開始寫，又跨個年，周期有點長，項目從零布局到完成共用了2個多月的時間，目前項目早已完成，正在進行一些性能的優化，降低詳盡的注釋。
另外，這個項目和慕課網視頻的那種餓了么沒有任何關系，慕課網的項目只有一個頁面，我在看完vue的官方文檔后直接寫了這個項目，沒有參照任何人的代碼，請你們不要混為一談。
注：此項目純屬個人瞎搞，正常下單請選擇餓了么官方顧客端。
技術棧
vue2+vuex+vue-++ES6/7+fetch+sass+flex+svg
項目運行注意：因為涉及大量的ES6/7等新屬性，node須要6.0以上版本
git clone https://github.com/bailicangdu/vue2-elm.git ? cd vue2-elm npm install npm run dev
另外
此項目有配套的后臺系統，假如想前后臺同時開發，可以下載對應的后臺系統：后臺項目傳送地址。
此時啟動項目使用：npmrunlocal而不是npmrundev。
假如只做后端開發，請忽視這句話。
說明
假如對您有幫助，您可以點右上角"Star"支持一下感謝！^_^
或則您可以""一下，我會不斷掉源更多的有趣的項目
開發環境macOS10.12.3566.10.0
非常謝謝辰女生@，在百忙之中抽出時間和我一起完成了這個項目，辛苦了
如有問題請直接在中提，或則您發覺問題并有特別好的解決方案，歡迎PR
項目交流群：(QQ)
推薦一個react+redux開源項目，對react感興趣的同學趕快去瞧瞧。地址在這兒
另外一個vue2+vuex的入門項目，比當前的項目簡單好多，特別適宜入門練習。地址在這兒
關于數據插口的說明2017-05-30
因為一些緣由，原先的數據插口難以使用，造成項目未能正常運行。之后改用建立的后臺系統插口，數據插口的格式保持了和官網的一致。并提供對應的后臺管理系統
療效演示
查看demo請戳這兒（請用手機模式預覽）
聯通端掃描下方二維碼
目標功能總結
1、因為并不是elm官方，但是由于要開代理，必須在pc端打開，最多只能做到下單這一步，下單成功后可以在手機顧客端查看并付款。
2、一般涉及到money的網頁邏輯都比較復雜，尤其像餓了么這樣一個開放的平臺，店家和乳品種類繁雜，頁面與頁面之間交互復雜，在講到購物車和下單功能時諸多的數據和邏輯一度讓人很難受，又沒有設計和插口api文檔，只能一步步摸索。
3、vue因其輕量級的框架在中大型項目中表現亮眼，在小型單頁面應用中由于vuex的存在外賣管理系統，表現仍然出眾，在處理復雜交互邏輯的時侯，vuex的存在是不可或缺的。所以說借助vue+vuex完全可以去做小型的單頁面項目。
4、項目講到如今，從登陸注冊到、首頁、搜索、商家列表、購物車、下單、訂單列表、個人中心一個流程走完以后、不但對vue的理解更深一層，并且對之后掌控小型項目的時侯也有特別多的幫助，做一個實際的項目能夠對自己有很大的提高。
5、曾一度懷疑，花幾個月的時間做這樣一個項目究竟有沒有意義，原本只是想做一個小項目練練手，沒想到后來越寫越多，不過堅持出來后我相信一切都是值得的。
6、項目早已完成，共45個頁面。
最終目標
1、用node.js建立一個模擬外賣平臺的后臺系統。地址在這兒
2、利用react-寫出跨和IOS的原生APP版本。地址在這兒
3、如果時間來的及，會出一店家版本。
所以我的目的是建立一個橫越前后端，聯通IOS、的完整生態圈。
。。。敬請期盼
部份截圖商鋪列表頁
商鋪篩選頁
餐廳乳品列表與購物車
確認訂單頁
搜索頁
登陸頁
個人中心
項目布局
. ├── build // webpack配置文件 ├── config // 項目打包路徑 ├── elm // 上線項目文件，放在服務器即可正常訪問 ├── screenshots // 項目截圖 ├── src // 源碼目錄 │?? ├── components // 組件 │?? │?? ├── common // 公共組件 │?? │?? │?? ├── alertTip.vue // 彈出框組件 │?? │?? │?? ├── buyCart.vue // 購物車組件 │?? │?? │?? ├── computeTime.vue // 倒計時組件 │?? │?? │?? ├── loading.vue // 頁面初始化加載數據的動畫組件 │?? │?? │?? ├── mixin.js // 組件混合(包括：指令-下拉加載更多，處理圖片地址) │?? │?? │?? ├── ratingStar.vue // 評論的五顆星組件 │?? │?? │?? └── shoplist.vue // msite和shop頁面的餐館列表公共組件 │?? │?? ├── footer │?? │?? │?? └── footGuide.vue // 底部公共組件 │?? │?? └── header │?? │?? └── head.vue // 頭部公共組件 │?? ├── config // 基本配置 │?? │?? ├── env.js // 環境切換配置 │?? │?? ├── fetch.js // 獲取數據 │?? │?? ├── mUtils.js // 常用的js方法 │?? │?? └── rem.js // px轉換rem │?? ├── images // 公共圖片 │?? ├── page │?? │?? ├── balance │?? │?? │?? ├── balance.vue // 余額頁 │?? │?? │?? └── children │?? │?? │?? └── detail.vue // 余額說明 │?? │?? ├── benefit │?? │?? │?? ├── benefit.vue // 紅包頁 │?? │?? │?? └── children │?? │?? │?? ├── commend.vue // 推薦有獎 │?? │?? │?? ├── coupon.vue // 代金券說明 │?? │?? │?? ├── exchange.vue // 兌換紅包 │?? │?? │?? ├── hbDescription.vue // 紅包說明 │?? │?? │?? └── hbHistory.vue // 歷史紅包 │?? │?? ├── city │?? │?? │?? └── city.vue // 當前城市頁 │?? │?? ├── confirmOrder │?? │?? │?? ├── children │?? │?? │?? │?? ├── children │?? │?? │?? │?? │?? ├── addAddress.vue // 添加地址頁 │?? │?? │?? │?? │?? └── children │?? │?? │?? │?? │?? └── searchAddress.vue // 搜索地址頁 │?? │?? │?? │?? ├── chooseAddress.vue // 選擇地址頁 │?? │?? │?? │?? ├── invoice.vue // 選擇發票頁 │?? │?? │?? │?? ├── payment.vue // 付款頁 │?? │?? │?? │?? ├── remark.vue // 訂單備注頁 │?? │?? │?? │?? └── userValidation.vue // 用戶驗證頁 │?? │?? │?? └── confirmOrder.vue // 確認訂單頁 │?? │?? ├── download │?? │?? │?? └── download.vue // 下載App │?? │?? ├── find │?? │?? │?? └── find.vue // 發現頁 │?? │?? ├── food │?? │?? │?? └── food.vue // 食品篩選排序頁 │?? │?? ├── forget │?? │?? │?? └── forget.vue // 忘記密碼，修改密碼頁 │?? │?? ├── home │?? │?? │?? └── home.vue // 首頁 │?? │?? ├── login │?? │?? │?? └── login.vue // 登錄注冊頁 │?? │?? ├── msite │?? │?? │?? └── msite.vue // 商鋪列表頁 │?? │?? ├── order │?? │?? │?? ├── children │?? │?? │?? │?? └── orderDetail.vue // 訂單詳情頁 │?? │?? │?? └── order.vue // 訂單列表頁 │?? │?? ├── points │?? │?? │?? ├── children │?? │?? │?? │?? └── detail.vue // 積分說明 │?? │?? │?? └── points.vue // 積分頁 │?? │?? ├── profile │?? │?? │?? ├── children │?? │?? │?? │?? ├── children │?? │?? │?? │?? │?? ├── address.vue // 地址 │?? │?? │?? │?? │?? └── children │?? │?? │?? │?? │?? ├── add.vue // 新增地址 │?? │?? │?? │?? │?? └── children │?? │?? │?? │?? │?? └── addDetail.vue // 搜索地址 │?? │?? │?? │?? ├── info.vue // 帳戶信息 │?? │?? │?? │?? └── setusername.vue // 重置用戶名 │?? │?? │?? └── profile.vue // 個人中心 │?? │?? ├── search │?? │?? │?? └── search.vue // 搜索頁 │?? │?? ├── service │?? │?? │?? ├── children │?? │?? │?? │?? └── questionDetail.vue // 問題詳情 │?? │?? │?? └── service.vue // 服務中心 │?? │?? ├── shop │?? │?? │?? ├── children │?? │?? │?? │?? ├── children │?? │?? │?? │?? │?? └── shopSafe.vue // 商鋪認證信息頁 │?? │?? │?? │?? ├── foodDetail.vue // 商鋪信息頁 │?? │?? │?? │?? └── shopDetail.vue // 單個商鋪信息頁 │?? │?? │?? └── shop.vue // 商鋪篩選頁 │?? │?? └── vipcard │?? │?? ├── children │?? │?? │?? ├── invoiceRecord.vue // 購買記錄 │?? │?? │?? ├── useCart.vue // 使用卡號購買 │?? │?? │?? └── vipDescription.vue // 會員說明 │?? │?? └── vipcard.vue // 會員卡辦理頁 │?? ├── plugins // 引用的插件 │?? ├── router │?? │?? └── router.js // 路由配置 │?? ├── service // 數據交互統一調配 │?? │?? ├── getData.js // 獲取數據的統一調配文件，對接口進行統一管理 │?? │?? └── tempdata // 開發階段的臨時數據 │?? ├── store // vuex的狀態管理 │?? │?? ├── action.js // 配置actions │?? │?? ├── getters.js // 配置getters │?? │?? ├── index.js // 引用vuex，創建store │?? │?? ├── modules // store模塊 │?? │?? ├── mutation-types.js // 定義常量muations名 │?? │?? └── mutations.js // 配置mutations │?? └── style │?? ├── common.scss // 公共樣式文件 │?? ├── mixin.scss // 樣式配置文件 │?? └── swiper.min.css │?? ├── App.vue // 頁面入口文件 │?? ├── main.js // 程序入口文件，加載各種公共組件 ├── favicon.ico // 圖標 ├── index.html // 入口html文件 . 56 directories, 203 files
GPL
免責聲明：部分文章信息來源于網絡以及網友投稿，本站只負責對文章進行整理、排版、編輯，出于傳遞更多信息之目的，并不意味著贊同其觀點或證實其內容的真實性，如本站文章和轉稿涉及版權等問題，請作者在及時聯系本站，我們會盡快為您處理。
