1. 程式人生 > >Vue.js 高仿餓了麽外賣APP

Vue.js 高仿餓了麽外賣APP

數據 oot 移動 效果 開啟 spa vuejs lar flex布局

第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中父子組件如何通訊。...
7-1 布局編寫
7-2 左側menu布局
7-3 右側食品列表布局(1)
7-4 右側食品列表布局(2)
7-5 右側食品列表布局(3)
7-6 better-scroll運用(1)
7-7 better-scroll運用(2)
7-8 better-scroll運用(3)
7-9 shopcart購物車組件(1)
7-10 shopcart購物車組件(2)
7-11 shopcart購物車組件(3)
7-12 shopcart購物車組件(4)
7-13 shopcart購物車組件(5)
7-14 shopcart購物車組件(6)
7-15 cartcontrol組件(1)
7-16 cartcontrol組件(2)
7-17 cartcontrol組件(3)
7-18 購物車小球動畫實現(1)
7-19 購物車小球動畫實現(2)
7-20 購物車小球動畫實現(3)
7-21 購物車詳情頁實現(1)
7-22 購物車詳情頁實現(2)
7-23 購物車詳情頁實現(3)
7-24 購物車詳情頁實現(4)

第8章 項目實戰-food 商品詳情頁實現
編寫 food 商品詳情頁組件,介紹了圖片占位的技巧,並從需求中抽象出的 split 分隔組件和 ratingselect 評論組件,實現自定義過濾器 datefilter。
8-1 商品詳情頁實現(1)
8-2 商品詳情頁實現(2)
8-3 商品詳情頁實現(3)
8-4 商品詳情頁實現(4)
8-5 商品詳情頁實現(5)
8-6 split組件實現
8-7 ratingselect組件(1)
8-8 ratingselect組件(2)
8-9 ratingselect組件(3)
8-10 ratingselect組件(4)
8-11 ratingselect組件(5)
8-12 評價列表(1)
8-13 評價列表(2)
8-14 評價列表(3)
8-15 評價列表(4)
8-16 評價列表(5)
8-17 評價列表(6)

第9章 項目實戰-ratings評價列表頁實現
編寫 ratings 評價列表頁,感受在 Vue.js 中復用組件的好處,實現快速開發。
9-1 ratings組件開發-overview開發(1)
9-2 ratings組件開發-overview開發(2)
9-3 ratings組件開發-overview開發(3)
9-4 ratings組件開發-評價列表(1)
9-5 ratings組件開發-評價列表(2)
9-6 ratings組件開發-評價列表(3)

第10章 項目實戰-seller 商家詳情頁實現
編寫 seller 商家詳情頁,實現一套通用移動端數據存取方案,以及對項目做一些體驗上的優化。
10-1 seller組件開發-overview開發(1)
10-2 seller組件開發-overview開發(2)
10-3 seller組件開發-公告與活動開發(1)
10-4 seller組件開發-公告與活動開發(2)
10-5 seller組件開發-BScroll應用
10-6 seller組件開發-商家實景圖
10-7 seller組件開發-商家信息
10-8 seller組件開發-收藏商家(1)
10-9 seller組件開發-收藏商家(2)
10-10 seller組件開發-收藏商家
10-11 seller組件開發-體驗優化

第11章 項目實戰-項目編譯打包
上線前的最後一步,編譯打包Vue.js 項目。介紹了 webpack 編譯時的配置,如何利用node.js 開啟一個server本地調試。
11-1 webpack配置介紹
11-2 nodejs調試

第12章 課程總結
對課程做總結,並列出了課程所提到的主要知識點的鏈接,作為課程的延伸學習。
12-1 課程總結

第13章 項目從 vue.js1.0 向 2.0 升級
本章節把項目從1.0向2.0升級向大家做了簡要的介紹。
13-1 1.0升級2.0 配置文件修改
13-2 1.0升級2.0 源碼修改(上)
13-3 1.0升級2.0 源碼修改(下)

下載地址:百度網盤下載

Vue.js 高仿餓了麽外賣APP