課程大綱：

Vue.js 和 Django 仿簡易版樓網站培訓

使用 Vue.js 來實現樓的部分頁面克隆。

首先，我們將接觸調試代碼，使用 Chrome 分析網絡逆向分析出樓 API，繞過跨域限制。

然后再從基礎靜態頁開始，分析布局整理樣式到終完整實現。

1 Chrome 調試工具的使用

2 axios 庫配置使用

3 Vue-router 路由管理

4 前后端跨域解決方案

5 Vue-CLI 初始化項目

6 Vuex 全局狀態管理

7 Vue 通用組件設計

8 webpack 打包發布

1
環境搭建

1.Vuecli簡介

2.Vuecli創建基礎項目

3.使用Django搭建API轉發

4.跨域簡述

5.Vue開發環境跨域配置

6.項目結構

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的了解和應用

3.了解flex布局

5
編寫樓首頁（中）

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

2.使用VueJS一些內置的語法糖

3.使用Vue過渡組件

6
編寫樓首頁（下）

1.針對內容進行合理抽象

2.封裝復用組件

3.了解原生CSS的過渡

4.Vue子父組件傳值

2
優化樓首頁--近期好課的展示

1.絕對定位

2.溢出隱藏

3.Vue過渡組件

7
編寫課程挑選頁

1.路由過渡/監控/參數設置修改

2.Vuex初探

3.滾動導航

8
編寫課程詳情頁（上）

1.分析整體結構

2.編寫子導航

3.編寫課程基礎介紹

4.內容&課程詳細介紹

5.內容使用Markdown編譯

6.未登錄狀態下評論等內容的處理

3
編寫課程問答頁面

1.組件使用

2.父子組件傳值

3.keepalive組件熟悉使用

9
編寫課程詳情頁（下）

1.分析右部分結構

2.區分下拉和普通狀態下的右邊顯示

3.zindex了解使用

10
處理登錄與打包發布

1.獲取登錄用的API

2.初步了解Cookies，Session，區分通過轉發的登錄與直接登錄

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

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

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

6.利用webpack進行打包

7.基于開發環境與生產環境配置一些內容

8.利用Github中進行發布

9.基于GithubPage做history模式發布的探討