Vue.js 高仿開發餓了麼APP
阿新 • • 發佈:2018-12-13
第1章 課程簡介
介紹課程的學習目標和學習內容。
1-1 課程簡介
1-2 課程安排
第2章 Vuejs介紹
從前端開發趨勢分析開始,引入 MVVM 開發框架和 Vue.js,接著對比流行框架Angular 和 React,最後詳細介紹 Vue.js 的核心思想-資料驅動和元件化。
2-1 Vuejs介紹-近年來前端開發趨勢
2-2 Vuejs介紹-MVVM框架
2-3 Vuejs介紹-什麼是Vuejs及Vuejs生態
2-4 Vuejs介紹-對比Angular、React
2-5 Vuejs介紹-Vuejs核心思想
第3章 Vue-cli 開啟 Vuejs 專案
介紹 Vue 專案的腳手架,如何安裝,對腳手架生成的目錄檔案做介紹,介紹 Vue 元件的編寫方法,最後執行 demo 專案並介紹 webpack 構建指令碼來說明 demo 的執行原理。
3-1 Vue-cli介紹
3-2 Vue-cli安裝
3-3 專案執行
3-4 專案檔案介紹
3-5 webpack打包(上)
3-6 webpack打包(中)
3-7 webpack打包(下)
第4章 專案實戰-準備工作
分析外賣 APP 商家頁面的需求,準備圖片資源,利用 icon-moon 把 svg 製作成圖示字型,對程式碼的目錄結構設計,最後 mock 測試資料。
4-1 需求分析
4-2 專案資源準備
4-3 圖示字體制作
4-4 專案目錄設計
4-5 mock資料(模擬後臺資料)
第5章 專案實戰-頁面骨架開發
設計頁面的骨架,拆分元件,商品、評論和商家詳情頁利用 Vue-router 做切換,最後還介紹了 flex 彈性佈局以及移動端 1 畫素 border 實現的小技巧。
5-1 元件拆分(上)
5-2 元件拆分(中)
5-3 元件拆分(下)
5-4 Vue-router(上)
5-5 Vue-router(下)
5-6 1畫素border實現
第6章 專案實戰-header元件開發
編寫 header 頭部元件,應用 Vue-resource 從服務端讀取資料,介紹如何在 Vue.js 中使用過渡動畫,如何編寫 css sticky footer 佈局,如何從需求中抽象出 star 星星元件。
6-1 Vue-resource應用(上) 6-2 Vue-resource應用(下) 6-3 外部元件(1) 6-4 外部元件(2) 6-5 外部元件(3) 6-6 外部元件(4) 6-7 外部元件(5) 6-8 外部元件(6) 6-9 詳情彈層頁(1)- 實現彈出層 6-10 詳情彈層頁(2)- CSS Sticky footer 6-11 詳情彈層頁(3)- star元件抽象(上) 6-12 詳情彈層頁(3)- star元件抽象(下) 6-13 詳情彈層頁(4)- star元件使用 6-14 詳情彈層頁(5)- 小標題自適應經典flex佈局實現 6-15 詳情彈層頁(6)- header剩餘元件實現(上) 6-16 詳情彈層頁(6)- header剩餘元件實現(下)
第7章 專案實戰-goods 商品列表頁開發
編寫 goods 商品元件,包括它的子元件 shopcart 購物車。介紹瞭如何在 Vue.js 應用第三方 JS 外掛 better-scroll實現列表滾動,並配合 Vue.js 的計算屬性來實現左右列表的聯動。應用了自定義 Vue.js 過渡動畫實現了購物車的飛入動畫效果,介紹了在 Vue.js中父子元件如何通訊。…