Vue.js 高仿餓了麼外賣APP

標籤：node.js   對比   開發架構   地址   編譯   ack   ejs   bpa   pac   

第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