141544| 101
|
[前端] Vue.js高仿餓了么外賣App 2016最火前端框架 |
Vue.js高仿餓了么外賣App 2016最火前端框架 實(shí)戰(zhàn)-源碼
內(nèi)容之前放錯(cuò)了沒看到不好意思各位現(xiàn)在已經(jīng)從新發(fā)布了 vue.js 是 2016 最火的前端框架,資深程序員這樣評(píng)價(jià)它:“vue.js 兼具 angular.js 和 react.js 的優(yōu)點(diǎn),并剔除它們的缺點(diǎn)” 通過高仿餓了么外賣APP學(xué)會(huì)Vue.js 適合人群及技術(shù)儲(chǔ)備要求 對(duì)于前端工程師,無論你現(xiàn)在是否用得到Vue.js,你都應(yīng)該提前掌握Vue.js 一旦你開始使用Vue.js,一定會(huì)對(duì)它愛不釋手 技術(shù)儲(chǔ)備 具有一定自學(xué)能力,相當(dāng)于有一年左右前端開發(fā)經(jīng)驗(yàn)或用過其它前端框架進(jìn)行過項(xiàng)目開發(fā) 有一定前端基礎(chǔ),了解JS、CSS、HTML基礎(chǔ)知識(shí),了解Vue.js基礎(chǔ)知識(shí) 代碼少速度快的開發(fā)模式 使用Vue.js+es6+webpack等前端最新最熱的技術(shù),采用組件化、模塊化的開發(fā)方式,讓你用更少的代碼做更快速的開發(fā) 外賣App核心的商家模塊 提取外賣App最核心的商家模塊(包括商品、評(píng)論、商家介紹等各模塊),完全高仿“餓了么”外賣APP,讓你更能領(lǐng)略Vue.js組件化的魅力 外賣App商家頁面為主線 以外賣App商家頁為主線,引出開發(fā)所涉及的各種相關(guān)知識(shí)點(diǎn),讓同學(xué)們了解一個(gè)項(xiàng)目從0到1的整個(gè)過程,干貨滿滿 能直接上線的高質(zhì)量代碼 為了讓你更容易在工作中實(shí)際運(yùn)用Vue.js,講師以上線代碼的標(biāo)準(zhǔn)寫代碼,讓你切實(shí)感受到什么是擴(kuò)展性、通用性強(qiáng)的優(yōu)質(zhì)代碼 學(xué)完這門課,你會(huì)掌握這些Vue.js的技術(shù)點(diǎn) file:///C:\Users\shi\AppData\Roaming\Tencent\QQ\Temp\TempPic\X($RZ4XHW$%LU@]`XAFD%_J.tmp流程及開發(fā)方法了解一個(gè)項(xiàng)目完整的開發(fā)流程學(xué)會(huì)組件化、模塊化的開發(fā)模式掌握使用Vue-cli腳手架初始化Vue.js項(xiàng)目了解webpack的打包原理學(xué)會(huì)模擬json后端數(shù)據(jù),前后端分離開發(fā)學(xué)會(huì)es6+eslint的開發(fā)方式 file:///C:\Users\shi\AppData\Roaming\Tencent\QQ\Temp\TempPic\L4SDEV%Z%]TV$FRXJI0)6TL.tmp第三方組件學(xué)會(huì)使用stylus編寫模塊化的CSS學(xué)會(huì)使用vue-router開發(fā)單頁應(yīng)用學(xué)會(huì)使用vue-resource與后端數(shù)據(jù)交互學(xué)會(huì)如何在Vue.js框架里和第三方JS插件交互 設(shè)計(jì)思想與模式學(xué)會(huì)使用Vue.js的過渡編寫酷炫的交互動(dòng)畫了解移動(dòng)端設(shè)備像素比的概念學(xué)會(huì)制作并使用圖標(biāo)字學(xué)會(huì)解決移動(dòng)端1px邊框問題學(xué)會(huì)移動(dòng)端經(jīng)典的css sticky footer布局學(xué)會(huì)flex彈性布局 《Vue.js權(quán)威指南》作者滴滴前端技術(shù)專家 Ustbhuangyi 北京科技大學(xué)計(jì)算機(jī)專業(yè)碩士。曾任職百度,現(xiàn)就職滴滴,前端技術(shù)專家,擅長(zhǎng)前端自動(dòng)化、工程化,前端架構(gòu)方向。對(duì)Vue.js有很深的理解,是《Vue.js權(quán)威指南》一書的主要作者。他有著教科書式的代碼寫作習(xí)慣,對(duì)代碼有潔癖,追求高質(zhì)量的代碼, 跟隨這樣的老師一起敲代碼,學(xué)會(huì)技術(shù)的同時(shí),你還會(huì)提升編寫高可擴(kuò)展,通用性強(qiáng)的代碼的能力 第1章 課程簡(jiǎn)介 介紹課程的學(xué)習(xí)目標(biāo)和學(xué)習(xí)內(nèi)容。 第2章 Vuejs介紹 從前端開發(fā)趨勢(shì)分析開始,引入 MVVM 開發(fā)框架和 Vue.js,接著對(duì)比流行框架Angular 和 React,最后詳細(xì)介紹 Vue.js 的核心思想-數(shù)據(jù)驅(qū)動(dòng)和組件化。 第3章 Vue-cli 開啟 Vuejs 項(xiàng)目 介紹 Vue 項(xiàng)目的腳手架,如何安裝,對(duì)腳手架生成的目錄文件做介紹,介紹 Vue 組件的編寫方法,最后運(yùn)行 demo 項(xiàng)目并介紹 webpack 構(gòu)建腳本來說明 demo 的運(yùn)行原理。 第4章 項(xiàng)目實(shí)戰(zhàn)-準(zhǔn)備工作 分析外賣 APP 商家頁面的需求,準(zhǔn)備圖片資源,利用 icon-moon 把 svg 制作成圖標(biāo)字體,對(duì)代碼的目錄結(jié)構(gòu)設(shè)計(jì),最后 mock 測(cè)試數(shù)據(jù)。 第5章 項(xiàng)目實(shí)戰(zhàn)-頁面骨架開發(fā) 設(shè)計(jì)頁面的骨架,拆分組件,商品、評(píng)論和商家詳情頁利用 Vue-router 做切換,最后還介紹了 flex 彈性布局以及移動(dòng)端 1 像素 border 實(shí)現(xiàn)的小技巧。 第6章 項(xiàng)目實(shí)戰(zhàn)-header組件開發(fā) 編寫 header 頭部組件,應(yīng)用 Vue-resource 從服務(wù)端讀取數(shù)據(jù),介紹如何在 Vue.js 中使用過渡動(dòng)畫,如何編寫 css sticky footer 布局,如何從需求中抽象出 star 星星組件。 第7章 項(xiàng)目實(shí)戰(zhàn)-goods 商品列表頁開發(fā) 編寫 goods 商品組件,包括它的子組件 shopcart 購物車。介紹了如何在 Vue.js 應(yīng)用第三方 JS 插件 better-scroll實(shí)現(xiàn)列表滾動(dòng),并配合 Vue.js 的計(jì)算屬性來實(shí)現(xiàn)左右列表的聯(lián)動(dòng)。應(yīng)用了自定義 Vue.js 過渡動(dòng)畫實(shí)現(xiàn)了購物車的飛入動(dòng)畫效果,介紹了在 Vue.js中父子組件如何通訊。... 第8章 項(xiàng)目實(shí)戰(zhàn)-food 商品詳情頁實(shí)現(xiàn) 編寫 food 商品詳情頁組件,介紹了圖片占位的技巧,并從需求中抽象出的 split 分隔組件和 ratingselect 評(píng)論組件,實(shí)現(xiàn)自定義過濾器 datefilter。 第9章 項(xiàng)目實(shí)戰(zhàn)-ratings評(píng)價(jià)列表頁實(shí)現(xiàn) 編寫 ratings 評(píng)價(jià)列表頁,感受在 Vue.js 中復(fù)用組件的好處,實(shí)現(xiàn)快速開發(fā)。 第10章 項(xiàng)目實(shí)戰(zhàn)-seller 商家詳情頁實(shí)現(xiàn) 編寫 seller 商家詳情頁,實(shí)現(xiàn)一套通用移動(dòng)端數(shù)據(jù)存取方案,以及對(duì)項(xiàng)目做一些體驗(yàn)上的優(yōu)化。 第11章 項(xiàng)目實(shí)戰(zhàn)-項(xiàng)目編譯打包 上線前的最后一步,編譯打包Vue.js 項(xiàng)目。介紹了 webpack 編譯時(shí)的配置,如何利用node.js 開啟一個(gè)server本地調(diào)試。 第12章 課程總結(jié) 對(duì)課程做總結(jié),并列出了課程所提到的主要知識(shí)點(diǎn)的鏈接,作為課程的延伸學(xué)習(xí)。
購買主題
已有 13 人購買
本主題需向作者支付 10 資源幣 才能瀏覽
| |
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
小黑屋|資源共享吧 ( 瓊ICP備2023000410號(hào)-1 )
GMT+8, 2025-3-12 11:17 , Processed in 0.074639 second(s), 17 queries , MemCached On.