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

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

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

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

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

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

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

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

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

定位功能 -- 完成

選擇城市 -- 完成

搜索地址 -- 完成

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

搜索美食，餐館 -- 完成

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

餐館食品列表頁 -- 完成

購物車功能 -- 完成

店鋪評價頁面 -- 完成

單個食品詳情頁面 -- 完成

商家詳情頁 -- 完成

登陸、注冊 -- 完成

修改密碼 -- 完成

個人中心 -- 完成

發(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ù)的動畫組件
|            |-- mixin.js             // 組件混合(包括：指令-下拉加載更多，處理圖片地址)
|            |-- ratingStar.js        // 評論的五顆星組件
|            |-- 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                    // 登陸注冊頁
|       |-- msite                    // 商鋪列表頁
|       |-- order                    // 訂單列表頁
|            |--children
|                |--orderDetail         // 訂單詳情頁
|       |-- profile                  // 個人中心
|            |--children
|                |--balance             // 我的余額
|                |--benefit             // 我的優(yōu)惠
|                |--info                 // 帳戶信息
|                |--points             // 我的積分
|                |--service             // 服務(wù)中心
|       |-- search                   // 搜索頁
| ? ? ? |-- shop ? ? ? ? ? ? ? ? ? ? // 商鋪篩選頁
|            |-- children             
|                  |-- foodDetail       // 商鋪信息頁     
|                  |-- shopDetail       // 單個商鋪信息頁
|                    |-- children             
|                          |-- shopSafe // 商鋪認(rèn)證信息頁     
|       |-- vipcard                  // vip辦理頁
|
|   |-- plugins                      // 引用的插件
|
|   |-- router                       // 路由配置
|
|   |-- service                      // 數(shù)據(jù)交互統(tǒng)一調(diào)配
|        |-- template                 // 開發(fā)階段的臨時數(shù)據(jù)
|        |-- getData.js               // 獲取數(shù)據(jù)的統(tǒng)一調(diào)配文件，對接口進(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ī)號碼，下單后可以在手機(jī)App中查看并且付款。

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

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

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

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

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

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

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

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

如果覺得不錯，請star一下吧 ?