課程大綱：

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

使用 Vue.js 來實現(xiàn)樓的部分頁面克隆。

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

然后再從基礎(chǔ)靜態(tài)頁開始，分析布局整理樣式到終完整實現(xiàn)。

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

2 axios 庫配置使用

3 Vue-router 路由管理

4 前后端跨域解決方案

5 Vue-CLI 初始化項目

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

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

8 webpack 打包發(fā)布

1
環(huán)境搭建

1.Vuecli簡介

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

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

4.跨域簡述

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

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

2
使用 Chrome 分析樓 API

1.Chrome前端分析工具簡介

2.Chrome前端分析工具使用

3.Element模塊介紹

4.Console模塊介紹及使用

5.Source模塊介紹及使用

6.Network模塊介紹及使用

7.Performance模塊介紹及使用

8.Application模塊介紹及使用

1
使用 Chrome 抓取首頁 API

1.使用Chrome分析

2.Network模塊查看分析

3.SSR渲染下的API獲取

3
配置項目路由

1.VueRouter使用

2.HASH和HISTORY模式

3.鉤子使用

4.組件懶加載

4
編寫樓首頁（上）

1.使用axios進行前后端通信

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

3.了解flex布局

5
編寫樓首頁（中）

1.使用axios進行前后端通信

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

3.使用Vue過渡組件

6
編寫樓首頁（下）

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

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

3.了解原生CSS的過渡

4.Vue子父組件傳值

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

1.絕對定位

2.溢出隱藏

3.Vue過渡組件

7
編寫課程挑選頁

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

2.Vuex初探

3.滾動導(dǎo)航

8
編寫課程詳情頁（上）

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

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

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

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

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

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

3
編寫課程問答頁面

1.組件使用

2.父子組件傳值

3.keepalive組件熟悉使用

9
編寫課程詳情頁（下）

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

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

3.zindex了解使用

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

1.獲取登錄用的API

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

3.完善首頁登錄后的頁面與功能

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

5.創(chuàng)建Github賬號(如果沒有的話)

6.利用webpack進行打包

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

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

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