Vue 3基礎入門 教案-36學時 王寧

Vue3基礎入門教案（全冊）總學時：36學時（18次課×2學時）第1次課教案授課課題第1次課Web前端發展與Vue3簡介授課

形式理論教學學時

2教學目的與要求1.了解Web前端發展歷史與技術演進過程。

2.理解Vue3框架的概念、特點及優勢。

3.掌握IDE的選擇與Node.js環境配置方法。

4.掌握Vue3的多種安裝方式（獨立版本、CDN、npm、腳手架）。

5.理解前端框架演進的技術背景與意義。

思政目標：通過講解Web前端技術從跟隨到自主創新的發展歷程，以及Vue.js由華人開發者尤雨溪創建并走向世界的故事，培養學生的民族自豪感與創新精神，樹立科技自信。教學重點和難點重點：Vue3的概念與優勢

Node.js環境配置

Vue3的安裝方式

難點：前端框架演進的技術范式理解

npm與腳手架安裝方式教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

通過展示不同時代的網頁截圖對比（90年代靜態網頁vs現代動態Web應用），讓學生直觀感受前端技術的發展變化，引發學生對前端技術演進的思考，導入新課。

思政內容：前端技術發展初期，主流框架多由歐美公司主導。而Vue.js作為全球最受歡迎的前端框架之一，由華人開發者尤雨溪創建，體現了中國開發者在全球開源社區的重要影響力，激發學生的學習熱情與民族自信心。

二、學習新知（80分鐘）

1.Web前端發展歷史（20分鐘）

Web前端誕生與發展：從蒂姆·伯納斯-李創建首個Web系統，到Mosaic、Netscape瀏覽器的出現。

動態網頁技術：PHP、JSP、ASP等服務端渲染技術的原理與特點。

前端框架演進與技術范式迭代：從jQuery到MVVM框架的技術變革。

2.Vue3框架簡介（15分鐘）

什么是Vue3：漸進式JavaScript框架的定義與核心理念。

Vue3的優勢：響應式系統、組件化、虛擬DOM、CompositionAPI等特性。

3.開發環境準備（25分鐘）

選擇IDE：VSCode的安裝與常用插件推薦。

配置Node.js環境：Node.js的安裝、版本管理與npm基礎使用。

4.Vue3安裝方式（20分鐘）

獨立版本安裝：直接下載JS文件引入項目。

CDN方式安裝：通過CDN鏈接快速引入Vue3。

npm方式安裝：使用包管理器安裝Vue3。

使用前端腳手架安裝：Vite與VueCLI的簡介與使用。

三、課堂小結，布置作業（10分鐘）

總結Web前端發展脈絡與Vue3環境搭建流程，布置課后作業。留幾分鐘讓學生互相討論環境搭建中遇到的問題，及時答疑。作業實驗1：Vue3開發環境搭建與第一個Vue應用板書設計第1章Web前端發展與Vue3簡介

1Web前端發展歷史

2Vue3框架簡介

3開發環境準備

4Vue3安裝方式課后反思

第2次課教案授課課題第2次課HelloWorld與Vue3基礎特性授課

形式理論教學學時

2教學目的與要求1.掌握Vue3實例的創建方法與HelloWorld應用編寫。

2.理解Vue3生命周期的概念與各個階段的含義。

3.掌握常用生命周期鉤子函數的使用場景。

4.掌握數據綁定的三種方式：文本插值、原始HTML、JavaScript表達式。

5.能夠運用數據綁定實現簡單的登錄頁面與字符過濾功能。

思政目標：通過講解Vue3生命周期的設計哲學，引導學生理解"萬物皆有規律"的辯證思維，培養嚴謹的編程習慣與邏輯思維能力。教學重點和難點重點：Vue3實例創建

數據綁定的三種方式

生命周期鉤子函數

難點：生命周期各階段的執行時機

JavaScript表達式在模板中的使用教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

回顧上節課環境搭建內容，提問學生：環境搭好了，如何寫出第一個Vue程序？通過展示一個簡單的Vue響應式示例（輸入文字實時顯示），讓學生感受Vue的數據綁定魅力，激發學習興趣。

思政內容：編程如同做人，有始有終。Vue組件從創建到銷毀的完整生命周期，恰似事物發展的客觀規律，引導學生在編程中培養尊重規律、循序漸進的科學態度。

二、學習新知（80分鐘）

1.Vue3實例與HelloWorld（15分鐘）

createApp函數創建Vue應用實例。

mount方法掛載到DOM元素。

第一個HelloWorld應用的完整代碼演示。

2.Vue3生命周期（25分鐘）

認識生命周期：創建、掛載、更新、銷毀四個階段。

生命周期鉤子函數：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。

各鉤子函數的執行時機與典型使用場景。

生命周期流程圖講解。

3.數據綁定（25分鐘）

文本插值：{{}}雙大括號語法的使用。

插入原始HTML：v-html指令的使用與安全注意事項。

使用JavaScript表達式：在插值中使用簡單表達式。

4.案例實戰（15分鐘）

案例1：利用表單實現簡單登錄頁面。

案例2：利用過濾器過濾指定字符。

邊講解邊演示代碼實現過程。

三、課堂小結，布置作業（10分鐘）

總結Vue實例創建、生命周期與數據綁定的核心知識點，強調mounted鉤子的高頻使用場景。布置課后實驗，鼓勵學生課后動手實踐。作業實驗2：Vue3數據綁定與生命周期練習板書設計第2章HelloWorld與Vue3基礎特性

1Vue3實例創建

2生命周期與鉤子函數

3數據綁定（插值、HTML、表達式）

4案例實戰課后反思

第3次課教案授課課題第3次課Vue3基本指令（上）授課

形式理論教學學時

2教學目的與要求1.掌握條件渲染指令v-if、v-else-if、v-else、v-show的用法與區別。

2.掌握列表渲染指令v-for的基本用法與數組更新檢測。

3.掌握數據綁定指令v-bind的用法，包括屬性綁定與動態綁定。

4.理解v-show與v-if的性能差異與選擇策略。

5.能夠運用指令實現常見的頁面渲染邏輯。

思政目標：通過講解不同指令的適用場景選擇，培養學生"具體問題具體分析"的辯證思維，避免生搬硬套，提升工程決策能力。教學重點和難點重點：條件渲染指令v-if與v-show

列表渲染指令v-for

數據綁定指令v-bind

難點：v-if與v-show的選擇策略

v-for的key屬性作用

v-bind動態綁定教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

通過提問："上節課我們學習了數據綁定，那如果想根據條件顯示或隱藏元素，或者渲染一個列表該怎么辦？"引出Vue指令的概念。展示一個電商商品列表頁面，分析其中用到的條件顯示與列表渲染，導入新課。

思政內容：編程中沒有"萬能解法"，不同指令各有優劣。正如生活中解決問題要因地制宜，培養學生根據實際場景選擇最優方案的工程思維與判斷能力。

二、學習新知（80分鐘）

1.條件渲染指令（25分鐘）

v-if、v-else-if、v-else的基本語法與鏈式使用。

v-show指令的用法與特點。

v-show與v-if的區別：編譯vs切換、初始渲染開銷vs切換開銷。

選擇策略：頻繁切換用v-show，條件很少改變用v-if。

2.列表渲染指令v-for（30分鐘）

基本用法：遍歷數組、遍歷對象、遍歷數字。

v-for與key屬性的重要性與作用原理。

數組更新檢測：Vue3的響應式數組方法。

v-for的其他操作：過濾、排序顯示。

3.數據綁定指令v-bind（25分鐘）

參數與屬性綁定：綁定HTML屬性（class、style、href、src等）。

動態綁定：綁定動態屬性名。

v-bind的縮寫語法（:）。

綁定對象與數組的合并行為。

三、課堂小結，布置作業（10分鐘）

總結三大核心指令的語法與使用場景，重點強調key屬性的必要性與v-if/v-show的選擇。布置課后練習，讓學生動手實現商品列表渲染功能。作業實驗3：條件渲染與列表渲染指令練習板書設計第3章Vue3基本指令（上）

1條件渲染：v-if/v-show

2列表渲染：v-for+key

3屬性綁定：v-bind（:）課后反思

第4次課教案授課課題第4次課Vue3基本指令（下）授課

形式理論教學學時

2教學目的與要求1.掌握v-model雙向數據綁定與表單處理。

2.掌握方法、計算屬性與監聽屬性的用法及三者區別。

3.掌握事件處理v-on指令與各種修飾符。

4.了解v-once、v-cloak等其他基本指令。

5.掌握自定義指令的注冊與使用方法。

6.能夠綜合運用指令完成注冊登錄頁面開發。

思政目標：通過講解計算屬性與方法的區別，引導學生理解"效率優先"的工程理念，培養學生追求代碼質量與性能優化的工匠精神。教學重點和難點重點：v-model雙向綁定與表單處理

計算屬性與監聽屬性

事件處理與修飾符

難點：計算屬性vs方法vs偵聽器的選擇

自定義指令的鉤子函數

事件修飾符的組合使用教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

回顧上節課的渲染指令，提問："數據只能從Vue流向頁面，那用戶輸入如何同步回數據呢？"引出雙向數據綁定概念。展示一個完整的表單頁面，演示輸入實時同步的效果，激發學生學習興趣。

思政內容：優秀的代碼不僅要能運行，更要高效優雅。計算屬性的緩存設計體現了程序員對性能的極致追求，引導學生樹立質量意識，培養精益求精的編程態度。

二、學習新知（80分鐘）

1.v-model與表單（20分鐘）

基本用法：input、textarea、select的雙向綁定。

值綁定：單選框、復選框、選擇器的值綁定。

修飾符：.lazy、.number、.trim的作用。

2.方法、計算屬性與監聽屬性（25分鐘）

Vue3中的方法：methods選項定義函數。

計算屬性computed：定義與緩存特性。

監聽屬性watch：偵聽數據變化執行副作用。

三者區別與適用場景對比總結。

3.事件處理（20分鐘）

監聽事件v-on及其縮寫@。

事件處理函數與內聯處理函數。

事件修飾符：.stop、.prevent、.capture、.self、.once、.passive。

按鍵修飾符與系統修飾鍵。

4.其他指令與自定義指令（15分鐘）

v-once：一次性插值。

v-cloak：解決頁面閃爍問題。

自定義指令：全局/局部注冊、鉤子函數、動態參數。

案例：自定義指令實現隨機背景色。

三、課堂小結，布置作業（10分鐘）

總結v-model、計算屬性、事件處理三大核心知識點，對比方法/計算/偵聽的選用場景。布置綜合作業：實現注冊登錄頁面，綜合運用所學指令。作業實驗4：表單與事件指令綜合練習（注冊登錄頁面）板書設計第3章Vue3基本指令（下）

1雙向綁定：v-model

2方法/計算屬性/偵聽器

3事件處理：v-on（@）+修飾符

4自定義指令課后反思

第5次課教案授課課題第5次課樣式綁定授課

形式理論教學學時

2教學目的與要求1.掌握綁定HTMLClass的對象語法與數組語法。

2.掌握綁定內聯樣式的對象語法與數組語法。

3.理解樣式綁定在組件中的應用方式。

4.了解自動添加前綴與多重值樣式的特性。

5.能夠運用樣式綁定實現列表奇偶行不同樣式等效果。

思政目標：通過講解樣式綁定的多種實現方式，引導學生理解"條條大路通羅馬"的道理，培養靈活解決問題的思維能力與創新意識。教學重點和難點重點：Class綁定的對象語法與數組語法

內聯樣式綁定的對象語法與數組語法

難點：樣式綁定在組件中的透傳

對象語法與數組語法的混合使用教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

展示一個動態切換主題的網頁效果（白天/黑夜模式切換），提問學生："這種樣式動態變化是如何實現的？"引出樣式綁定的重要性，導入新課。

思政內容：實現同一個效果可以有多種方案，編程如此，人生亦然。培養學生多角度思考問題的習慣，不鉆牛角尖，靈活變通地解決問題。

二、學習新知（80分鐘）

1.綁定HTMLClass（30分鐘）

對象控制樣式：{className:isActive}語法詳解。

數組控制樣式：[classA,classB]語法詳解。

對象與數組的混合使用技巧。

在組件中的應用：class屬性的透傳機制。

2.綁定內聯樣式（30分鐘）

對象描述樣式：{color:activeColor,fontSize:fontSize}。

數組描述樣式：多個樣式對象合并。

自動添加前綴：Vue對瀏覽器前綴的自動處理。

多重值樣式：數組形式提供多個候選值。

3.綜合案例（20分鐘）

實例：實現列表的奇偶行不同樣式。

擴展：實現鼠標懸停高亮、選中狀態切換等交互效果。

性能優化提示：避免在模板中使用復雜計算。

三、課堂小結，布置作業（10分鐘）

總結Class綁定與Style綁定的四種語法（對象/數組各兩種），強調使用場景與選擇建議。布置課后實驗，讓學生實現一個帶動態樣式的商品列表。作業實驗5：樣式綁定綜合練習（動態商品列表）板書設計第4章樣式綁定

1綁定HTMLClass（對象/數組）

2綁定內聯樣式（對象/數組）

3組件中的樣式透傳

4綜合案例課后反思

第6次課教案授課課題第6次課組件應用（上）授課

形式理論教學學時

2教學目的與要求1.理解組件化開發的概念與意義。

2.掌握組件的基本注冊與使用方法。

3.理解組件復用的優勢與注意事項。

4.掌握通過props向子組件傳遞數據的方法。

5.掌握通過$emit事件向父組件傳遞數據的方法。

6.了解跨層級組件傳遞數據的方式。

思政目標：通過講解組件化"高內聚、低耦合"的設計思想，引導學生理解團隊協作與分工的重要性，培養模塊化思維與協作精神。教學重點和難點重點：組件的注冊與基本使用

props父傳子數據傳遞

$emit子傳父事件通信

難點：組件數據隔離與復用

跨層級組件通信

單向數據流原則教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

展示一個復雜的電商頁面，將頁面拆解為頭部、導航、輪播圖、商品列表、底部等多個模塊。提問："如果每個模塊都能獨立開發、復用，效率會不會更高？"引出組件化開發概念。

思政內容：組件化思想的核心是"分工協作"——每個組件專注做好一件事，組合起來就是強大的系統。這正如社會分工與團隊協作，培養學生的團隊意識與協作能力。

二、學習新知（80分鐘）

1.組件基礎概念（20分鐘）

什么是組件：可復用的Vue實例。

基本使用方法：全局注冊與局部注冊。

組件復用：同一組件多次使用，數據相互隔離。

組件組織結構：父子組件、兄弟組件關系。

組件中的鉤子函數。

2.組件間數據傳遞（40分鐘）

單向數據流原則講解。

通過props向子組件傳遞數據：props聲明、傳遞方式、類型校驗。

props的命名規范與大小寫問題。

通過監聽事件向父組件傳遞數據：$emit觸發事件、父組件監聽。

事件名的命名規范。

跨層級組件傳遞數據：provide/inject簡介。

3.組件通信案例（20分鐘）

案例：實現一個可復用的計數器組件。

演示父子組件數據雙向流動的完整流程。

常見錯誤與調試技巧。

三、課堂小結，布置作業（10分鐘）

總結組件化核心思想與父子通信兩種方式（props下傳、事件上傳），強調單向數據流原則。布置課后作業，讓學生封裝一個可復用的按鈕組件。作業實驗6：組件基礎與父子通信練習板書設計第5章組件應用（上）

1組件基礎：注冊與復用

2父傳子：props屬性

3子傳父：$emit事件

4單向數據流原則課后反思

第7次課教案授課課題第7次課組件應用（下）授課

形式理論教學學時

2教學目的與要求1.掌握插槽的各種用法：默認插槽、具名插槽、作用域插槽。

2.理解編譯作用域與后備內容的概念。

3.掌握動態組件與異步組件的使用方法。

4.能夠運用組件知識實現日歷組件、彈出層組件等復雜組件。

5.深入理解組件化開發的設計思想。

思政目標：通過插槽的"預留擴展位"設計思想，引導學生理解"留有余地、開放包容"的設計哲學，培養開放性思維與可擴展設計意識。教學重點和難點重點：插槽的三種類型（默認、具名、作用域）

動態組件的使用

難點：作用域插槽的數據傳遞

異步組件的加載原理

編譯作用域的理解教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

展示一個通用卡片組件，可以放入圖片、文字、按鈕等不同內容。提問："組件的內容如何靈活定制？"引出插槽的概念。對比固定內容組件與插槽組件的靈活性差異，導入新課。

思政內容：好的設計不是把一切都定死，而是預留擴展空間。插槽的設計思想體現了"開放包容"的智慧，引導學生在設計與生活中學會留有余地、兼容并包。

二、學習新知（80分鐘）

1.插槽（35分鐘）

基本插槽：默認插槽的定義與使用。

編譯作用域：父級模板內容在父級作用域編譯。

后備內容：插槽的默認內容。

具名插槽：v-slot指令與縮寫#，多插槽布局。

作用域插槽：子組件數據傳遞給插槽內容。

動態插槽名：運行時決定插槽名。

2.其他組件應用（25分鐘）

動態組件：component標簽與is屬性的使用。

keep-alive：組件狀態保持與緩存。

異步組件：defineAsyncComponent延遲加載。

異步組件的加載狀態與錯誤處理。

3.綜合案例（20分鐘）

案例1：實現日歷組件（插槽定制日期內容）。

案例2：利用組件實現"彈出層"（Modal組件封裝）。

組件設計思路與最佳實踐總結。

三、課堂小結，布置作業（10分鐘）

總結插槽體系與動態/異步組件，梳理組件化知識體系。布置綜合作業：封裝一個帶插槽的通用卡片組件。作業實驗7：插槽與動態組件綜合練習板書設計第5章組件應用（下）

1插槽：默認/具名/作用域

2動態組件+keep-alive

3異步組件

4綜合案例課后反思

第8次課教案授課課題第8次課邏輯復用授課

形式理論教學學時

2教學目的與要求1.掌握組合式函數（Composables）的概念與編寫方法。

2.掌握插件的定義、注冊與使用方法。

3.了解混入（mixin）的概念及其局限性。

4.理解渲染函數與虛擬DOM的原理。

5.了解JSX語法與函數式組件。

6.能夠運用組合式函數封裝可復用邏輯。

思政目標：通過講解從Mixin到CompositionAPI的演進，引導學生理解技術迭代與創新的重要性，培養持續學習、擁抱變化的進取精神。教學重點和難點重點：組合式函數的封裝與使用

插件的開發與注冊

難點：渲染函數與虛擬DOM原理

JSX語法的理解

組合式函數的設計模式教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

提問："多個組件有相同的邏輯（比如鼠標位置追蹤、表單驗證），如何復用？"引出邏輯復用的話題。對比代碼復制粘貼、mixin、組合式函數三種方案的演進，導入新課。

思政內容：技術在不斷迭代進步，從Mixin到CompositionAPI是Vue團隊不斷探索優化的結果。引導學生認識到學習是終身的，要保持好奇心與進取精神，擁抱技術變革。

二、學習新知（80分鐘）

1.組合式函數（25分鐘）

什么是組合式函數：封裝狀態邏輯的函數。

使用ref封裝響應式狀態。

組合式函數的命名規范（use開頭）。

案例：useMouse、useCounter等常用組合式函數。

組合式函數vsMixin的優勢對比。

2.插件開發（20分鐘）

插件的概念：為Vue添加全局功能。

定義插件：install函數的編寫。

注冊插件：app.use()方法。

使用插件：全局屬性、全局方法、全局指令等。

3.混入（10分鐘）

混入的概念與基本用法。

混入的局限性：命名沖突、來源不清晰。

為什么推薦使用組合式函數替代混入。

4.渲染函數與JSX（25分鐘）

DOM基礎回顧。

虛擬DOM與渲染函數的原理。

h函數的使用：創建虛擬節點。

JSX語法簡介：在Vue中使用JSX。

函數式組件：無狀態無實例的輕量組件。

三、課堂小結，布置作業（10分鐘）

總結邏輯復用的四種方式，重點掌握組合式函數與插件。布置作業：封裝一個表單驗證的組合式函數。作業實驗8：組合式函數與插件開發練習板書設計第6章邏輯復用

1組合式函數（Composables）

2插件開發

3混入Mixin（了解）

4渲染函數與JSX課后反思

第9次課教案授課課題第9次課Vue3路由（上）授課

形式理論教學學時

2教學目的與要求1.理解前端路由的概念與VueRouter的作用。

2.掌握VueRouter的安裝與基本配置。

3.掌握動態路由的定義與路由參數的獲取。

4.掌握router-link與router-view的使用。

5.理解SPA單頁應用與傳統多頁應用的區別。

思政目標：通過講解路由"導航"的概念，引申到人生規劃與方向選擇，引導學生樹立明確的學習目標與人生方向，做好職業規劃。教學重點和難點重點：VueRouter基本配置

動態路由與參數傳遞

router-link導航

難點：動態路由匹配模式

路由參數的響應式更新

SPA工作原理理解教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

展示一個多頁面的SPA應用（如后臺管理系統），點擊菜單切換頁面但瀏覽器不刷新。提問："這是怎么實現的？"引出前端路由概念，對比傳統多頁應用與單頁應用的區別，導入新課。

思政內容：路由決定了頁面跳轉的方向，人生規劃決定了成長的方向。引導學生思考自己的職業發展路徑，做好大學學習規劃，樹立明確的目標意識。

二、學習新知（80分鐘）

1.前端路由基礎（20分鐘）

什么是前端路由：URL與視圖的映射關系。

SPA單頁應用的工作原理。

路由模式：hash模式與history模式的區別。

VueRouter簡介與安裝。

2.基本路由配置（25分鐘）

創建路由實例：createRouter、createWebHistory。

routes配置項：path、component、name。

router-link組件：導航鏈接與激活樣式。

router-view組件：路由出口。

在Vue應用中注冊路由。

3.動態路由（25分鐘）

動態路徑參數：定義帶參數的路由（:id）。

獲取路由參數：$route.params與useRoute組合式API。

響應路由參數變化：watch監聽或beforeRouteUpdate。

高級匹配模式：正則匹配、可選參數、重復參數。

4.路由匹配優先級（10分鐘）

同一路徑匹配多個路由時的優先級規則。

路由定義順序的影響。

通配符路由與404頁面配置。

三、課堂小結，布置作業（10分鐘）

總結路由基礎配置與動態路由，強調SPA開發中路由的核心地位。布置課后實驗：搭建一個帶首頁、列表頁、詳情頁的基礎路由系統。作業實驗9：VueRouter基礎配置與動態路由練習板書設計第7章Vue3路由（上）

1前端路由與SPA原理

2基本配置：router-link/router-view

3動態路由：參數傳遞

4匹配優先級課后反思

第10次課教案授課課題第10次課Vue3路由（下）授課

形式理論教學學時

2教學目的與要求1.掌握嵌套路由的配置與應用場景。

2.掌握導航守衛的原理與使用方法。

3.掌握路由元信息的配置與應用。

4.掌握路由懶加載與性能優化。

5.掌握編程式導航的各種方法。

6.能夠運用路由知識實現權限控制等高級功能。

思政目標：通過講解導航守衛的"關卡檢查"機制，引導學生理解規則意識與流程管控的重要性，培養嚴謹的工作作風。教學重點和難點重點：嵌套路由配置

導航守衛的使用

路由懶加載

難點：導航守衛的執行流程

路由元信息與權限控制

編程式導航參數傳遞教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

展示一個后臺管理系統的布局：左側菜單固定，右側內容區切換不同子頁面。提問："這種布局下的路由如何設計？"引出嵌套路由概念，導入進階路由的學習。

思政內容：導航守衛就像進入重要場所的安檢關卡，確保訪問者符合要求。引導學生理解規則與流程的重要性，在學習和工作中培養嚴謹規范的意識。

二、學習新知（80分鐘）

1.嵌套路由（20分鐘）

什么是嵌套路由：子路由的概念。

children配置項：定義子路由。

嵌套router-view：子路由的出口。

默認子路由配置。

案例：后臺管理系統布局實現。

2.導航守衛（25分鐘）

全局前置守衛：router.beforeEach。

全局解析守衛與全局后置鉤子。

路由獨享守衛：beforeEnter。

組件內守衛：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

完整的導航解析流程。

3.路由元信息與懶加載（20分鐘）

meta路由元信息：配置標題、權限標識等。

結合導航守衛實現登錄權限控制。

路由懶加載：動態import()語法。

懶加載的性能優勢與分組策略。

4.編程式導航（15分鐘）

router.push：跳轉新頁面。

router.replace：替換當前記錄。

router.go/back/forward：歷史記錄導航。

編程式導航的參數傳遞方式。

三、課堂小結，布置作業（10分鐘）

總結嵌套路由、導航守衛、懶加載三大進階特性。布置綜合作業：實現帶登錄權限驗證的后臺路由系統。作業實驗10：嵌套路由與導航守衛綜合練習板書設計第7章Vue3路由（下）

1嵌套路由：children

2導航守衛：全局/獨享/組件內

3路由元信息meta+權限控制

4路由懶加載+編程式導航課后反思

第11次課教案授課課題第11次課axios異步請求授課

形式理論教學學時

2教學目的與要求1.了解axios的概念、特點與應用場景。

2.掌握axios的安裝與基本使用方法。

3.掌握AxiosAPI的常用請求方法（get、post、put、delete）。

4.掌握請求配置與響應結構。

5.掌握攔截器的原理與使用方法。

6.能夠封裝通用的網絡請求模塊。

思政目標：通過講解HTTP請求與響應的"請求-應答"模式，引導學生理解溝通的重要性，培養良好的人際交往與團隊溝通能力。教學重點和難點重點：axios基本使用（get/post請求）

請求配置與響應處理

攔截器的使用

難點：攔截器的執行順序

統一錯誤處理

請求封裝與適配教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

提問："前端頁面的數據從哪里來？"引出前后端交互的概念。展示一個動態加載數據的列表頁面，演示數據從服務器獲取并渲染的過程，導入axios的學習。

思政內容：前端與后端通過HTTP協議溝通，就像人與人之間通過語言交流。請求要清晰、響應要及時，培養學生在團隊協作中注重溝通效率與表達準確性。

二、學習新知（80分鐘）

1.axios基礎（20分鐘）

axios簡介：基于Promise的HTTP客戶端。

特點：支持瀏覽器/Node.js、攔截器、自動轉換JSON等。

安裝axios：npm安裝與CDN引入。

基本使用方法：get請求與post請求示例。

2.AxiosAPI詳解（25分鐘）

axios(config)通用請求方式。

快捷方法：axios.get、axios.post、axios.put、axios.delete。

請求配置項：url、method、params、data、headers、timeout等。

響應結構：data、status、statusText、headers、config。

錯誤處理：catch捕獲與錯誤類型。

3.適配網絡請求（15分鐘）

并發請求：axios.all與axios.spread。

取消請求：AbortController的使用。

默認配置：全局默認值與自定義實例。

4.攔截器介紹（20分鐘）

請求攔截器：請求發送前統一處理（加token、加loading）。

響應攔截器：響應返回后統一處理（數據剝離、錯誤統一處理）。

攔截器的執行順序。

實戰：封裝通用request模塊。

三、課堂小結，布置作業（10分鐘）

總結axios核心用法與攔截器封裝，強調前后端聯調的注意事項。布置作業：封裝一個帶攔截器的通用請求模塊并實現數據列表加載。作業實驗11：axios請求封裝與數據獲取練習板書設計第8章axios異步請求

1axios基礎：get/post

2請求配置與響應結構

3攔截器：請求/響應

4請求封裝實戰課后反思

第12次課教案授課課題第12次課VueCLI與項目構建授課

形式理論教學學時

2教學目的與要求1.了解VueCLI的概念與作用。

2.掌握VueCLI的安裝與項目創建方法。

3.理解VueCLI項目的目錄結構與各文件作用。

4.了解webpack的基本概念與配置方式。

5.掌握Vue項目的開發與構建命令。

6.能夠配置常用的項目優化選項。

思政目標：通過講解工程化工具的發展，引導學生理解"工欲善其事，必先利其器"的道理，培養重視工具、提升效率的工程素養。教學重點和難點重點：VueCLI項目創建與目錄結構

項目構建命令

vue.config.js常用配置

難點：webpack配置理解

項目優化配置

環境變量配置教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

對比手寫HTML引入Vuevs使用腳手架創建項目的開發體驗差異。提問："企業開發中是如何搭建Vue項目的？"引出工程化開發概念，導入VueCLI的學習。

思政內容：古代工匠講究"磨刀不誤砍柴工"，現代開發同樣需要好的工具。VueCLI等工程化工具大大提升了開發效率，培養學生重視工具、善用工具的工程思維。

二、學習新知（80分鐘）

1.VueCLI簡介與項目創建（25分鐘）

什么是VueCLI：Vue官方腳手架工具。

安裝VueCLI：全局安裝@vue/cli。

創建項目：vuecreate命令與圖形化界面vueui。

預設配置選擇：Babel、Router、Vuex、CSS預處理器、Linter等。

2.項目結構詳解（20分鐘）

目錄結構：src、public、node_modules、配置文件。

src目錄詳解：assets、components、views、router、store、App.vue、main.js。

單文件組件（.vue文件）的結構與優勢。

3.webpack概述（20分鐘）

了解webpack：模塊打包工具的作用。

核心概念：入口entry、輸出output、loader、插件plugin。

vue.config.js配置文件：常用配置項介紹。

路徑別名配置、代理配置、打包路徑配置。

4.項目命令與環境變量（15分鐘）

開發命令：npmrunserve啟動開發服務器。

構建命令：npmrunbuild生產環境打包。

環境變量：.env文件、開發/生產環境區分。

構建產物dist目錄分析。

三、課堂小結，布置作業（10分鐘）

總結VueCLI項目從創建到構建的完整流程，強調工程化開發的重要性。布置作業：使用VueCLI創建一個完整的項目骨架并配置別名與代理。作業實驗12：VueCLI項目創建與配置練習板書設計第9章VueCLI部署項目

1VueCLI：創建項目/預設選擇

2項目目錄結構詳解

3webpack與vue.config.js

4開發/構建命令與環境變量課后反思

第13次課教案授課課題第13次課Vuex狀態管理（上）授課

形式理論教學學時

2教學目的與要求1.理解Vuex的概念、作用與應用場景。

2.掌握Vuex的安裝與基本配置。

3.掌握State與Getters的使用方法（讀取狀態）。

4.掌握Mutations與Actions的使用方法（修改狀態）。

5.理解Vuex單向數據流的設計思想。

6.能夠在組件中正確使用Vuex狀態。

思政目標：通過講解Vuex"集中式狀態管理"的思想，引導學生理解統一管理、規范流程的重要性，培養規則意識與系統化思維。教學重點和難點重點：State狀態讀取

Getters派生狀態

Mutations同步修改

Actions異步操作

難點：Mutations與Actions的區別

單向數據流理解

輔助函數的使用教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

提問："多個組件共享同一個狀態（比如用戶登錄信息、購物車數量），如何高效管理？"引出狀態管理的痛點。展示組件層層傳遞props的繁瑣，對比Vuex集中管理的優勢，導入新課。

思政內容：Vuex用統一的store管理全局狀態，遵循嚴格的修改流程，就像社會需要規則與秩序。引導學生理解規則的重要性，培養遵紀守法、按流程辦事的意識。

二、學習新知（80分鐘）

1.Vuex介紹與安裝（15分鐘）

Vuex是什么：Vue的狀態管理模式+庫。

應用場景：多組件共享狀態、中大型單頁應用。

Vuex特點：單一狀態樹、單向數據流、可預測的狀態變更。

安裝Vuex：npm安裝與store配置。

2.State狀態（20分鐘）

單一狀態樹：所有狀態集中在一個store對象。

組件中獲取狀態：this.$store.state直接訪問。

mapState輔助函數：簡化多個狀態映射。

對象展開運算符與計算屬性結合。

3.Getters派生狀態（15分鐘）

什么是Getters：store的計算屬性。

定義Getters：基于state派生出新狀態。

訪問Getters：$store.getters直接訪問。

mapGetters輔助函數。

4.Mutations同步修改（15分鐘）

Mutations的概念：更改Vuex狀態的唯一方式。

定義Mutation：type與handler。

提交Mutation：commit方法。

提交payload載荷與對象風格提交。

5.Actions異步操作（15分鐘）

Actions的概念：提交mutation，可以包含異步操作。

定義Action：context上下文對象。

分發Action：dispatch方法。

Actions與Mutations的區別總結。

三、課堂小結，布置作業（10分鐘）

總結Vuex四大核心概念與單向數據流（dispatch→action→commit→mutation→state→view）。布置作業：使用Vuex實現一個簡單的計數器狀態管理。作業實驗13：Vuex核心概念基礎練習板書設計第10章Vuex狀態管理（上）

1State：狀態讀取+mapState

2Getters：派生狀態+mapGetters

3Mutations：同步修改（commit）

4Actions：異步操作（dispatch）課后反思

第14次課教案授課課題第14次課Vuex狀態管理（下）授課

形式理論教學學時

2教學目的與要求1.掌握Vuex模塊化管理的方法。

2.理解模塊命名空間的作用與使用。

3.掌握模塊動態注冊與模塊重用。

4.能夠在項目中合理拆分Vuex模塊。

5.能夠結合axios在Actions中完成異步數據請求。

6.掌握Vuex在實際項目中的最佳實踐。

思政目標：通過講解模塊化"分而治之"的思想，引導學生理解復雜問題拆解的重要性，培養系統化分析與解決問題的能力。教學重點和難點重點：Vuex模塊化管理

命名空間的使用

Actions異步請求實戰

難點：模塊命名空間與訪問路徑

模塊動態注冊

大型項目狀態管理架構教學方法與手段1.講解法，演示法

2.利用多媒體計算機輔助教學教學內容及

過程設計一、引入新課（10分鐘）

提問："當項目越來越大，store里的狀態越來越多，全部放在一起會怎樣？"引出模塊化的必要性。展示一個復雜項目的store目錄結構，導入Vuex模塊化的學習。

思政內容：面對復雜問題，"分而治之"是有效的策略。Vuex模塊化將大問題拆分為小模塊，培養學生拆解復雜問題、化整為零的思維能力。

二、學習新知（80分鐘）

1.Vuex模塊化基礎（20分鐘）

為什么需要模塊化：單一store臃腫、維護困難。

模塊的定義：state、getters、mutations、actions封裝在模塊中。

模塊局部狀態：模塊內部state是局部的。

根狀態訪問：rootState、rootGetters。

2.命名空間（25分鐘）

命名空間的作用：避免命名沖突、提高封裝性。

namespaced:true開啟命名空間。

帶命名空間的訪問方式：模塊名/類型。

mapState/mapGetters/mapMutations/mapActions帶命名空間的用法。

在命名空間模塊中分發全局action或提交全局mutation。

3.模塊高級特性（15分鐘）

模塊動態注冊：registerModule動態添加模塊。

模塊重用：同一模塊創建多個實例。

模塊的嵌套：模塊中再定義子模塊。

4.Vuex實戰（20分鐘）

案例：用戶模塊user與購物車模塊cart的拆分。

在Actions中結合axios發起異步請求。

登錄狀態管理完整流程：請求→存儲→使用。

Vuex項目最佳實踐：目錄結構、命名規范、持久化。

三、課堂小結，布置作業（10分鐘）

總結Vuex模塊化與命名空間，梳理完整的Vuex知識體系。布置綜合作業：拆分用戶模塊和商品模塊，實現登錄狀態與購物車狀態管理。作業實驗14：Vuex模塊化與異步請求綜合練習板書設計第10章Vuex狀態管理（下）

1模塊化：module拆分

2命名空間：namespaced

3動態注冊與模塊重用

4實戰：異步請求+模塊化架構課后反思

第15次課教案授課課題第15次課紅色旅游App綜合項目（一）授課

形式項目實戰學時

2教學目的與要求1.了解紅色旅游App項目的整體規劃與功能模塊。

2.掌握使用VueCLI搭建項目腳手架的完整流程。

3.掌握項目中第三方依賴的安裝與配置（axios、ElementPlus、VueRouter、Vuex）。

4.能夠搭建項目基礎架構與全局樣式。

5.培養項目整體規劃與架構設計能力。

思政目標：通過紅色旅游項目主題，引導學生了解紅色文化、傳承紅色基因，培養愛國主義情懷與文化自信。教學重點和難點重點：項目整體規劃

腳手架搭建與依賴安裝

項目基礎架構配置

難點：多依賴集成配置

項目目錄結構設計

全局樣式與重置樣式教學方法與手段1.項目驅動教學法

2.邊講邊練，實操演示

3.利用多媒體計算機輔助教學教學內容及

過程設計一、項目引入與規劃（15分鐘）

介紹紅色旅游App項目背景：傳承紅色文化、展示革命景點、推廣紅色旅游。展示項目最終效果演示，讓學生對項目有整體認知。

思政內容：紅色旅游是傳承紅色基因、弘揚革命精神的重要載體。通過開發紅色旅游App，將技術學習與紅色文化教育結合，培養學生的愛國主義情懷與文化自信。

二、項目總體規劃（15分鐘）

1.功能模塊劃分

首頁：輪播廣告、推薦景點、快捷入口

產品列表頁：景點列表展示、篩選排序

搜索頁面：關鍵詞搜索景點

產品詳情頁：景點詳情、圖片展示、用戶評價

購物車頁面：門票選購、數量調整、結算

個人中心：用戶信息、訂單、收藏

2.技術棧選型

前端框架：Vue3+VueCLI

路由：VueRouter

狀態管理：Vuex

UI組件庫：ElementPlus

網絡請求：axios

3.項目目錄結構設計

三、腳手架搭建與依賴安裝（40分鐘）

1.創建VueCLI項目（10分鐘）

使用vuecreate創建項目，選擇Vue3+Babel+Router+Vuex。

項目初始化與目錄清理。

2.安裝第三方依賴（20分鐘）

安裝axios：npminstallaxios，配置請求封裝。

安裝ElementPlus：npminstallelement-plus，全局引入與按需引入。

安裝其他工具庫。

3.項目基礎配置（10分鐘）

配置路徑別名@指向src。

配置全局樣式與CSS重置。

配置環境變量與接口地址。

四、課堂小結與任務布置（10分鐘）

總結項目搭建階段的工作，檢查學生項目腳手架是否正常運行。布置課后任務：完成項目骨架搭建與全局樣式配置。作業項目作業1：完成紅色旅游App項目腳手架搭建與基礎配置板書設計第11章紅色旅游App綜合項目（一）

1項目規劃：功能模塊+技術棧

2腳手架搭建：VueCLI創建項目

3依賴安裝：axios/ElementPlus

4基礎配置：別名/全局樣式課后反思

第16次課教案授課課題第16次課紅色旅游App綜合項目（二）授課

形式項目實戰學時

2教學目的與要求1.掌握通用頭部與底部導航組件的封裝。

2.掌握輪播圖組件的使用與定制。

3.掌握首頁推薦內容列表的實現。

4.掌握產品列表頁與搜索頁面的開發方法。

5.能夠運用組件化思想開發復用組件。

6.培養頁面布局與組件拆分能力。

思政目標：通過開發紅色景點展示功能，讓學生在編碼過程中了解革命歷史與英雄事跡，潛移默化地接受愛國主義教育。教學重點和難點重點：全局組件封裝（頭部、底部導航）

首頁輪播與推薦列表

產品列表頁開發

難點：組件通信與數據傳遞

列表渲染與性能優化

ElementPlus組件定制教學方法與手段1.項目驅動教學法

2.邊講邊練，實操演示

3.利用多媒體計算機輔助教學教學內容及

過程設計一、回顧與任務說明（10分鐘）

回顧上節課項目搭建內容，確認腳手架運行正常。介紹本節課開發任務：首頁、列表頁、搜索頁的核心功能開發。

思政內容：每一個紅色景點背后都有一段革命故事。在開發景點列表和詳情的過程中，引導學生關注景點背后的歷史意義，將技術學習與紅色文化教育有機結合。

二、全局公共組件開發（25分鐘）

1.構建統一頭部組件

封裝Header組件：返回按鈕、頁面標題、右側菜單。

使用props控制標題顯示與返回按鈕顯隱。

全局注冊公共組件。

2.設計全局底部導航

封裝TabBar組件：首頁、分類、購物車、我的四個tab。

結合路由實現高亮切換。

使用v-if控制哪些頁面顯示底部導航。

三、首頁功能開發（30分鐘）

1.廣告輪播組件

使用ElementPlus的Carousel輪播組件。

配置自動播放、指示器、切換動畫。

從接口獲取輪播圖數據動態渲染。

2.實現推薦內容列表

景點卡片組件封裝：圖片、標題、價格、標簽。

v-for渲染推薦景點列表。

點擊跳轉到詳情頁的路由配置。

3.首頁組件整合

將輪播圖、快捷入口、推薦列表組合成首頁。

使用axios請求首頁數據。

四、列表頁與搜索頁（15分鐘）

1.產品列表頁

頂部篩選欄與景點列表。

上拉加載更多數據的思路。

2.搜索頁面

搜索框組件與搜索歷史。

搜索結果瀑布流展示思路。

五、課堂小結與任務布置（10分鐘）

總結首頁與列表頁的開發要點，檢查學生完成情況。布置課后任務：完成首頁和列表頁的靜態頁面與數據渲染。作業項目作業2：完成紅色旅游App首頁與列表頁開發板書設計第11章紅色旅游App綜合項目（二）

1公共組件：Header/TabBar

2首頁：輪播圖+推薦列表

3列表頁：篩選+景點列表

4搜索頁：搜索框+結果展示課后反思

第17次課教案授課課題第17次課紅色旅游App綜合項目（三）授課

形式項目實戰學時

2教學目的與要求1.掌握產品詳情頁與用戶評價組件的開發。

2.掌握購物車頁面的功能實現與Vuex狀態管理。

3.掌握個人中心頁面的實現。

4.掌握項目路由的完整配置。

5.能夠進行項目調試與問題排查。

6.培養完整項目開發與調試能力。

思政目標：通過完整項目開發實踐，培養學生的工匠精神與抗壓能力，體會從0到1完成項目的成就感與責任感。教學重點和難點重點：產品詳情頁開發

購物車與Vuex狀態管理

路由完整配置

難點：購物車狀態同步

多頁面聯調

項目bug調試教學方法與手段1.項目驅動教學法

2.邊講邊練，實操演示

3.利用多媒體計算機輔助教學教學內容及

過程設計一、回顧與任務說明（10