Vue.js 3 前端開發實戰 (微課版)

紹興職業技術學院計算機應用專業的骨幹教師，主講《Vue.js前端開發》、《微信應用開發》、《WebVR開發》等核心課程。

項目1 初識Vue.js 1 學習目標 1 項目準備 1 任務1.1 認識Vue 1 1.1.1 Vue概述 1 1.1.2 Vue的發展歷程 3 1.1.3 MVVM設計模式 4 任務1.2 準備開發與調試環境 5 1.2.1 Visual Studio Code的特點 及其安裝 5 1.2.2 Vue DevTools工具的 安裝 9 項目實施 11 任務1.3 第 一個Vue應用 11 1.3.1 使用全局構建版本創建Vue 應用 12 1.3.2 使用ESM構建版本創建Vue 應用 14 拓展閱讀——Vue生態與科技自信 16 項目小結 16 技能訓練 16 項目2 Vue語法基礎——開發Web 前端學習詳情頁 18 學習目標 18 項目準備 18 任務2.1 插值綁定 18 2.1.1 文本插值 19 2.1.2 HTML插值 21 任務2.2 內置指令 21 2.2.1 常見內置指令簡介 22 2.2.2 屬性綁定指令 23 2.2.3 事件綁定指令 29 2.2.4 雙向數據綁定指令 37 2.2.5 條件渲染指令 40 2.2.6 列表循環渲染指令 45 項目實施 52 任務2.3 Web前端學習詳情頁的設計 與開發 52 2.3.1 項目需求分析 52 2.3.2 項目開發實現 53 拓展閱讀——網絡空間的倫理與自由 59 項目小結 59 技能訓練 60 項目3 計算屬性與偵聽器——開發 簡易版Markdown學習 筆記編輯器 63 學習目標 63 項目準備 63 任務3.1 計算屬性 63 3.1.1 計算屬性的基本用法 64 3.1.2 可寫計算屬性 67 任務3.2 偵聽器 69 3.2.1 偵聽器的基本用法 69 3.2.2 偵聽器的復雜應用 72 項目實施 73 任務3.3 開發簡易版Markdown學習筆記編輯器 73 3.3.1 項目需求分析 74 3.3.2 初始化項目 74 3.3.3 編輯與預覽筆記 75 3.3.4 保存筆記 77 3.3.5 加載筆記列表 78 3.3.6 重置表單內容與刪除 筆記 80 3.3.7 搜索筆記功能 81 拓展閱讀——開源易讀易寫語言 Markdown：合作與 共享 81 項目小結 83 技能訓練 83 項目4 組件化開發——封裝Tabs 選項卡組件 85 學習目標 85 項目準備 86 任務4.1 組件註冊 86 4.1.1 全局註冊 86 4.1.2 局部註冊 87 任務4.2 組件間的數據傳遞 89 4.2.1 props的基本用法 89 4.2.2 props數據驗證 91 任務4.3 組件的自定義事件 94 任務4.4 使用插槽分發內容 96 4.4.1 默認插槽 96 4.4.2 具名插槽 97 4.4.3 作用域插槽 99 任務4.5 組件的生命周期 100 4.5.1 生命周期階段劃分 101 4.5.2 基於生命周期階段的案例 實踐 102 任務4.6 動態組件 104 4.6.1 動態組件的基本用法 104 4.6.2 組件緩存 106 任務4.7 組合式API的應用 107 4.7.1 組合式API概述 107 4.7.2 setup函數() 109 4.7.3 響應式API 111 4.7.4 provide()/inject()響應式 傳值 114 項目實施 116 任務4.8 封裝Tabs選項卡組件 116 4.8.1 項目需求分析 116 4.8.2 項目開發實現 117 拓展閱讀——模塊化開發：團隊合作與責任 擔當 122 項目小結 123 技能訓練 123 項目5 單頁應用項目構建與部署開發 —— 開發天氣預報單頁 應用 127 學習目標 127 項目準備 128 任務5.1 項目構建與調試 128 5.1.1 搭建環境 128 5.1.2 創建Vue前端項目 130 任務5.2 項目結構簡介 134 任務5.3 項目打包與部署發布 139 5.3.1 項目構建與預覽 139 5.3.2 管理環境變量 140 5.3.3 Nginx的安裝與部署 143 任務5.4 Axios實現前後端數據 交互 147 5.4.1 接口文檔 147 5.4.2 Axios的基本用法 149 5.4.3 Axios的進階用法 155 項目實施 160 任務5.5 開發天氣預報單頁應用 160 5.5.1 項目需求分析 160 5.5.2 項目開發實現 160 拓展閱讀——Vue CLI與Create-Vue： 技術疊代和創新 167 項目小結 168 技能訓練 168 項目6 綜合項目開發實戰——開發網站 後臺管理系統 170 學習目標 170 項目準備 171 任務6.1 Vue Router路由的使用 171 6.1.1 路由概述 171 6.1.2 路由的基本用法 171 6.1.3 動態路由 175 6.1.4 嵌套路由 177 任務6.2 Pinia狀態管理 178 6.2.1 Pinia簡介 178 6.2.2 Pinia的基本用法 179 項目實施 183 任務6.3 開發網站後臺管理系統 183 6.3.1 初始化項目 183 6.3.2 管理員登錄模塊 187 6.3.3 後臺框架主頁 204 6.3.4 管理員列表模塊 210 6.3.5 新增管理員 217 6.3.6 編輯管理員 225 拓展閱讀——數據安全與隱私保護 228 項目小結 229 技能訓練 230