摘要：注此項(xiàng)目純屬個(gè)人瞎搞，正常下單請(qǐng)選擇餓了么官方客戶端。目前下單功能已經(jīng)實(shí)現(xiàn)，下單功能完全采用官網(wǎng)真實(shí)數(shù)據(jù)，可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機(jī)號(hào)碼，下單后可以在手機(jī)中查看并且付款。

vue2的發(fā)布后自己也研究了一段時(shí)間，奈何公司的技術(shù)棧是以react為主，沒有機(jī)會(huì)好好利用vue2去做一個(gè)完整的項(xiàng)目。雖然寫了幾個(gè)demo，但和寫一個(gè)完整的項(xiàng)目還是有很大差別的。于是自己想著用空余的時(shí)間寫一個(gè)項(xiàng)目，選擇了餓了么也只是因?yàn)榻?jīng)常用，熟悉它的布局。之前的餓了么官網(wǎng)是用angular寫的，最近才發(fā)現(xiàn)原來這段時(shí)間改成了vue，看來餓了么也入了vue的坑。

既然要寫一個(gè)完整的項(xiàng)目，就要認(rèn)真對(duì)待，所以除了付款其他所有功能都盡可能的實(shí)現(xiàn)，包括登陸、注冊(cè)、個(gè)人中心、搜索、購物車、下單等等，也包括所有我能注意到的細(xì)節(jié)也都一并做出來，所以這絕對(duì)算是一個(gè)比較大的項(xiàng)目。

項(xiàng)目不使用模擬數(shù)據(jù)，所有數(shù)據(jù)均使用從官網(wǎng)實(shí)時(shí)獲取的真實(shí)數(shù)據(jù)，最大程度實(shí)現(xiàn)和官網(wǎng)一樣的功能，所以首先遇到的問題是跨域，我們啟動(dòng)本地服務(wù)器是獲取不到官網(wǎng)數(shù)據(jù)的，這是跨域的。當(dāng)然解決的方法很多，jsonp，nginx反向代理，webpack-dev-server的proxy，這里我用的是 http-proxy-middleware 原理都是一樣的。

注：此項(xiàng)目純屬個(gè)人瞎搞，正常下單請(qǐng)選擇餓了么官方客戶端。

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

(演示效果為模擬數(shù)據(jù)，只做展示用，真實(shí)效果請(qǐng)下載項(xiàng)目并運(yùn)行，即可獲取真實(shí)的官網(wǎng)數(shù)據(jù));

demo地址（請(qǐng)用chrome手機(jī)模式預(yù)覽）

vue2 + vue-rotuer2 + vuex + webpack + ES6/7 + fetch + sass + flex + svg + http-proxy-middleware反向代理

定位功能 -- 完成

選擇城市 -- 完成

搜索地址 -- 完成

展示所選地址附近商家列表 -- 完成

搜索美食，餐館 -- 完成

根據(jù)距離、銷量、評(píng)分、特色菜、配送方式等進(jìn)行排序和篩選 -- 完成

餐館食品列表頁 -- 完成

購物車功能 -- 完成

店鋪評(píng)價(jià)頁面 -- 完成

單個(gè)食品詳情頁面 -- 完成

商家詳情頁 -- 完成

登陸、注冊(cè) -- 完成

修改密碼 -- 完成

個(gè)人中心 -- 完成

發(fā)送短信、語音驗(yàn)證 -- 完成

下單功能 -- 完成 ????

訂單列表 -- 完成

訂單詳情 -- 完成

帳戶信息

上傳頭像，修改用戶名

積分商城

服務(wù)中心

添加、刪除、修改收貨地址

付款(很難實(shí)現(xiàn))

|-- build                            // webpack配置文件
|-- config                           // 項(xiàng)目打包路徑
|-- elm                                // 上線項(xiàng)目文件，放在服務(wù)器即可正常訪問
|-- screenshots                      // 項(xiàng)目截圖
|-- src                              // 源碼目錄
|   |-- components                   // 組件
|       |-- common                   // 公共組件
|            |-- buyCart.js           // 購物車組件
|            |-- loading.js           // 頁面初始化加載數(shù)據(jù)的動(dòng)畫組件
|            |-- mixin.js             // 組件混合(包括：指令-下拉加載更多，處理圖片地址)
|            |-- ratingStar.js        // 評(píng)論的五顆星組件
|            |-- shoplist.js          // msite和shop頁面的餐館列表公共組件
|       |-- footer                   // 底部公共組件
|       |-- header                      // 頭部公共組件
|   |-- config                       // 基本配置
|       |-- env.js                   // 環(huán)境切換配置
|       |-- fetch.js                 // 獲取數(shù)據(jù)
|       |-- mUtils.js                // 常用的js方法
|       |-- rem.js                   // px轉(zhuǎn)換rem
|   |-- images                       // 公共圖片
|   |-- pages                        // 頁面組件
|       |-- city                     // 當(dāng)前城市頁
|        |-- food                      // 食品篩選排序頁
|        |-- confirmOrder             // 確認(rèn)訂單頁
|          |--children
|            |--invoice                 //    選擇發(fā)票頁
|            |--remark                 //    訂單備注頁
|            |--payment                 //    付款頁
|            |--userValidation         //    用戶驗(yàn)證頁
|            |--chooseAddress         //    選擇地址頁
|              |--children
|                |--addAddress        //    添加地址頁
|                  |--children
|                    |--searchAddress // 搜索地址頁
|       |-- find                     // 發(fā)現(xiàn)頁
|       |-- forget                   // 忘記密碼，修改密碼頁
|       |-- home                     // 首頁
|       |-- login                    // 登陸注冊(cè)頁
|       |-- msite                    // 商鋪列表頁
|       |-- order                    // 訂單列表頁
|            |--children
|                |--orderDetail         // 訂單詳情頁
|       |-- profile                  // 個(gè)人中心
|            |--children
|                |--balance             // 我的余額
|                |--benefit             // 我的優(yōu)惠
|                |--info                 // 帳戶信息
|                |--points             // 我的積分
|                |--service             // 服務(wù)中心
|       |-- search                   // 搜索頁
| ? ? ? |-- shop ? ? ? ? ? ? ? ? ? ? // 商鋪篩選頁
|            |-- children             
|                  |-- foodDetail       // 商鋪信息頁     
|                  |-- shopDetail       // 單個(gè)商鋪信息頁
|                    |-- children             
|                          |-- shopSafe // 商鋪認(rèn)證信息頁     
|       |-- vipcard                  // vip辦理頁
|
|   |-- plugins                      // 引用的插件
|
|   |-- router                       // 路由配置
|
|   |-- service                      // 數(shù)據(jù)交互統(tǒng)一調(diào)配
|        |-- template                 // 開發(fā)階段的臨時(shí)數(shù)據(jù)
|        |-- getData.js               // 獲取數(shù)據(jù)的統(tǒng)一調(diào)配文件，對(duì)接口進(jìn)行統(tǒng)一管理
|
|   |-- store                        // vuex的狀態(tài)管理
|       |-- modules                  // store模塊
|       |-- action.js                // 配置actions
|       |-- getters.js               // 配置getters
|       |-- index.js                 // 引用vuex，創(chuàng)建store
|       |-- mutation-types.js        // 定義常量muations名
|       |-- mutations.js             // 配置mutations
|
|   |-- style                        // 各種樣式文件
|       |-- common.scss              // 公共樣式文件
| ? ? ? |-- mixin.scss ? ? ? ? ? ? ? // 樣式配置文件
|
|   |-- App.vue                      // 頁面入口文件
|
|   |-- main.js                      // 程序入口文件，加載各種公共組件
|
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 代碼編寫規(guī)格
|-- .gitignore                       // 忽略的文件
|-- favicon.ico                      // 頁面左上角小圖標(biāo)
|-- index.html                       // 入口html文件
|-- package.json                     // 項(xiàng)目及工具的依賴配置文件
|-- README.md                        // 說明

1、因?yàn)椴⒉皇莈lm官方，而且因?yàn)橐_代理，必須在pc端打開，所以預(yù)計(jì)最多只能做到下單這一步，下單成功后可以在手機(jī)客戶端查看并付款。

2、目前下單功能已經(jīng)實(shí)現(xiàn)????，下單功能完全采用官網(wǎng)真實(shí)數(shù)據(jù)，可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機(jī)號(hào)碼，下單后可以在手機(jī)App中查看并且付款。

3、一般涉及到money的網(wǎng)頁邏輯都比較復(fù)雜，尤其像餓了么這樣一個(gè)開放的平臺(tái)，商家和食品種類繁多，頁面與頁面之間交互復(fù)雜，在寫到 購物車 和 下單 功能時(shí)眾多的數(shù)據(jù)和邏輯一度讓人很頭疼，又沒有設(shè)計(jì)和接口文檔，只能一步步摸索。

4、vue因其輕量級(jí)的框架在中小型項(xiàng)目中表現(xiàn)亮眼，在大型單頁面應(yīng)用中因?yàn)関uex的存在，表現(xiàn)依然出色，在處理復(fù)雜交互邏輯的時(shí)候，vuex的存在是不可或缺的。所以說利用 vue + vuex 完全可以去做大型的單頁面項(xiàng)目。

5、在項(xiàng)目中并沒有使用太多的插件，所有功能盡可能自己實(shí)現(xiàn)，對(duì)插件依賴太多并不是一件好事。

6、項(xiàng)目寫到現(xiàn)在，從 登陸注冊(cè)到、首頁、搜索、商家列表、購物車、下單、訂單列表、個(gè)人中心 一個(gè)流程走完之后、不但對(duì)vue的理解更深一層，而且對(duì)以后掌控大型項(xiàng)目的時(shí)候也有非常多的幫助，做一個(gè)實(shí)際的項(xiàng)目才能對(duì)自己有很大的提升。

7、項(xiàng)目已完成的頁面共 22 個(gè)，最主要的購物下單功能已經(jīng)實(shí)現(xiàn)，預(yù)計(jì)全部完成后總頁面數(shù)在 35 個(gè)左右。

其他頁面正在開發(fā)中。。。

本項(xiàng)目主要用于熟悉如何用 vue2 構(gòu)建一個(gè)中大型項(xiàng)目
vue在開發(fā)的過程中的體驗(yàn)很不錯(cuò)，上手快、運(yùn)行效率高，餓了么從angular轉(zhuǎn)向vue不是沒有道理的，看來vue會(huì)越來越火
開發(fā)環(huán)境 macOS 10.12.3  Chrome 55
另外推薦一個(gè) react + redux 開源項(xiàng)目，對(duì)react感興趣的朋友趕緊去看看。地址在這里

個(gè)人時(shí)間有限，還有其他的項(xiàng)目要做，在此感謝辰妹子，個(gè)人中心的所有頁面都由她來完成，辛苦了！?

如果覺得不錯(cuò)，請(qǐng)star一下吧 ?