基於Vue全家桶製做的的高仿美團APP

鳴謝：該項目核心部分參考了慕課網精英講師ustbhuangyi的課程，其他部分高仿美團APP構建。

前端菜鳥項目，大佬們輕噴~

美團外賣APP

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

👉 GitHub：github.com/bxm0927/vue…

基於 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複製代碼

License

The code is available under the MIT license.