Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用（微課版）-課程標(biāo)準(zhǔn)

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