2/2《Vue應(yīng)用程序開發(fā)》課程標(biāo)準(zhǔn)一、課程概要課程名稱Vue應(yīng)用程序開發(fā)課程學(xué)分4課程學(xué)時共68學(xué)時，理論28學(xué)時，實踐40學(xué)時課程類別通識教育：￡基礎(chǔ)課程￡核心課程￡一般課程￡拓展專業(yè)課程專業(yè)教育：￡基礎(chǔ)課程R核心課程￡拓展課程課程性質(zhì)R必修￡選修適用專業(yè)軟件技術(shù)前導(dǎo)課程HTML、CSS、JavaScript后續(xù)課程無開設(shè)學(xué)期第一學(xué)期第二學(xué)期第三學(xué)期第四學(xué)期第五學(xué)期第六學(xué)期√二、課程定位本課程是軟件技術(shù)專業(yè)的專業(yè)核心課程，主要目標(biāo)是培養(yǎng)軟件技術(shù)專業(yè)學(xué)生的前端開發(fā)能力、職業(yè)素養(yǎng)和創(chuàng)新能力；掌握Vue的基本概念以及優(yōu)勢、Vue開發(fā)環(huán)境的搭建、Vue實例對象、內(nèi)置指令、組件、事件、生命周期、全局API以及實例屬性、過渡動畫、路由、狀態(tài)管理等等課程內(nèi)容。通過本課程的學(xué)習(xí)，學(xué)生能夠全面掌握如何利用Vue.js框架進(jìn)行Web前端組件化開發(fā)的能力，為勝任Web前端開發(fā)等崗位工作提供核心支持。三、課程目標(biāo)（一）素質(zhì)（思政）目標(biāo)1.培養(yǎng)學(xué)生愛黨愛社會主義、擔(dān)當(dāng)民族復(fù)興大任的愛國情懷；2.培養(yǎng)學(xué)生對社會主義核心價值觀的情感認(rèn)同和行為習(xí)慣；3.培養(yǎng)學(xué)生愛崗敬業(yè)、艱苦奮斗、勇于創(chuàng)新、熱愛勞動的勞動精神；4.培養(yǎng)學(xué)生執(zhí)著專注、精益求精、一絲不茍、科技強(qiáng)國的工匠精神；5.培養(yǎng)學(xué)生標(biāo)準(zhǔn)意識、規(guī)范意識、安全意識、服務(wù)質(zhì)量職業(yè)意識；6.培養(yǎng)學(xué)生嚴(yán)謹(jǐn)細(xì)致、踏實耐心、團(tuán)隊協(xié)作、表達(dá)溝通的職業(yè)素質(zhì)。（二）知識目標(biāo)1.了解前端開發(fā)的MVVM模式；2.掌握Vue.js的基本概念、內(nèi)置指令、組件、過渡與動畫；3.掌握axios的安裝與使用方法；4.掌握VueRouter的安裝與使用方法；5.掌握Vuex的安裝與使用方法；6.掌握VueCLI腳手架的安裝與使用方法。（三）能力目標(biāo)1.能夠編寫Vue.js單文件程序；2.能夠利用選項式API和組合式API進(jìn)行組件開發(fā)；3.能夠利用axios實現(xiàn)異步請求和攔截處理；4.能夠利用VueRouter實現(xiàn)路由定義、導(dǎo)航和導(dǎo)航守衛(wèi)；5.能夠利用Vuex實現(xiàn)狀態(tài)管理；6.能夠使用Vue.js結(jié)合第三方庫實現(xiàn)前端界面布局、數(shù)據(jù)交互和展示。四、課程設(shè)計思路本課程根據(jù)知識點難易的先后順序進(jìn)行講解。依次講解初識Vue.js、Vue.js基礎(chǔ)知識、組件基礎(chǔ)、路由、常用的UI組件庫、網(wǎng)絡(luò)請求和狀態(tài)管理等，并結(jié)合示例代碼幫助學(xué)生進(jìn)行理解。在每個章節(jié)中，通過階段案例的實現(xiàn)，幫助學(xué)生學(xué)以致用，將基礎(chǔ)知識轉(zhuǎn)化為解決實際問題的能力。在學(xué)習(xí)了Vue.js基礎(chǔ)知識后，通過實踐項目，進(jìn)一步鞏固知識，并提高學(xué)生的分析和解決問題的能力。通過學(xué)習(xí)本課程，使學(xué)生掌握如何將Vue.js與項目開發(fā)相結(jié)合。按照學(xué)習(xí)的難易程度及先后順序安排具體的內(nèi)容，可以有效地將學(xué)生所學(xué)的內(nèi)容串聯(lián)起來，從而培養(yǎng)學(xué)生分析問題和解決問題的能力。同時將1+X證書Web前端開發(fā)的核心考點為選取知識點的參照標(biāo)準(zhǔn)，結(jié)合職業(yè)技能大賽應(yīng)用軟件系統(tǒng)開發(fā)賽題難度設(shè)計訓(xùn)練項目，做到課-證-賽融通教學(xué)，并有機(jī)融入思政元素。五、課程內(nèi)容與要求第1章初識Vue.js學(xué)習(xí)單元初識Vue.js課時4課時學(xué)習(xí)目標(biāo)了解前端技術(shù)的發(fā)展，能夠說出使用框架開發(fā)項目的優(yōu)勢了解什么是Vue，能夠說出Vue的基本概念了解Vue的特性，能夠說出Vue的4個特性了解Vue的版本，能夠說出Vue2和Vue3的區(qū)別掌握VisualStudioCode編輯器的使用方法，能夠完成中文語言擴(kuò)展、Volar擴(kuò)展的安裝，以及使用VisualStudioCode編輯器打開項目并在項目中創(chuàng)建一個HTML5文檔掌握Node.js環(huán)境的搭建，能夠獨立完成Node.js的下載和安裝掌握常見的包管理工具的使用方法，能夠應(yīng)用npm和yarn相關(guān)命令下載、升級、卸載包掌握Vite的使用方法，能夠使用Vite創(chuàng)建Vue3項目學(xué)習(xí)內(nèi)容知識點掌握程度重點難點前端技術(shù)的發(fā)展了解什么是Vue了解Vue的特性了解Vue的版本了解VisualStudioCode編輯器掌握Node.js環(huán)境掌握常見的包管理工具掌握什么是Vite了解創(chuàng)建Vue3項目掌握√Vue3項目的目錄結(jié)構(gòu)熟悉Vue3項目的運行過程了解第2章Vue.js開發(fā)基礎(chǔ)學(xué)習(xí)單元Vue.js開發(fā)基礎(chǔ)課時12課時學(xué)習(xí)目標(biāo)掌握單文件組件，能夠創(chuàng)建并使用單文件組件掌握數(shù)據(jù)綁定，能夠定義數(shù)據(jù)并將數(shù)據(jù)渲染到頁面中掌握內(nèi)容渲染指令，能夠靈活運用v-text和v-html指令將字符串渲染到頁面中掌握屬性綁定指令，能夠靈活運用v-bind指令給目標(biāo)元素的屬性動態(tài)綁定值掌握事件綁定指令，能夠靈活運用v-on指令給目標(biāo)元素綁定事件掌握雙向數(shù)據(jù)綁定指令，能夠靈活運用v-model指令在表單元素上實現(xiàn)數(shù)據(jù)的雙向綁定掌握條件渲染指令，能夠靈活運用v-if、v-show指令根據(jù)不同的條件渲染不同的標(biāo)簽掌握列表渲染指令，能夠靈活運用v-for指令將數(shù)組、對象等中的數(shù)據(jù)渲染到頁面中掌握事件對象，能夠靈活運用事件對象獲取和修改DOM元素的屬性熟悉事件修飾符，能夠闡述常見的事件修飾符掌握計算屬性，能夠靈活運用計算屬性實時監(jiān)聽數(shù)據(jù)的變化，當(dāng)所依賴的數(shù)據(jù)發(fā)生變化時重新計算值掌握偵聽器，能夠靈活運用偵聽器監(jiān)聽數(shù)據(jù)的變化并進(jìn)行相應(yīng)的操作掌握樣式綁定，能夠靈活運用v-bind綁定class和style屬性實現(xiàn)元素樣式的設(shè)置學(xué)習(xí)內(nèi)容知識點掌握程度重點難點單文件組件掌握初識數(shù)據(jù)綁定掌握響應(yīng)式數(shù)據(jù)綁定掌握√內(nèi)容渲染指令掌握屬性綁定指令掌握√事件綁定指令掌握√雙向數(shù)據(jù)綁定指令掌握√條件渲染指令掌握√列表渲染指令掌握√事件對象掌握事件修飾符熟悉計算屬性掌握偵聽器掌握綁定class屬性掌握綁定style屬性掌握階段案例——學(xué)習(xí)計劃表掌握第3章組件基礎(chǔ)（上）學(xué)習(xí)單元組件基礎(chǔ)（上）課時10課時學(xué)習(xí)目標(biāo)熟悉選項式API和組合式API，能夠說出選項式API和組合式API的區(qū)別掌握生命周期函數(shù)的使用方法，能夠靈活運用生命周期函數(shù)在特定時間執(zhí)行特定的操作掌握注冊組件的方法，能夠運用全局注冊或者局部注冊的方式完成組件的注冊掌握引用組件的方法，能夠在Vue項目中以標(biāo)簽的形式引用組件掌握組件之間樣式?jīng)_突問題的解決方法，能夠運用<style>標(biāo)簽的scoped屬性和深度選擇器解決組件之間樣式?jīng)_突的問題掌握父組件向子組件傳遞數(shù)據(jù)的方法，能夠使用props實現(xiàn)數(shù)據(jù)傳遞掌握子組件向父組件傳遞數(shù)據(jù)的方法，能夠使用自定義事件實現(xiàn)數(shù)據(jù)傳遞掌握跨級組件之間的傳遞數(shù)據(jù)的方法，能夠使用依賴注入實現(xiàn)數(shù)據(jù)共享學(xué)習(xí)內(nèi)容知識點掌握程度重點難點選項式API和組合式API熟悉生命周期函數(shù)掌握√注冊組件掌握引用組件掌握解決組件之間的樣式?jīng)_突掌握聲明props掌握靜態(tài)綁定props掌握動態(tài)綁定props掌握驗證props掌握在子組件中聲明自定義事件掌握在子組件中觸發(fā)自定義事件掌握在父組件中監(jiān)聽自定義事件掌握跨級組件之間的數(shù)據(jù)傳遞掌握階段案例——待辦事項掌握第4章組件基礎(chǔ)（下）學(xué)習(xí)單元組件基礎(chǔ)（下）課時6課時學(xué)習(xí)目標(biāo)掌握動態(tài)組件的使用方法，能夠?qū)崿F(xiàn)動態(tài)組件的渲染掌握KeepAlive組件的使用方法，能夠使用<KeepAlive>標(biāo)簽完成組件緩存掌握組件緩存相關(guān)的生命周期函數(shù)，能夠在對應(yīng)的生命周期函數(shù)中執(zhí)行相應(yīng)的動作熟悉KeepAlive組件的常用屬性，能夠說明各個屬性的作用掌握什么是插槽，能夠定義和使用插槽掌握具名插槽的使用方法，能夠通過name屬性定義具名插槽掌握作用域插槽的使用方法，能夠在父組件中使用子組件中的數(shù)據(jù)了解什么是自定義指令，能夠說出自定義指令的概念和分類掌握私有自定義指令的使用方法，能夠獨立完成私有自定義指令的聲明和使用掌握全局自定義指令的使用方法，能夠使用對象形式和函數(shù)形式來聲明全局自定義指令掌握為自定義指令綁定參數(shù)的使用方法，能夠通過等號（=）的方式，為當(dāng)前指令綁定參數(shù)掌握自定義指令的函數(shù)形式，能夠使用函數(shù)形式簡化自定義指令的聲明掌握引用靜態(tài)資源的方法，能夠引用public和src\assets目錄下的靜態(tài)資源學(xué)習(xí)內(nèi)容知識點掌握程度重點難點定義動態(tài)組件掌握利用KeepAlive組件實現(xiàn)組件緩存掌握組件緩存相關(guān)的生命周期函數(shù)掌握KeepAlive組件的常用屬性熟悉什么是插槽掌握具名插槽掌握√作用域插槽掌握√什么是自定義指令了解私有自定義指令的聲明與使用掌握全局自定義指令的聲明與使用掌握為自定義指令綁定參數(shù)掌握自定義指令的函數(shù)形式掌握引用靜態(tài)資源掌握階段案例——商品管理掌握第5章路由學(xué)習(xí)單元路由課時10課時學(xué)習(xí)目標(biāo)了解什么是路由，能夠說出前后端路由的基本工作原理掌握VueRouter的安裝，能夠獨立安裝VueRouter掌握VueRouter的基本使用方法，能夠在項目中配置VueRouter掌握路由重定向的使用方法，能夠解釋路由重定向的實現(xiàn)掌握嵌套路由的使用方法，能夠?qū)崿F(xiàn)路由的嵌套掌握動態(tài)路由的使用方法，能夠?qū)崿F(xiàn)動態(tài)路由的匹配掌握命名路由的使用方法，能夠解釋命名路由的實現(xiàn)掌握編程式導(dǎo)航的使用方法，能夠靈活應(yīng)用編程式導(dǎo)航掌握導(dǎo)航守衛(wèi)的使用方法，能夠?qū)崿F(xiàn)路由訪問權(quán)限的控制學(xué)習(xí)內(nèi)容知識點掌握程度重點難點初識路由了解VueRouter的安裝掌握VueRouter的基本使用掌握路由重定向掌握嵌套路由掌握動態(tài)路由概述了解獲取動態(tài)路徑參數(shù)值掌握√√命名路由掌握√編程式導(dǎo)航掌握√導(dǎo)航守衛(wèi)掌握階段案例——后臺管理系統(tǒng)掌握第6章常用UI組件庫學(xué)習(xí)單元常用UI組件庫課時8課時學(xué)習(xí)目標(biāo)掌握ElementPlus組件庫的安裝方法，能夠獨立安裝、配置ElementPlus掌握ElementPlus中常用組件的使用方法，能夠?qū)崿F(xiàn)按鈕、表格、表單和菜單效果掌握Vant組件庫的安裝方法，能夠獨立安裝、配置Vant掌握Vant中常用組件的使用方法，能夠?qū)崿F(xiàn)按鈕、輪播、標(biāo)簽頁、表單、網(wǎng)格和標(biāo)簽欄效果掌握AntDesignVue組件庫的安裝方法，能夠獨立安裝、配置AntDesignVue掌握AntDesignVue中常用組件的使用方法，能夠?qū)崿F(xiàn)按鈕和布局效果學(xué)習(xí)內(nèi)容知識點掌握程度重點難點安裝ElementPlus掌握ElementPlus中的常用組件-Button組件掌握√ElementPlus中的常用組件-Table組件掌握√ElementPlus中的常用組件-Form組件掌握√ElementPlus中的常用組件-Menu組件掌握√安裝Vant掌握Vant中的常用組件-Button組件掌握√Vant中的常用組件-Swipe組件掌握√Vant中的常用組件-Tab組件掌握√Vant中的常用組件-Form組件掌握√Vant中的常用組件-Grid組件掌握√Vant中的常用組件-Tabbar組件掌握√安裝AntDesignVue掌握AntDesignVue中的常用組件-Button組件掌握√AntDesignVue中的常用組件-Layout組件掌握√第7章網(wǎng)絡(luò)請求和狀態(tài)管理學(xué)習(xí)單元網(wǎng)絡(luò)請求和狀態(tài)管理課時8課時學(xué)習(xí)目標(biāo)了解Axios的基本概念，能夠說出Axios的功能和主要特性掌握Axios的安裝和使用方法，能夠在項目中安裝并使用Axios掌握Axios圖書列表案例的實現(xiàn)，能夠使用Axios完成網(wǎng)絡(luò)請求了解Vuex的基本概念，能夠說出Vuex的工作原理掌握Vuex的安裝和使用方法，能夠在項目中安裝并使用Vuex掌握Vuex計數(shù)器案例的實現(xiàn)，能夠運用Vuex完成計數(shù)器效果了解Pinia的基本概念，能夠說出Pinia的功能和優(yōu)點掌握Pinia的安裝和使用方法，能夠在項目中安裝并使用Pinia掌握Pinia計數(shù)器案例的實現(xiàn)，能夠運用Pinia完成計數(shù)器效果熟悉Pinia模塊化，能夠闡述Pinia模塊化的實現(xiàn)原理掌握Pinia持久化存儲，能夠運用Pinia實現(xiàn)全部數(shù)據(jù)或部分?jǐn)?shù)據(jù)的持久化存儲學(xué)習(xí)內(nèi)容知識點掌握程度重點難點Axios概述了解安裝Axios掌握使用Axios掌握√Axios圖書列表案例掌握Vuex概述了解安裝Vuex掌握使用Vuex掌握√√Vuex計數(shù)器案例掌握Pinia概述了解安裝Pinia掌握使用Pinia掌握√√Pinia計數(shù)器案例掌握Pinia模塊化熟悉Pinia持久化存儲掌握第8章項目實戰(zhàn)——“微商城”前后臺開發(fā)學(xué)習(xí)單元項目實戰(zhàn)——“微商城”前后臺開發(fā)課時10課時學(xué)習(xí)目標(biāo)熟悉項目的前臺頁面效果，能夠說出前臺項目包含的頁面和主要功能熟悉項目的后臺頁面效果，能夠說出后臺項目包含的頁面和主要功能掌握項目的具體實現(xiàn)，能夠獨立完成項目各個頁面的編寫學(xué)習(xí)內(nèi)容知識點掌握程度重點難點項目前臺分析熟悉項目后臺分析熟悉項目前臺—首頁掌握項目前臺—分類掌握項目前臺—商品詳情掌握項目前臺—消息掌握項目前臺—購物車掌握√項目前臺—我的掌握項目后臺—登錄頁掌握√√項目后臺—首頁掌握項目后臺—分類管理頁掌握√項目后臺—商品管理頁掌握項目后臺—個人中心頁掌握課時分配章目講課上機(jī)合計第1章初識Vue.js224第2章Vue.js開發(fā)基礎(chǔ)6612第3章組件基礎(chǔ)（上）6410第4章組件基礎(chǔ)（下）428第5章路由6410第6章常用UI組件庫449第7章網(wǎng)絡(luò)請求和狀態(tài)管理448第8章項目實戰(zhàn)——“微商城”前后臺開發(fā)6416合計383068六、實施建議（一）課程團(tuán)隊本課程負(fù)責(zé)人由學(xué)術(shù)造詣深厚、教學(xué)經(jīng)驗豐富、教學(xué)特色鮮明、具有研究生學(xué)歷并取得相應(yīng)學(xué)位或者具有高級專業(yè)技術(shù)職務(wù)的教師擔(dān)任，并建立職稱、學(xué)歷、年齡等結(jié)構(gòu)合理、專兼結(jié)合的“雙師型”教學(xué)團(tuán)隊，每個教學(xué)班應(yīng)配備主講教師1名。專任教師應(yīng)具有高校教師資格，軟件類專業(yè)本科以上學(xué)歷，半年以上企業(yè)行業(yè)相關(guān)經(jīng)歷。（二）教學(xué)方法與手段本課程采用案例分析、任務(wù)驅(qū)動等教學(xué)方法，通過師生完成一個個訓(xùn)練項目，培養(yǎng)學(xué)生在Web前端開發(fā)的實際工作技能，鍛煉思考問題、解決問題、自主學(xué)習(xí)和創(chuàng)新能力，培養(yǎng)前端開發(fā)師崗位方面的綜合職業(yè)能力。通過融入開源精神、知識產(chǎn)權(quán)意識、工匠精神等思政元素，挖掘?qū)I(yè)思政元素，幫助學(xué)生樹立正確價值觀，培養(yǎng)其精益求精的工作態(tài)度和踏實肯干的工作作風(fēng)。利用多媒體信息化技術(shù)，通過視頻、微課、案例分析、在線教學(xué)平臺等輔助教學(xué)手段讓學(xué)生的學(xué)習(xí)更高效，師生互動更加密切。（三）教學(xué)資源開發(fā)與利用1.教材選用《Vue.js前端開發(fā)實戰(zhàn)》，黑馬程序員著，人民郵電出版社，2020.2.參考資料《Vue.js前端開發(fā)基礎(chǔ)及項目化應(yīng)用（微課版）》，古凌嵐、肖蓉、袁宜英著，人民郵電出版