Vue核心技術 Vue+Vue-Router+Vuex+SSR
第1章 課程介紹
課程介紹,介紹課程的章節安排和學習本門課程的一些注意點。
1-1 課程導學
1-2 專案介紹
1-3 Webpack4升級注意
第2章 Vue+Webpack的前端工程工作流搭建
詳細講解webpack的配置以及vue-loader,css-module等較為高階的內容如何進行配置。
2-1 專案目錄升級-一個正式專案的目錄結構
2-2 vue-loader配置
2-3 css module配置
2-4 安裝使用eslint和editorconfig以及precommit
2-5 Webpack4升級
第3章 Vue核心知識
從Vue的例項、生命週期、原生指令、資料繫結、特殊API和元件開發等角度詳細分析Vue的方方面面。並且深入講解Vue的元件開發,包括一些高階屬性slot、自定義雙向繫結、render function等。
3-1 一點小準備-單獨講解vue核心內容的配置
3-2 Vue例項
3-3 Vue的生命週期方法
3-4 Vue的資料繫結
3-5 computed和watch使用場景和方法
3-6 Vue的原生指令
3-7 Vue的元件之元件的定義
3-8 Vue的元件之元件的繼承.mp4
3-9 Vue的元件之自定義雙向繫結
3-10 Vue的元件之高階屬性
3-11 Vue的元件之render function
第4章 Vue-Router和Vuex
首先把Vue-Router和Vuex整合到專案開發當中。然後分別講解Vue-Router和Vuex的詳細使用方法和API,包括Router的配置,導航守衛,Vuex的配置,分模組等。並實現了Vuex Store的熱更替功能。
4-1 Vue-router之整合
4-2 Vue-router之配置
4-3 Vue-router之路由引數傳遞
4-4 Vue-router之導航守衛
4-5 Vuex之整合
4-6 Vuex之state和getters
4-7 Vuex之mutation和action
4-8 Vuex之模組
4-9 Vuex之其他一些API和配置
第5章 伺服器渲染
在專案當中加入Node Server,同時整合服務端渲染。解決服務端渲染需要考慮的基礎問題,包括開發時如何跟webpack-dev-server配合,title資訊的處理,正式環境的服務端渲染使用等。
5-1 開發時服務端渲染的配置和原理
5-2 使用koa實現node server
5-3 服務端渲染的entry配置
5-4 開發時服務端渲染靜態資源路徑處理
5-5 使用vue-meta處理元資訊
5-6 生產環境服務端渲染
第6章 高階元件開發
通過兩個高階元件:Notification和Tabs,講解一些只有在高階元件開發當中才會用到的開發技巧。比如通過extend繼承元件,通過一個js方法呼叫元件的顯示,以及巢狀元件父元件顯示子元件中的內容等。
6-1 notification之基本元件實現
6-2 notification之通過方法呼叫
6-3 notification之優化
6-4 tabs元件之基本元件實現
6-5 tabs元件之選中狀態和切換
6-6 tabs元件之在父元件中渲染子元件的slot
第7章 專案開發
首先開發服務端的API介面,然後進行前後端的介面聯調,登入頁面的實現,以及最後調整服務端渲染的程式碼,讓服務端渲染的時候用到的資料可以在客戶端重用。
7-1 服務端api請求基礎實現
7-2 資料API實現
7-3 後端登入介面實現以及session的使用.mp4
7-4 登入頁面實現
7-5 聯調第一個API
7-6 請求錯誤處理和登入介面聯調
7-7 所有介面進行聯調
7-8 在資料請求的時候使用全域性loading
7-9 在服務端渲染時獲取資料
7-10 前後端資料複用以及服務端使用者認證
7-11 服務端渲染進行redirect操作
7-12 createRenderer的方式進行服務端渲染
7-13 正式環境打包以及非同步模組打包優化
第8章 部署和總結
通過PM2在伺服器上部署專案應用,並自動化把靜態資源部署到七牛CDN上面。同時使用nginx配置讓應用可以通過域名訪問。最後總結課程內容。
8-1 pm2使用以及伺服器端部署
8-2 靜態資源上傳cdn
8-3 總結