鳴謝：該項(xiàng)目核心部分參考了慕課網(wǎng)精英講師ustbhuangyi的課程，其余部分高仿美團(tuán)APP構(gòu)建。
前端菜鳥項(xiàng)目，大佬們輕噴~
美團(tuán)外賣APP
?? 項(xiàng)目演示地址：http://39.108.232.27:9000
?? GitHub：https://github.com/bxm0927/vue-meituan
基于 Vue 全家桶 (2.x) 制作的美團(tuán)外賣APP ，一個(gè)媲美原生的移動(dòng)端外賣 App，項(xiàng)目完整、功能完備、UI美觀、UE一流。
技術(shù)棧
【前端】
- Vue：構(gòu)建用戶界面的 MVVM 框架，核心是響應(yīng)的數(shù)據(jù)綁定和組系統(tǒng)件
- vue-router：為單頁面應(yīng)用提供的路由系統(tǒng)，項(xiàng)目上線前使用了路由懶加載技術(shù)，來異步加載路由優(yōu)化性能
- vuex：Vue 集中狀態(tài)管理，在多個(gè)組件共享某些狀態(tài)時(shí)非常便捷
-
vue-resource：服務(wù)端通訊，項(xiàng)目后期改用
axios -
axios：服務(wù)端通訊。基于
Promise的網(wǎng)絡(luò)請求插件 - vue-lazyload：第三方圖片懶加載庫，優(yōu)化頁面加載速度
- better-scroll：iscroll 的優(yōu)化版，使移動(dòng)端滑動(dòng)體驗(yàn)更加流暢
- Mint UI：一套基于 Vue 2.0 的移動(dòng)端組件庫，出自餓了么前端
- Sass(Scss)：css 預(yù)編譯處理器
- ES6：ECMAScript 新一代語法，模塊化、解構(gòu)賦值、Promise、Class 等方法非常好用
- Moment.js：日期時(shí)間格式化插件
【后端及數(shù)據(jù)庫】
- Node.js：利用 Express 起一個(gè)本地測試服務(wù)器
- Express：一個(gè)自身功能極簡，完全是由路由和中間件構(gòu)成一個(gè)的WEB開發(fā)框架
【自動(dòng)化構(gòu)建及其他工具】
- vue-cli：Vue 腳手架工具，快速初始化項(xiàng)目代碼
- ESLint：代碼風(fēng)格檢查工具，規(guī)范代碼書寫
- pm2：一個(gè)帶有負(fù)載均衡功能的Node應(yīng)用的進(jìn)程管理器，此項(xiàng)目用于在阿里云服務(wù)器啟動(dòng)服務(wù)
收獲
- 對(duì) vue 的組件、指令、選項(xiàng)、模版渲染、事件綁定、計(jì)算屬性等有了一定了解
- 了解了 vue 組件之間的交互、傳值
- 熟悉了在 vue 項(xiàng)目中使用第三方插件（組件）
- 熟悉了組件化、模塊化的開發(fā)思維
- 熟悉了 vue-router 控制路由和子路由的方式
- 熟悉項(xiàng)目開發(fā)流程：項(xiàng)目分析設(shè)計(jì) -> 項(xiàng)目環(huán)境搭建 -> 依賴安裝 -> 頁面架構(gòu)設(shè)計(jì) -> 組件開發(fā) -> 測試聯(lián)調(diào) -> 發(fā)布上線
- 總結(jié)了一套 Vue 通用組件，可以在其它項(xiàng)目中復(fù)用的 10+ 個(gè)組件
- 總結(jié)了一套常用的 SCSS mixin 庫
- 總結(jié)了一套常用的 JS 工具函數(shù)庫
- 體會(huì)到組件化、模塊化開發(fā)帶來的便捷
- 體會(huì)到將對(duì)象封裝成類(ES6 class) 的便捷性，以及利用工廠方式初始化類實(shí)例
- 學(xué)會(huì)利用過渡效果及動(dòng)畫效果制作良好的用戶交互體驗(yàn)
實(shí)現(xiàn)細(xì)節(jié)
主要功能：首頁、商家模塊、發(fā)現(xiàn)、訂單、我的
首頁
首頁數(shù)據(jù) mock 美團(tuán)移動(dòng)端數(shù)據(jù) - 接口
商家模塊
該頁面主要實(shí)現(xiàn)了點(diǎn)餐、商品評(píng)價(jià)、商家信息預(yù)覽等功能，內(nèi)置購物車
數(shù)據(jù)通過 axios 異步請求獲取，前期使用 mock 數(shù)據(jù)，后期抓取xx數(shù)據(jù)
公告浮層中使用了移動(dòng)端經(jīng)典的 CSS-Sticky-Footer 布局：關(guān)閉按鈕被擠下去
公告浮層設(shè)計(jì)了淡入淡出效果，并使用了針對(duì) IOS 用戶的漸進(jìn)增強(qiáng)效果： backdrop-filter
導(dǎo)航欄解決移動(dòng)端1像素邊框問題，并設(shè)計(jì)了通用 mixin
下面三個(gè)部分使用嵌套子路由實(shí)現(xiàn)：
點(diǎn)餐：
- 布局上采用嵌套 Flex 布局。
- 滾動(dòng)效果借助
better-scroll滾動(dòng)插件實(shí)現(xiàn)。 - 實(shí)現(xiàn)了左右菜單聯(lián)動(dòng)效果：右側(cè)滾動(dòng)，左側(cè)對(duì)應(yīng)菜單高亮，左側(cè)點(diǎn)擊，右側(cè)滾動(dòng)到對(duì)應(yīng)區(qū)域。
- 設(shè)計(jì)了迷你購物車組件
- 利用 css 過度動(dòng)畫實(shí)現(xiàn)了購物車加減動(dòng)態(tài)效果
- 利用 js 鉤子實(shí)現(xiàn)了加入購物車飛行小球效果
評(píng)價(jià)：
- 復(fù)用
star、cross-line、ratings-select等組件，體會(huì)到組件化開發(fā)的便捷性
商家：
- 借助
better-scroll實(shí)現(xiàn)了橫向滾動(dòng)和縱向滾動(dòng)效果 - 收藏功能使用
localstorage本地存儲(chǔ)，并設(shè)計(jì)了通用 store 方案
TODO
- 做一個(gè)node服務(wù)端，配合mongodb，實(shí)現(xiàn)商品的上下架、用戶的登錄注冊等功能
- 豐富各個(gè)模塊的深度
Build Setup
# clone the repo into your disk.
$ git clone https://github.com/bxm0927/vue-meituan.git
# install dependencies
$ npm install
# serve with hot reload at localhost:8080
$ npm run dev
# build for production with minification
$ npm run build
License
The code is available under the MIT license.
