餓了麼手機版-VUE2,專案實戰程式碼

tuihou123321發表於2018-06-02

github專案地址:github.com/tuihou12332…

專案說明

此專案沒有使用常用的UI框架比如(muse-ui,mini-ui),而是遵循最簡潔原則; 使用盡量少的css程式碼完成佈局,主要是受 張鑫旭大神對於css架構的啟發,css命名不應該遵循特性,更多的應該是功能,佈局採用了flex彈性佈局,使用css3動畫,font-awesome字型圖示,js外掛主要使用swiper輪播外掛

技術棧

vue2+vuex+vue-router+axios+webpack+ES6+less+flex

##專案執行

git clone https://github.com/tuihou123321/eleme-vue
cd eleme-vue
npm install
npm run dev
複製程式碼

效果展示:

演示地址: 二維碼:

主要完成頁面情況

  • [x] 選擇城市
  • [x] 搜尋地址
  • [x] 訂單頁面
  • [x] 個人中心
  • [x] 我的餘額
  • [x] 我的優惠
  • [x] 我的積分
  • [x] 我的訂單
  • [x] 餓了麼會員卡
  • [x] 服務中心
  • [x] APP下載頁面
  • [x] 登陸、註冊
  • [ ] 上傳頭像
  • [ ] 商家頁面
  • [ ] 購物車功能
  • [ ] 店鋪評論頁面
  • [ ] 單個食品詳情頁
  • [ ] 定位功能
  • [ ] 搜尋商店
  • [ ] 外賣首頁

主要技術點:

  • [x] 本地儲存(localstorage)
  • [x] 對非同步的處理(promise)
  • [x] vue過濾器filter的使用
  • [x] common.js模組化工具(promise)
  • [ ] 地理定位

介面展示:

餓了麼手機版-VUE2,專案實戰程式碼餓了麼手機版-VUE2,專案實戰程式碼

餓了麼手機版-VUE2,專案實戰程式碼餓了麼手機版-VUE2,專案實戰程式碼

餓了麼手機版-VUE2,專案實戰程式碼餓了麼手機版-VUE2,專案實戰程式碼

餓了麼手機版-VUE2,專案實戰程式碼餓了麼手機版-VUE2,專案實戰程式碼

餓了麼手機版-VUE2,專案實戰程式碼

相關文章