課程大綱：

Vue.js 和 Django 仿簡(jiǎn)易版樓網(wǎng)站培訓(xùn)

使用 Vue.js 來(lái)實(shí)現(xiàn)樓的部分頁(yè)面克隆。

首先，我們將接觸調(diào)試代碼，使用 Chrome 分析網(wǎng)絡(luò)逆向分析出樓 API，繞過(guò)跨域限制。

然后再?gòu)幕A(chǔ)靜態(tài)頁(yè)開(kāi)始，分析布局整理樣式到終完整實(shí)現(xiàn)。

1 Chrome 調(diào)試工具的使用

2 axios 庫(kù)配置使用

3 Vue-router 路由管理

4 前后端跨域解決方案

5 Vue-CLI 初始化項(xiàng)目

6 Vuex 全局狀態(tài)管理

7 Vue 通用組件設(shè)計(jì)

8 webpack 打包發(fā)布

1
環(huán)境搭建

1.Vuecli簡(jiǎn)介

2.Vuecli創(chuàng)建基礎(chǔ)項(xiàng)目

3.使用Django搭建API轉(zhuǎn)發(fā)

4.跨域簡(jiǎn)述

5.Vue開(kāi)發(fā)環(huán)境跨域配置

6.項(xiàng)目結(jié)構(gòu)

2
使用 Chrome 分析樓 API

1.Chrome前端分析工具簡(jiǎn)介

2.Chrome前端分析工具使用

3.Element模塊介紹

4.Console模塊介紹及使用

5.Source模塊介紹及使用

6.Network模塊介紹及使用

7.Performance模塊介紹及使用

8.Application模塊介紹及使用

1
使用 Chrome 抓取首頁(yè) API

1.使用Chrome分析

2.Network模塊查看分析

3.SSR渲染下的API獲取

3
配置項(xiàng)目路由

1.VueRouter使用

2.HASH和HISTORY模式

3.鉤子使用

4.組件懶加載

4
編寫(xiě)樓首頁(yè)（上）

1.使用axios進(jìn)行前后端通信

2.基本Vue、CSS的了解和應(yīng)用

3.了解flex布局

5
編寫(xiě)樓首頁(yè)（中）

1.使用axios進(jìn)行前后端通信

2.使用VueJS一些內(nèi)置的語(yǔ)法糖

3.使用Vue過(guò)渡組件

6
編寫(xiě)樓首頁(yè)（下）

1.針對(duì)內(nèi)容進(jìn)行合理抽象

2.封裝復(fù)用組件

3.了解原生CSS的過(guò)渡

4.Vue子父組件傳值

2
優(yōu)化樓首頁(yè)--近期好課的展示

1.絕對(duì)定位

2.溢出隱藏

3.Vue過(guò)渡組件

7
編寫(xiě)課程挑選頁(yè)

1.路由過(guò)渡/監(jiān)控/參數(shù)設(shè)置修改

2.Vuex初探

3.滾動(dòng)導(dǎo)航

8
編寫(xiě)課程詳情頁(yè)（上）

1.分析整體結(jié)構(gòu)

2.編寫(xiě)子導(dǎo)航

3.編寫(xiě)課程基礎(chǔ)介紹

4.內(nèi)容&課程詳細(xì)介紹

5.內(nèi)容使用Markdown編譯

6.未登錄狀態(tài)下評(píng)論等內(nèi)容的處理

3
編寫(xiě)課程問(wèn)答頁(yè)面

1.組件使用

2.父子組件傳值

3.keepalive組件熟悉使用

9
編寫(xiě)課程詳情頁(yè)（下）

1.分析右部分結(jié)構(gòu)

2.區(qū)分下拉和普通狀態(tài)下的右邊顯示

3.zindex了解使用

10
處理登錄與打包發(fā)布

1.獲取登錄用的API

2.初步了解Cookies，Session，區(qū)分通過(guò)轉(zhuǎn)發(fā)的登錄與直接登錄

3.完善首頁(yè)登錄后的頁(yè)面與功能

4.完善課程詳情頁(yè)登錄后的頁(yè)面與功能

5.創(chuàng)建Github賬號(hào)(如果沒(méi)有的話)

6.利用webpack進(jìn)行打包

7.基于開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境配置一些內(nèi)容

8.利用Github中進(jìn)行發(fā)布

9.基于GithubPage做history模式發(fā)布的探討