【在線網(wǎng)課】Vue.js高仿餓了么外賣App 前端框架Vue.js 1.0升級2.0

課程目錄：

第1章 課程簡介

介紹課程的學(xué)習(xí)目標和學(xué)習(xí)內(nèi)容。

第2章 Vuejs介紹

從前端開發(fā)趨勢分析開始，引入 MVVM 開發(fā)框架和 Vue.js，接著對比流行框架Angular 和 React，最后詳細介紹 Vue.js 的核心思想-數(shù)據(jù)驅(qū)動和組件化。

第3章 Vue-cli 開啟 Vuejs 項目

介紹 Vue 項目的腳手架，如何安裝，對腳手架生成的目錄文件做介紹，介紹 Vue 組件的編寫方法，最后運行 demo 項目并介紹 webpack 構(gòu)建腳本來說明 demo 的運行原理。

第4章 項目實戰(zhàn)-準備工作

分析外賣 APP 商家頁面的需求，準備圖片資源，利用 icon-moon 把 svg 制作成圖標字體，對代碼的目錄結(jié)構(gòu)設(shè)計，最后 mock 測試數(shù)據(jù)。

第5章 項目實戰(zhàn)-頁面骨架開發(fā)

設(shè)計頁面的骨架，拆分組件，商品、評論和商家詳情頁利用 Vue-router 做切換，最后還介紹了 flex 彈性布局以及移動端 1 像素 border 實現(xiàn)的小技巧。

第6章 項目實戰(zhàn)-header組件開發(fā)

編寫 header 頭部組件，應(yīng)用 Vue-resource 從服務(wù)端讀取數(shù)據(jù)，介紹如何在 Vue.js 中使用過渡動畫，如何編寫 css sticky footer 布局，如何從需求中抽象出 star 星星組件。

第7章 項目實戰(zhàn)-goods 商品列表頁開發(fā)

編寫 goods 商品組件，包括它的子組件 shopcart 購物車。介紹了如何在 Vue.js 應(yīng)用第三方 JS 插件 better-scroll實現(xiàn)列表滾動，并配合 Vue.js 的計算屬性來實現(xiàn)左右列表的聯(lián)動。應(yīng)用了自定義 Vue.js 過渡動畫實現(xiàn)了購物車的飛入動畫效果，介紹了在 Vue.js中父子組件如何通訊。...

第8章 項目實戰(zhàn)-food 商品詳情頁實現(xiàn)

編寫 food 商品詳情頁組件，介紹了圖片占位的技巧，并從需求中抽象出的 split 分隔組件和 ratingselect 評論組件，實現(xiàn)自定義過濾器 datefilter。

第9章 項目實戰(zhàn)-ratings評價列表頁實現(xiàn)

編寫 ratings 評價列表頁，感受在 Vue.js 中復(fù)用組件的好處，實現(xiàn)快速開發(fā)。

第10章 項目實戰(zhàn)-seller 商家詳情頁實現(xiàn)

編寫 seller 商家詳情頁，實現(xiàn)一套通用移動端數(shù)據(jù)存取方案，以及對項目做一些體驗上的優(yōu)化。

第11章 項目實戰(zhàn)-項目編譯打包

上線前的最后一步，編譯打包Vue.js 項目。介紹了 webpack 編譯時的配置，如何利用node.js 開啟一個server本地調(diào)試。

第12章 課程總結(jié)

對課程做總結(jié)，并列出了課程所提到的主要知識點的鏈接，作為課程的延伸學(xué)習(xí)。

第13章 項目從 vue.js1.0 向 2.0 升級

本章節(jié)把項目從1.0向2.0升級向大家做了簡要的介紹。