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

白小明發表於2017-09-13
VueAPP

鳴謝：該專案核心部分參考了慕課網精英講師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.

相關文章