Vue.js前端開發(fā)基礎及項目化應用（微課版）-課程標準

《前端開發(fā)框架》課程標準課程名稱：前端開發(fā)框架適用專業(yè)：軟件技術課程學分：3.5參考學時：60，其中，理論學時28，實踐學時32課程類別：專業(yè)基礎課課程屬性：必修課課程類型：B類（理論＋實踐）產教融合課程、校企合作課程：是￡否R一、課程定位1.課程性質本課程是軟件技術專業(yè)二年級學生的專業(yè)基礎課程，屬于必修課。2.課程作用本課程主要培養(yǎng)學生前端框架技術應用，項目需求分析及功能實現(xiàn)能力，使學生能夠獨立開發(fā)Web應用前端項目。通過該課程的學習，學生將理解漸進式前端框架的工作原理，掌握Vue.js基本語法、與第三方庫（axios、VueRouter和Vuex）結合應用、工程項目開發(fā)方法等內容，為基于框架的Web應用開發(fā)奠定基礎。3.課程銜接在課程設置上，前導課程有《HTML5應用》，后續(xù)課程有：《JavaWeb開發(fā)框架》等。二、課程設計理念和思路本課程以本專業(yè)學生的就業(yè)為導向，根據(jù)用人單位對Web前端崗位的職業(yè)能力分析，以Vue.js技術為主線，以本專業(yè)應共同具備的崗位職業(yè)能力為依據(jù)，遵循學生認知規(guī)律，確定本課程的工作任務和課程內容。為了充分體現(xiàn)任務引領、實踐導向課程思想，將本課程的教學活動分解設計成若干實踐項目或工作情景，以具體的項目任務為單位組織教學，引出相關專業(yè)理論知識，使學生在實操過程中加深對專業(yè)知識、技能的理解和應用，培養(yǎng)學生的綜合職業(yè)能力，滿足學生職業(yè)生涯發(fā)展的需要。按照“以能力為本位，以職業(yè)實踐為主線、以項目型課程為主體的模塊化專業(yè)課程體系”的總體設計要求。該門課程以構建具有動態(tài)效果的網(wǎng)站為基礎，緊緊圍繞完成工作任務的需要來選擇和組織課程內容，突出工作任務與知識的聯(lián)系，讓學生在項目實踐活動的基礎上掌握知識，增強課程內容與職業(yè)能力要求的相關性，提高學生的就業(yè)能力。同時將1+X證書Web前端開發(fā)的核心考點為選取知識點的參照標準，結合職業(yè)技能大賽應用軟件系統(tǒng)開發(fā)賽題難度設計訓練項目，做到課-證-賽融通教學，并有機融入思政元素。課程教學目標本課程要求學生掌握Web前端頁面布局設計的方法，能夠使用HTML5、CSS3和JavaScript構建Web前端靜態(tài)頁面布局，結合Vue.js實現(xiàn)前端的數(shù)據(jù)交互與展示，具體內容包括理解Vue.js漸進式框架的核心思想，掌握Vue.js框架的基本語法、與第三方庫結合使用的方法，了解網(wǎng)頁設計、CSS樣式、JavaScript和前端常用框架等內容。通過本課程的學習,學生能夠在理解Vue.js應用方法的基礎上，具備應用Vue.js解決Web前端開發(fā)的綜合能力。（一）知識目標1.了解前端開發(fā)的MVVM模式；2.掌握Vue.js的基本概念、內置指令、組件、過渡與動畫；3.掌握axios的安裝與使用方法；4.掌握VueRouter的安裝與使用方法；5.掌握Vuex的安裝與使用方法；6.掌握VueCLI腳手架的安裝與使用方法。（二）能力目標1.能夠編寫Vue.js單文件程序；2.能夠利用選項式API和組合式API進行組件開發(fā)；3.能夠利用axios實現(xiàn)異步請求和攔截處理；4.能夠利用VueRouter實現(xiàn)路由定義、導航和導航守衛(wèi)；5.能夠利用Vuex實現(xiàn)狀態(tài)管理；6.能夠使用Vue.js結合第三方庫實現(xiàn)前端界面布局、數(shù)據(jù)交互和展示。（三）素質目標1.培養(yǎng)交流、溝通的能力；2.形成勤奮學習的態(tài)度，嚴謹求實、創(chuàng)新的工作作風；3.樹立高度責任心和良好的團隊合作精神；4.養(yǎng)成良好的心理素質和職業(yè)道德素養(yǎng)。四、課程內容、教學要求與學時分配單元名稱訓練項目學習任務知識要求技能要求（含素質要求）教學方法與手段建議學時分配實踐場所名稱（含校外）特色說明（含思政改革、雙創(chuàng)教育、產教融合教學、理實一體化教學、引入技能競賽標準等特色）Vue.js開發(fā)基礎項目1：歷史名城網(wǎng)站界面布局任務1-1:Vue.js入門1.Vue的核心設計思想2.Vue開發(fā)環(huán)境搭建3.Vue開發(fā)和調試工具的使用4.Vue程序的創(chuàng)建方法1.掌握Vue開發(fā)環(huán)境的搭建、開發(fā)和調試工具2.理解Vue核心設計思想3.能夠創(chuàng)建簡單的Vue程序1.教學方法：采用案例分析、任務驅動等教學方法；2.教學手段：公開在線教育資源結合超星學習通APP使用。2校內機房教學思政改革特色：了解開源技術的使用規(guī)范，樹立知識產權意識任務1-2:Vue基礎語法1.Vue實例的配置選項2.data初始數(shù)據(jù)的定義3.常用的內置指令4.使用內置指令實現(xiàn)雙向數(shù)據(jù)綁定5.列表渲染1.掌握Vue實例的創(chuàng)建2.掌握如何在Vue中進行數(shù)據(jù)綁定3.掌握Vue的事件監(jiān)聽操作6校內機房教學思政改革特色：1.培養(yǎng)學生踏實認真的學習態(tài)度，形成良好職業(yè)素養(yǎng)2.通過了解歷史名城，增強學生的愛國意識；3.培養(yǎng)分析問題、解決問題能力任務1-3:Vue組件1.Vue組件2.組件間數(shù)據(jù)傳遞3.組件事件4.Vue生命周期鉤子函數(shù)1.掌握Vue組件的定義和注冊的方法2.掌握父子組件間數(shù)據(jù)的傳遞3.掌握組件事件監(jiān)聽和處理方法4.能夠訪問Vue組件生命周期鉤子函數(shù)10校內機房教學思政改革特色：1.培養(yǎng)學生踏實認真的學習態(tài)度，形成良好職業(yè)素養(yǎng)2.通過了解歷史名城，增強學生的愛國意識；3.培養(yǎng)分析問題、解決問題能力任務1-4:Vue過渡和動畫1.過渡和動畫基本實現(xiàn)方法2.基于鉤子函數(shù)實現(xiàn)過渡和動畫的方法3.多元素過渡4.列表過渡1.掌握內置過渡類的使用2.掌握JavaScript鉤子創(chuàng)建動畫和過渡效果的方法3.掌握單元素、多元素、多組件的過渡動畫的實現(xiàn)方法4.掌握列表過渡的實現(xiàn)方法4校內機房教學思政改革特色：1.培養(yǎng)學生踏實認真的學習態(tài)度，形成良好職業(yè)素養(yǎng)2.通過了解歷史名城，增強學生的愛國意識；3.培養(yǎng)分析問題、解決問題能力任務1-5：組合式API1.組合式API編寫組件的方法2.setup函數(shù)3.訪問生命周期鉤子函數(shù)方法4.響應性原理5.provide/inject響應式傳值方法1.理解組合式API和選項式API方法的區(qū)別2.能夠編寫組合式API組件3.能夠使用provide/inject實現(xiàn)跨層傳值6思政改革特色：1.培養(yǎng)學生踏實認真的學習態(tài)度，形成良好職業(yè)素養(yǎng)2.通過了解歷史名城，增強學生的愛國意識；3.培養(yǎng)分析問題、解決問題能力Vue.js與第三方庫結合應用項目2：歷史名城網(wǎng)站用戶交互任務2-1：axios異步處理1.異步編程解決方案2.Promise對象實現(xiàn)異步處理原理3.axios處理HTTP請求流程4.axios攔截器實現(xiàn)方法1.掌握Promise使用方法2.能夠使用axios實現(xiàn)異步請求3.能夠實現(xiàn)請求和響應攔截1.教學方法：采用案例分析、任務驅動等教學方法；2.教學手段：公開在線教育資源結合超星學習通APP使用。6思政改革特色：1.培養(yǎng)學生踏實認真的學習態(tài)度，形成良好職業(yè)素養(yǎng)2.通過了解歷史名城，增強學生的愛國意識；3.培養(yǎng)分析問題、解決問題能力任務2-2:Vue路由1.VueRouter工作原理和基本使用2.路由屬性的作用和實現(xiàn)方法3.動態(tài)路由的作用和實現(xiàn)方法3.導航和導航守衛(wèi)的作用和實現(xiàn)方法1熟練VueRouter安裝與使用2.能夠實現(xiàn)嵌套和命名路由，路由視圖3.能夠利用路由傳參實現(xiàn)動態(tài)路由4.能夠應用編程式導航實現(xiàn)路由跳轉5.能夠實現(xiàn)全局導航守衛(wèi)6校內機房教學思政改革特色：1.培養(yǎng)學生踏實認真的學習態(tài)度，形成良好職業(yè)素養(yǎng)2.通過了解歷史名城，增強學生的愛國意識；3.培養(yǎng)分析問題、解決問題能力任務2-3:Vuex狀態(tài)管理1.狀態(tài)管理模式2.Vuex安裝與使用3.Vuex核心屬性1.熟練Vuex安裝和使用2.能夠利用Vuex核心屬性實現(xiàn)組件間數(shù)據(jù)共享6校內機房教學思政改革特色：1.培養(yǎng)學生踏實認真的學習態(tài)度，形成良好職業(yè)素養(yǎng)2.通過了解歷史名城，增強學生的愛國意識；3.培養(yǎng)分析問題、解決問題能力VueCLI構建工程項目項目3：TodoMvc任務3-1:VueCLI1.全局安裝@vue/cli2.配置文件1.掌握VueCLI腳手架的安裝與使用2.理解項目配置文件的常用配置項的作用1.教學方法：采用案例分析、任務驅動等教學方法；2.教學手段：公開在線教育資源結合超星學習通APP使用。2校內機房教學思政改革特色：1.培養(yǎng)學生踏實認真的學習態(tài)度，形成良好職業(yè)素養(yǎng)2.通過了解歷史名城，增強學生的愛國意識；3.培養(yǎng)分析問題、解決問題能力任務3-2:項目搭建1.VueCLI腳手架的作用2.VueCLI及相關插件的安裝方法1.能夠配置單獨的路由文件2.能夠配置單獨的Vuex狀態(tài)存儲文件3.能夠配置axios請求和響應4校內機房教學思政改革特色：1.培養(yǎng)學生踏實認真的學習態(tài)度，形成良好職業(yè)素養(yǎng)2.通過了解歷史名城，增強學生的愛國意識；3.培養(yǎng)分析問題、解決問題能力工程化項目實戰(zhàn)項目4：圖片素材網(wǎng)站任務4-1:項目總體設計分析1.項目的整體結構2.項目實現(xiàn)流程和規(guī)范3.代碼編寫規(guī)范1.根據(jù)需求設計項目功能模塊2.能夠依據(jù)流程和規(guī)范完成項目的功能模塊構建1.教學方法：采用案例分析、任務驅動等教學方法；2.教學手段：輕工教育在線教育資源結合超星學習通APP使用。1校內機房教學思政改革特色：1.培養(yǎng)學生工程化思維、行業(yè)規(guī)范意識，形成良好職業(yè)素養(yǎng)；2.培養(yǎng)分析問題、解決問題、協(xié)作溝通能力。引入技能競賽：對標職業(yè)技能大賽應用軟件系統(tǒng)開發(fā)賽項任務4-2：項目構建1.Vue工程項目結構2.項目配置文件1.能夠使用VueCLI創(chuàng)建Vue工程項目2.能夠進行項目打包、遠程訪問等相關配置1思政改革特色：1.培養(yǎng)學生工程化思維、行業(yè)規(guī)范意識，形成良好職業(yè)素養(yǎng)；2.通過了解中國元素圖片素材背后的故事，增加文化自信；3.培養(yǎng)分析問題、解決問題、協(xié)作溝通能力。引入技能競賽：對標職業(yè)技能大賽應用軟件系統(tǒng)開發(fā)賽項任務4-3:網(wǎng)站首頁1.頁面布局結構2.頁面布局設計方法1.利用Vue.js、HTML5實現(xiàn)首頁結構2.能夠利用HTML5和CSS3實現(xiàn)輪播圖等動態(tài)效果3.能夠頁頭導航欄布局效果2校內機房教學思政改革特色：1.培養(yǎng)學生工程化思維、行業(yè)規(guī)范意識，形成良好職業(yè)素養(yǎng)；2.通過了解中國元素圖片素材背后的故事，增加文化自信；3.培養(yǎng)分析問題、解決問題、協(xié)作溝通能力。引入技能競賽：對標職業(yè)技能大賽應用軟件系統(tǒng)開發(fā)賽項任務4-4：用戶登錄1.axios異步處理實現(xiàn)方法1.能夠實現(xiàn)用戶登錄請求提交和驗證2思政改革特色：1.培養(yǎng)學生工程化思維、行業(yè)規(guī)范意識，形成良好職業(yè)素養(yǎng)；2.通過了解中國元素圖片素材背后的故事，增加文化自信；3.培養(yǎng)分析問題、解決問題、協(xié)作溝通能力。引入技能競賽：對標職業(yè)技能大賽應用軟件系統(tǒng)開發(fā)賽項任務4-5：圖片分享1.axios異步處理實現(xiàn)方法2.文件上傳和下載方法1.能夠實現(xiàn)圖片列表的讀取和展示2.能夠實現(xiàn)圖片的上傳和保存2思政改革特色：1.培養(yǎng)學生工程化思維、行業(yè)規(guī)范意識，形成良好職業(yè)素養(yǎng)；2.通過了解中國元素圖片素材背后的故事，增加文化自信；3.培養(yǎng)分析問題、解決問題、協(xié)作溝通能力。引入技能競賽：對標職業(yè)技能大賽應用軟件系統(tǒng)開發(fā)賽項（請自行增加，切匆更改表格的格式和字體）—PAGE9—五、課程重難點1.教學重點及處理方法課程學習重點包括：Vue.js數(shù)據(jù)驅動和組件化核心技術。處理方法：將知識點分解成一個個訓練項目，培養(yǎng)學生在Web前端開發(fā)的實際工作技能，鍛煉思考問題、解決問題能力。2.教學難點及處理方法課程學習難點包括：Vue.js工程項目的構建、數(shù)據(jù)交互和展示。處理方法：將學生分成若干個小組，在教師的指導下小組成員互相討論并完成項目創(chuàng)建。課程教學評價1．考核形式考核采取考勤評價、課堂互動、課后作業(yè)、期末綜合項目等形式進行。2．考核評價表序號學習任務評價方式評分標準分數(shù)分配1考勤上課不遲到不早退按缺勤次數(shù)扣分10%2課堂互動依據(jù)互動情況互動次數(shù)10%3平時作業(yè)或項目實踐項目考核和集中考核相結合，項目考核為該單元所有項目得分的平均分，集中考核為期末的綜合作業(yè)得分。項目得分=專業(yè)技能得分（70%）+職業(yè)素養(yǎng)得分（20%）+項目文檔得分（10%）；75%4課程思政依據(jù)學生學習表現(xiàn)、團隊合作表現(xiàn)等正確價值觀、項目實施進度和實施效果等5%合計100七、教學實施建議1.教學模式：線上+線下混合模式2.教學方法本課程采用案例分析、任務驅動等教學方法，通過師生完成一個個訓練項目，培養(yǎng)學生在Web前端開發(fā)的實際工作技能，鍛煉思考問題、解決問題、自主學習和創(chuàng)新能力，培養(yǎng)前端開發(fā)師崗位方面的綜合職業(yè)能力。通過融入開源精神、知識產權意識、工匠精神等思政元素，挖掘專業(yè)思政元素，幫助學生樹立正確價值觀，培養(yǎng)其精益求精的工作態(tài)度和踏實肯干的工作作風。3.教學手段利用多媒體信息化技術，通過視頻、微課、案例分析、在線教學平臺等輔助教學手段讓學生的學習更高效，師生互動更加密切。4.教材及課程資源（1）教材級教學參考書《Vue.js前端開發(fā)基礎及項目化應用（微課版）》，古凌嵐、肖蓉、袁宜英著，人民郵電出版社，2024-01備選教材:《循序漸進Vue.js3前端開發(fā)實戰(zhàn)》，張益琿著，清華大學出版社，2022-01參考教材:《Web前端開發(fā)：高級》，工業(yè)和信息化部教育與考試中心主編，2019-08教學資源教師利用校內共享課程資源平臺，開發(fā)《前端開發(fā)框架》課程的共享資源，向學生提供優(yōu)質學習資源，制作微課，便于學生課前預習和課后復習。參考網(wǎng)站：1）Vue.js官方網(wǎng)站/2）VueRouter官方網(wǎng)站/3）Vuex官方網(wǎng)站/zh/guide/4）axios中文技術文