
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模式發布的探討
