班級(jí)規(guī)模及環(huán)境--熱線:4008699035 手機(jī):15921673576( 微信同號(hào)) |
每個(gè)班級(jí)的人數(shù)限3到5人,互動(dòng)授課, 保障效果,小班授課。 |
上間和地點(diǎn) |
上部份地點(diǎn):【上海】同濟(jì)大學(xué)(滬西)/新城金郡商務(wù)樓(11號(hào)線白銀路站)【深圳分部】:電影大廈(地鐵一號(hào)線大劇院站)/深圳大學(xué)成教院【北京分部】:北京中山學(xué)院/福鑫大樓【南京分部】:金港大廈(和燕路)【武漢分部】:佳源大廈(高新二路)【成都分部】:領(lǐng)館區(qū)1號(hào)(中和大道)【沈陽分部】:沈陽理工大學(xué)/六宅臻品【鄭州分部】:鄭州大學(xué)/錦華大廈【石家莊分部】:河北科技大學(xué)/瑞景大廈 最近開間(周末班/連續(xù)班/晚班):2019年1月26日 |
實(shí)驗(yàn)設(shè)備 |
◆小班教學(xué),教學(xué)效果好 ☆注重質(zhì)量☆邊講邊練 ☆合格學(xué)員免費(fèi)推薦工作 ★實(shí)驗(yàn)設(shè)備請(qǐng)點(diǎn)擊這兒查看★ |
質(zhì)量保障 |
1、培訓(xùn)過程中,如有部分內(nèi)容理解不透或消化不好,可免費(fèi)在以后培訓(xùn)班中重聽; 2、培訓(xùn)結(jié)束后,授課老師留給學(xué)員聯(lián)系方式,保障培訓(xùn)效果,免費(fèi)提供課后技術(shù)支持。 3、培訓(xùn)合格學(xué)員可享受免費(fèi)推薦就業(yè)機(jī)會(huì)。☆合格學(xué)員免費(fèi)頒發(fā)相關(guān)工程師等資格證書,提升職業(yè)資質(zhì)。專注高端技術(shù)培訓(xùn)15年,端海學(xué)員的能力得到大家的認(rèn)同,受到用人單位的廣泛贊譽(yù),端海的證書受到廣泛認(rèn)可。 |
部份程大綱 |
|
- 第1章 課程導(dǎo)學(xué)
包括課程概述、核心模塊、核心技術(shù)、課程安排、課程收獲、講授方式、學(xué)習(xí)前提等方面的介紹,最后演示了整個(gè)外賣App的功能,讓同學(xué)們對(duì)課程項(xiàng)目有一個(gè)直觀的了解。
- 1-1 導(dǎo)學(xué)
第2章 項(xiàng)目準(zhǔn)備工作
包括項(xiàng)目需求分析、Vue-cli 3.0 腳手架介紹、cube-ui 介紹、目錄模塊分析、api 接口 mock 等。
- 2-1 Vue-cli 3.0 介紹
2-2 目錄介紹 & cube-ui 安裝
2-3 api 接口 mock
第3章 頭部組件開發(fā)
包括 Header組件編寫,axios 封裝和數(shù)據(jù)交互、star 組件抽象封裝和 HeaderDetail 組件的編寫和交互。
- 3-1 目錄結(jié)構(gòu) & header 組件
3-2 axios 封裝 & 數(shù)據(jù)獲取
3-3 header-detail & star 組件
3-4 header-detail 交互
第4章 Tab 組件開發(fā)
包括 Tab 組件的基礎(chǔ)實(shí)現(xiàn)、上下聯(lián)動(dòng)實(shí)現(xiàn)、組件更高維度的抽象和封裝。
- 4-1 tab 組件基礎(chǔ)實(shí)現(xiàn)
4-2 tab 組件上下聯(lián)動(dòng)
4-3 tab 組件抽象和封裝
第5章 商品頁面開發(fā)
包括 ScrollNav 組件的應(yīng)用、ShopCart 組件的開發(fā)、CartControl 組件開發(fā)、小球飛入動(dòng)畫實(shí)現(xiàn)、側(cè)邊欄內(nèi)容定制化、購物車列表組件實(shí)現(xiàn)和完善、sticky 組件實(shí)現(xiàn)、彈層類組件優(yōu)化。
- 5-1 scroll-nav 組件應(yīng)用
5-2 shop-cart 組件
5-3 cart-control 組件
5-4 小球飛入動(dòng)畫實(shí)現(xiàn)
5-5 側(cè)邊欄內(nèi)容定制化
5-6 購物車列表組件
5-7 購物車 sticky 組件
5-8 購物車列表功能完善
5-9 彈層類組件優(yōu)化
第6章 商品詳情頁開發(fā)
包括詳情頁骨架開發(fā)、詳情頁購物能力開發(fā)、詳情頁評(píng)價(jià)列表開發(fā)、評(píng)價(jià)選擇組件開發(fā)。
- 6-1 商品詳情頁骨架開發(fā)
6-2 商品詳情頁購物開發(fā)
6-3 商品詳情頁評(píng)價(jià)列表開發(fā)
6-4 商品詳情頁評(píng)價(jià)選擇組件開發(fā)
第7章 評(píng)價(jià)和商家頁面開發(fā)
包括評(píng)價(jià)頁面骨架開發(fā)、評(píng)價(jià)選擇組件 Mixin 抽取、商家頁面靜態(tài)頁面開發(fā)、商家頁面本地緩存封裝和實(shí)現(xiàn)。
- 7-1 評(píng)價(jià)頁面骨架開發(fā)和數(shù)據(jù)獲取
7-2 評(píng)價(jià)頁面評(píng)價(jià)選擇組件 mixin 抽取
7-3 商家頁面靜態(tài)頁面開發(fā)
7-4 商家頁面本地緩存封裝實(shí)現(xiàn)
第8章 create-api 原理分析
包括create-api 原理介紹和源碼分析。
- 8-1 create-api 原理介紹
8-2 create-api 源碼分析(1)
8-3 create-api 源碼分析(2)
8-4 create-api 源碼分析(3)
8-5 create-api 源碼分析(4)
第9章 打包構(gòu)建和項(xiàng)目部署
包括打包構(gòu)建和性能優(yōu)化、搭建小型 node 服務(wù)代理接口、部署到云服務(wù)器和 nginx 多項(xiàng)目部署方案。
- 9-1 打包構(gòu)建&性能優(yōu)化
9-2 搭建小型 node 服務(wù)代理接口
9-3 部署到云服務(wù)器
9-4 nginx 配置多項(xiàng)目部署方案
第10章 課程總結(jié)
總結(jié)課程的學(xué)習(xí)方法和以及學(xué)習(xí)收獲,制定進(jìn)階的學(xué)習(xí)目標(biāo)。
- 10-1 課程總結(jié)
第11章 課程簡介
介紹課程的學(xué)習(xí)目標(biāo)和學(xué)習(xí)內(nèi)容。
- 11-1 課程簡介
11-2 課程安排
第12章 Vuejs介紹
從前端開發(fā)趨勢分析開始,引入 MVVM 開發(fā)框架和 Vue.js,接著對(duì)比流行框架Angular 和 React,最后詳細(xì)介紹 Vue.js 的核心思想-數(shù)據(jù)驅(qū)動(dòng)和組件化。
- 12-1 Vuejs介紹-近年來前端開發(fā)趨勢
12-2 Vuejs介紹-MVVM框架
12-3 Vuejs介紹-什么是Vuejs及Vuejs生態(tài)
12-4 Vuejs介紹-對(duì)比Angular、React
12-5 Vuejs介紹-Vuejs核心思想
第13章 Vue-cli 開啟 Vuejs 項(xiàng)目
介紹 Vue 項(xiàng)目的腳手架,如何安裝,對(duì)腳手架生成的目錄文件做介紹,介紹 Vue 組件的編寫方法,最后運(yùn)行 demo 項(xiàng)目并介紹 webpack 構(gòu)建腳本來說明 demo 的運(yùn)行原理。
- 13-1 Vue-cli介紹
13-2 Vue-cli安裝
13-3 項(xiàng)目運(yùn)行
13-4 項(xiàng)目文件介紹
13-5 webpack打包(上)
13-6 webpack打包(中)
13-7 webpack打包(下)
第14章 項(xiàng)目實(shí)戰(zhàn)-準(zhǔn)備工作
分析外賣 APP 商家頁面的需求,準(zhǔn)備圖片資源,利用 icon-moon 把 svg 制作成圖標(biāo)字體,對(duì)代碼的目錄結(jié)構(gòu)設(shè)計(jì),最后 mock 測試數(shù)據(jù)。
- 14-1 需求分析
14-2 項(xiàng)目資源準(zhǔn)備
14-3 圖標(biāo)字體制作
14-4 項(xiàng)目目錄設(shè)計(jì)
14-5 mock數(shù)據(jù)(模擬后臺(tái)數(shù)據(jù))
第15章 項(xiàng)目實(shí)戰(zhàn)-頁面骨架開發(fā)
設(shè)計(jì)頁面的骨架,拆分組件,商品、評(píng)論和商家詳情頁利用 Vue-router 做切換,最后還介紹了 flex 彈性布局以及移動(dòng)端 1 像素 border 實(shí)現(xiàn)的小技巧。
- 15-1 組件拆分(上)
15-2 組件拆分(中)
15-3 組件拆分(下)
15-4 Vue-router(上)
15-5 Vue-router(下)
15-6 1像素border實(shí)現(xiàn)
第16章 項(xiàng)目實(shí)戰(zhàn)-header組件開發(fā)
編寫 header 頭部組件,應(yīng)用 Vue-resource 從服務(wù)端讀取數(shù)據(jù),介紹如何在 Vue.js 中使用過渡動(dòng)畫,如何編寫 css sticky footer 布局,如何從需求中抽象出 star 星星組件。
- 16-1 Vue-resource應(yīng)用(上)
16-2 Vue-resource應(yīng)用(下)
16-3 外部組件(1)
16-4 外部組件(2)
16-5 外部組件(3)
16-6 外部組件(4)
16-7 外部組件(5)
16-8 外部組件(6)
16-9 詳情彈層頁(1)- 實(shí)現(xiàn)彈出層
16-10 詳情彈層頁(2)- CSS Sticky footer
16-11 詳情彈層頁(3)- star組件抽象(上)
16-12 詳情彈層頁(3)- star組件抽象(下)
16-13 詳情彈層頁(4)- star組件使用
16-14 詳情彈層頁(5)- 小標(biāo)題自適應(yīng)經(jīng)典flex布局實(shí)現(xiàn)
16-15 詳情彈層頁(6)- header剩余組件實(shí)現(xiàn)(上)
16-16 詳情彈層頁(6)- header剩余組件實(shí)現(xiàn)(下)
第17章 項(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中父子組件如何通訊。...
- 17-1 布局編寫
17-2 左側(cè)menu布局
17-3 右側(cè)食品列表布局(1)
17-4 右側(cè)食品列表布局(2)
17-5 右側(cè)食品列表布局(3)
17-6 better-scroll運(yùn)用(1)
17-7 better-scroll運(yùn)用(2)
17-8 better-scroll運(yùn)用(3)
17-9 shopcart購物車組件(1)
17-10 shopcart購物車組件(2)
17-11 shopcart購物車組件(3)
17-12 shopcart購物車組件(4)
17-13 shopcart購物車組件(5)
17-14 shopcart購物車組件(6)
17-15 cartcontrol組件(1)
17-16 cartcontrol組件(2)
17-17 cartcontrol組件(3)
17-18 購物車小球動(dòng)畫實(shí)現(xiàn)(1)
17-19 購物車小球動(dòng)畫實(shí)現(xiàn)(2)
17-20 購物車小球動(dòng)畫實(shí)現(xiàn)(3)
17-21 購物車詳情頁實(shí)現(xiàn)(1)
17-22 購物車詳情頁實(shí)現(xiàn)(2)
17-23 購物車詳情頁實(shí)現(xiàn)(3)
17-24 購物車詳情頁實(shí)現(xiàn)(4)
第18章 項(xiàng)目實(shí)戰(zhàn)-food 商品詳情頁實(shí)現(xiàn)
編寫 food 商品詳情頁組件,介紹了圖片占位的技巧,并從需求中抽象出的 split 分隔組件和 ratingselect 評(píng)論組件,實(shí)現(xiàn)自定義過濾器 datefilter。
- 18-1 商品詳情頁實(shí)現(xiàn)(1)
18-2 商品詳情頁實(shí)現(xiàn)(2)
18-3 商品詳情頁實(shí)現(xiàn)(3)
18-4 商品詳情頁實(shí)現(xiàn)(4)
18-5 商品詳情頁實(shí)現(xiàn)(5)
18-6 split組件實(shí)現(xiàn)
18-7 ratingselect組件(1)
18-8 ratingselect組件(2)
18-9 ratingselect組件(3)
18-10 ratingselect組件(4)
18-11 ratingselect組件(5)
18-12 評(píng)價(jià)列表(1)
18-13 評(píng)價(jià)列表(2)
18-14 評(píng)價(jià)列表(3)
18-15 評(píng)價(jià)列表(4)
18-16 評(píng)價(jià)列表(5)
18-17 評(píng)價(jià)列表(6)
第19章 項(xiàng)目實(shí)戰(zhàn)-ratings評(píng)價(jià)列表頁實(shí)現(xiàn)
編寫 ratings 評(píng)價(jià)列表頁,感受在 Vue.js 中復(fù)用組件的好處,實(shí)現(xiàn)快速開發(fā)。
- 19-1 ratings組件開發(fā)-overview開發(fā)(1)
19-2 ratings組件開發(fā)-overview開發(fā)(2)
19-3 ratings組件開發(fā)-overview開發(fā)(3)
19-4 ratings組件開發(fā)-評(píng)價(jià)列表(1)
19-5 ratings組件開發(fā)-評(píng)價(jià)列表(2)
19-6 ratings組件開發(fā)-評(píng)價(jià)列表(3)
第20章 項(xiàng)目實(shí)戰(zhàn)-seller 商家詳情頁實(shí)現(xiàn)
編寫 seller 商家詳情頁,實(shí)現(xiàn)一套通用移動(dòng)端數(shù)據(jù)存取方案,以及對(duì)項(xiàng)目做一些體驗(yàn)上的優(yōu)化。
- 20-1 seller組件開發(fā)-overview開發(fā)(1)
20-2 seller組件開發(fā)-overview開發(fā)(2)
20-3 seller組件開發(fā)-公告與活動(dòng)開發(fā)(1)
20-4 seller組件開發(fā)-公告與活動(dòng)開發(fā)(2)
20-5 seller組件開發(fā)-BScroll應(yīng)用
20-6 seller組件開發(fā)-商家實(shí)景圖
20-7 seller組件開發(fā)-商家信息
20-8 seller組件開發(fā)-收藏商家(1)
20-9 seller組件開發(fā)-收藏商家(2)
20-10 seller組件開發(fā)-收藏商家
20-11 seller組件開發(fā)-體驗(yàn)優(yōu)化
第21章 項(xiàng)目實(shí)戰(zhàn)-項(xiàng)目編譯打包
上線前的最后一步,編譯打包Vue.js 項(xiàng)目。介紹了 webpack 編譯時(shí)的配置,如何利用node.js 開啟一個(gè)server本地調(diào)試。
- 21-1 webpack配置介紹
21-2 nodejs調(diào)試
|