手把手擼碼前端，實戰大公司級後臺管理系統開發，正規實踐瞭解項目開發整體流程
由0到1搭建後臺管理系統，採用 Vue3.0 - Composition API 體驗版開發，優先體驗3.0 API 語法；
以真實接口進行業務數據聯調；並瞭解由產品的原型到UI設計、測試用例、業務邏輯開發、程序流程圖、BUG修復、打包、部署、上線等；
基本都是乾貨，以下是完成錄製的視頻，都放在B站，還有小部分待更新；
第1節 - 瞭解項目開發流程
- 第1學時 瞭解產品從0到1的開發流程，產品經理、UI設計師、研發部、測試工程師
第2節 - 構建vue項目、代碼倉庫管理
- 第2學時 安裝node.js、vue3.0腳手架、創建github代碼管理倉庫、構建vue項目
- 第3學時 2.0與3.0的差異，vue.config.js、引入全局樣式、router重定向、elementui依賴，git命令提交文件
- 第4學時 vue文件標準結構、v-for遍歷、key、v-bind屬性、@click事件、綁定class、基礎數據類型、引用數據類型區別
第3節 - 登錄功能、註冊功能開發
- 第5學時 熟悉element-ui組件、製作表單驗證、瞭解組件的用法
- 第6學時 封裝校驗js文件、webpack目錄配置指向、export暴露方法、import引用、指令v-show、v-if的區別
- 第7學時 2.0語法轉3.0、setup函數、reactive函數、ref函數、isRef、toRefs方法
- 第8學時 axios攔截器，模塊管理API，export、export default的區別
- 第9學時 axios跨域配置、環境變量、接口文檔
- 第10學時 登錄接口接調試、響應攔截、elementui message、root參數
- 第10-1學時 登錄接口接調試、響應攔截、elementui message、root參數
- 第11學時 按測試用例流程開發項目、註冊接口聯調、倒計時setTimeout、setInterval、超時timeout
- 第11-1學時
- 第11-2學時 登錄接口調試、定時器知識點
- 第12學時 瞭解基礎的Promise的方法、resolve、reject、all、race、then、catch
- 第13學時 請求頭攔截、Request Headers添加參數、登錄密碼sha1加密、前端臺加密流程、代碼優化封裝方法
第4節 - 瞭解學習內容
- 第14學時 簡單瞭解vue學習目標，具體學習什麼東西，瞭解基礎的指令
第5節 後臺管理框架搭建
- 第15學時 後臺首頁搭建、router路由跳轉、children屬性、components組件、局部組件引入
- 第16學時 elementui的el-menu組件生成路由菜單、定義全局elemenui樣式表、修改組個樣式
- 第17學時 svgIcon製作、全局組件Vue.component、父子組件傳值props、propsData、計算屬性computed
- 第17-1學時 完善後臺首頁佈局
第6節 Vuex狀態管理倉庫、token登錄檢驗
- 第18學時 Vuex、State、Getters、Mutations、菜單導航收起、展開
- 第18-1學時 cookie存儲，sessionStorage存儲、localStorage存儲、JSON.parse、JSON.stringify
- 第18-2學時 Vuex的action異步、同步、modules模塊管理狀態數據
- 第19學時 router.beforeEach路由守衛，檢測toKen是否非法進入後臺，to、from參數、next方法、Vuex命名空間
- 第19-1學時 登錄存儲token、token存在基礎邏輯進入後臺
- 第19-2學時 退出後臺清除token、防止非法進入、GIT代碼合併、提交當天開發的代碼
第7節 信息管理UI製作
- 第20學時 設計稿UI製作、element-ui組件、el-select、el-row、el-col、el-button
- 第20-1學時 設計稿UI製作、element-ui組件、el-table、el-pagination
- 第20-2學時 設計稿UI製作、element-ui組件、el-dialog、父子組件回調emit、修飾器sync、vue2.0、3.0寫法、watch
- 第20-3學時 設計稿UI製作、element-ui組件、el-messageBox、自定義全局方法export install、VUE3.0組件重命名、watch
- 第20-4學時 設計稿UI製作、信息分類UI製作
第8節 信息管理功能開發、接口聯調
- 第21學時 信息管理模塊，一級分類接口、獲取分類接口、onMounted、相關優化
- 第21-1學時 信息管理模塊，刪除接口、修改接口
- 第21-2學時 接口封裝，vue3.0封裝方式，vuex的actions方式，為後期維護方便
- 第21-3學時 添加信息接口、獲取列表接口、分頁處理請求數據、獲取分類優化，變量優化
- 第21-4學時 單記錄、批量刪除接口、table組件數據加載優化、formatter屬性返回值、日期組件配置數據格式、篩選條件處理
- 第21-5學時 信息編輯接口、添加子級分類接口、請求全部分類接口
第9節 項目原型學習、git命令
- 第21-6學時 原型學習、原型版本查看、GIT命令控制代碼版本迭代、合併代碼、創建新分支
第10節 信息管理詳情頁開發、接口聯調
- 第22學時 router路由跳轉、5種傳參方式、vuex配合HTML5本地儲存
- 第22-1學時 詳細頁數據讀取、初始化數據、富文本編輯器、vue devTool依賴
- 第22-2學時 elementui upload組件結合七牛雲第三方儲存，七牛雲建立空間、域名綁定、解析
- 第22-3學時 elementUI組件二次封裝開發，組件封裝的一些問題思考，什麼時候需要watch，傳參動態配置數據
第11節 用戶管理功能開發
- 第23學時 用戶管理功能迭代、git分支創建、日常工作中的日報、週報總結、項目的管理
- 第23-1學時 用戶管理UI製作、elementUI el-select組件封裝、參數配置、組件命名衝突
第12節 組件化開發模式
- 第23-2學時 真正理解vue組件化開發、組件概念、優勢、全局組件component、局部組件import、從源頭解決BUG
- 第23-3學時 vue生命週期，組件生命週期，3.0改寫2.0組件
- 第23-4學時 vue3.0生命週期，封裝el-table組件
- 第23-5學時 封裝el-table組件，v-slot插槽3種方式，數據綁定
- 第23-6學時 封裝el-table組件，數據請求，整合url請求地址，統一api文件夾管理
- 第23-7學時 封裝el-table組件，業務邏輯的拆分、組合
- 第23-8學時 elementUI 頁碼組件、業務邏輯拆分頁碼，配置項
- 第23-9學時 vue2.0 mixins混入、按需混入、全局混入
第13節 用戶管理功能
- 第24學時 省、市、區、街道組件封裝、業務邏輯抽離
- 第24-1學時 省、市、區、街道組件封裝、業務邏輯抽離
- 第24-2學時 省市區數據返回，el-radio、el-checkbox、獲取角色管理API
- 第24-3學時 用戶添加接口、json對象深拷貝、淺拷貝用法及注意事項
- 第24-4學時 組件通訊開始篇.sync、elemntUI Switch組件、用戶列表、刪除接口聯調
- 第24-5學時 組件通訊完整版（重點知識）
- 第24-6學時 用戶狀態接口、編輯接口、搜索接口聯調（上）
- 第24-7學時 用戶狀態接口、編輯接口、搜索接口聯調（下）
第14節 動態路由開發
- 第25學時 動態路由開發，以系統分配路由，系統列表接口
- 第25-1學時 動態路由開發，以角色分配路由
- 第25-2學時 按鈕級權限
↓↓↓
分享到:
閱讀更多 手把手擼碼前端 的文章
