美團外賣APP

項目演示地址： http://39.108.232.27:9000

基于 Vue 全家桶 (2.x) 制作的美團外賣APP ，一個媲美原生的移動端外賣 App，項目完整、功能完備、UI美觀、UE一流。

技術棧

【前端】

• Vue：構建用戶界面的 MVVM 框架，核心是響應的數據綁定和組系統件
• vue-router：為單頁面應用提供的路由系統，項目上線前使用了路由懶加載技術，來異步加載路由優化性能
• vuex：Vue 集中狀態管理，在多個組件共享某些狀態時非常便捷
• vue-resource：服務端通訊，項目后期改用  axios
• axios：服務端通訊。基于  Promise  的網絡請求插件
• vue-lazyload：第三方圖片懶加載庫，優化頁面加載速度
• better-scroll：iscroll 的優化版，使移動端滑動體驗更加流暢
• Mint UI：一套基于 Vue 2.0 的移動端組件庫，出自餓了么前端
• Sass(Scss)：css 預編譯處理器
• ES6：ECMAScript 新一代語法，模塊化、解構賦值、Promise、Class 等方法非常好用
• Moment.js：日期時間格式化插件

【后端及數據庫】

• Node.js：利用 Express 起一個本地測試服務器
• Express：一個自身功能極簡，完全是由路由和中間件構成一個的WEB開發框架

【自動化構建及其他工具】

• vue-cli：Vue 腳手架工具，快速初始化項目代碼
• ESLint：代碼風格檢查工具，規范代碼書寫
• pm2：一個帶有負載均衡功能的Node應用的進程管理器，此項目用于在阿里云服務器啟動服務

收獲

• 對 vue 的組件、指令、選項、模版渲染、事件綁定、計算屬性等有了一定了解
• 了解了 vue 組件之間的交互、傳值
• 熟悉了在 vue 項目中使用第三方插件（組件）
• 熟悉了組件化、模塊化的開發思維
• 熟悉了 vue-router 控制路由和子路由的方式
• 熟悉項目開發流程：項目分析設計 -> 項目環境搭建 -> 依賴安裝 -> 頁面架構設計 -> 組件開發 -> 測試聯調 -> 發布上線
• 總結了一套 Vue 通用組件，可以在其它項目中復用的 10+ 個組件
• 總結了一套常用的 SCSS mixin 庫
• 總結了一套常用的 JS 工具函數庫
• 體會到組件化、模塊化開發帶來的便捷
• 體會到將對象封裝成類(ES6 class) 的便捷性，以及利用工廠方式初始化類實例
• 學會利用過渡效果及動畫效果制作良好的用戶交互體驗

實現細節

主要功能：首頁、商家模塊、發現、訂單、我的

首頁

首頁數據 mock 美團移動端數據 - 接口

商家模塊

該頁面主要實現了點餐、商品評價、商家信息預覽等功能，內置購物車

數據通過 axios 異步請求獲取，前期使用 mock 數據，后期抓取xx數據

公告浮層中使用了移動端經典的 CSS-Sticky-Footer 布局：關閉按鈕被擠下去

公告浮層設計了淡入淡出效果，并使用了針對 IOS 用戶的漸進增強效果： backdrop-filter

導航欄解決移動端1像素邊框問題，并設計了通用 mixin

下面三個部分使用嵌套子路由實現：

點餐：

• 布局上采用嵌套 Flex 布局。
• 滾動效果借助  better-scroll  滾動插件實現。
• 實現了左右菜單聯動效果：右側滾動，左側對應菜單高亮，左側點擊，右側滾動到對應區域。
• 設計了迷你購物車組件
• 利用 css 過度動畫實現了購物車加減動態效果
• 利用 js 鉤子實現了加入購物車飛行小球效果

評價：

• 復用  star 、 cross-line 、 ratings-select  等組件，體會到組件化開發的便捷性

商家：

• 借助  better-scroll  實現了橫向滾動和縱向滾動效果
• 收藏功能使用  localstorage  本地存儲，并設計了通用 store 方案

TODO

1. 做一個node服務端，配合mongodb，實現商品的上下架、用戶的登錄注冊等功能
2. 豐富各個模塊的深度

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</pre> 
  
License
 
  
The code is available under the MIT license .
 
  
 
  
項目主頁：http://www.baiduhome.net/lib/view/home/1505306729959