《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計(jì)課程名稱JavaScript前端框架應(yīng)用授課單元第6章Vue.js組件單元學(xué)時(shí)2授課教師職稱授課地點(diǎn)教學(xué)目標(biāo)知識(shí)目標(biāo)能力目標(biāo)素質(zhì)目標(biāo)掌握常見的包管理工具的使用方法。掌握Vite的使用方法。掌握啟動(dòng)Vue3項(xiàng)目的方法。1.能夠應(yīng)用npm和yarn相關(guān)命令下載、升級(jí)、卸載包。2.能夠使用Vite創(chuàng)建Vue3項(xiàng)目。3.能夠通過命名啟動(dòng)項(xiàng)目。1.培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度2.通過創(chuàng)建Vue3操作步驟，引導(dǎo)學(xué)生在人生之路上，要一步一個(gè)腳印，走穩(wěn)走踏實(shí)。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)創(chuàng)建Vue3項(xiàng)目教學(xué)難點(diǎn)常見的包管理工具教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進(jìn)行結(jié)構(gòu)化，整個(gè)教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個(gè)教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動(dòng)性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動(dòng)、讓學(xué)生多體驗(yàn)、多積累。教學(xué)準(zhǔn)備環(huán)境準(zhǔn)備多媒體教室資料準(zhǔn)備任務(wù)工單創(chuàng)建Vue3項(xiàng)目的操作手冊(cè)資源準(zhǔn)備智慧職教平臺(tái)教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖（含思政融入點(diǎn)）課前自學(xué)了解什么是包管理工具。了解常用什么腳手架創(chuàng)建Vue3項(xiàng)目。了解什么是Vite及其作用。1.在“智慧職教”平臺(tái)發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。1.通過發(fā)布自學(xué)任務(wù)，明確自學(xué)目標(biāo)，學(xué)生通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識(shí)的能力。Node.js環(huán)境的搭建結(jié)合前端頁面的運(yùn)行環(huán)境，講解什么是Node.js環(huán)境。演示如何訪問Node.js官網(wǎng)，并下載指定版本的Node.js安裝包。發(fā)布任務(wù)：根據(jù)操作手冊(cè)，安裝Node.js環(huán)境，并驗(yàn)證Node.js的安裝成功與否。發(fā)布任務(wù)：根據(jù)操作手冊(cè)，卸載Node.js環(huán)境，并驗(yàn)證Node。js的卸載成功與否。理解Node.js是什么。訪問Node.js官網(wǎng)，下載指定版本Node.js安裝包至本地。安裝Node.js，并檢驗(yàn)安裝成功與否。卸載Node.js，并檢驗(yàn)卸載成功與否。通過教師演示和任務(wù)驅(qū)動(dòng)，引導(dǎo)學(xué)生通過已有的學(xué)習(xí)資料來獨(dú)立完成搭建、卸載Node.js環(huán)境。課中導(dǎo)學(xué)包管理工具問題引導(dǎo)：什么是包管理工具，其具體作用是什么？詳解兩款包管理工具：npm和yarn。發(fā)布搶答：總結(jié)兩款包管理工具的差別和使用環(huán)境。布置任務(wù)：請(qǐng)根據(jù)操作手冊(cè)，安裝npm、yarn包管理工具，并打印出其版本號(hào)。根據(jù)學(xué)生在安裝yarn包中的事件問題，提出、演示使用鏡像地址提升包的下載速度。各小組派出代表回答什么是包管理工具以及其作用，各小組根據(jù)回答，評(píng)選出回答最好的三個(gè)小組。學(xué)生根據(jù)教師講述，理解兩款包管理工具。小組搶答（3個(gè)名額），總結(jié)兩款包管理工具的差別和使用環(huán)境。根據(jù)操作手冊(cè)，在本機(jī)安裝包管理工具。根據(jù)教師的演示，配置鏡像地址。通過搶答、評(píng)價(jià)等手段，提高學(xué)生的課堂參與度。通過總結(jié)包管理工具的差別，幫助學(xué)生提高總結(jié)能力。通過提問包管理工具的使用環(huán)境，培養(yǎng)學(xué)生在工作中的嚴(yán)謹(jǐn)態(tài)度。Vite的使用方法提問并引導(dǎo)：使用Vite創(chuàng)建Vue3項(xiàng)目，需要保證本機(jī)具有什么樣的環(huán)境？搶答提問：如何驗(yàn)證本機(jī)具有創(chuàng)建Vue3項(xiàng)目的環(huán)境。發(fā)布任務(wù)：驗(yàn)證自己本機(jī)是否具有創(chuàng)建Vue3項(xiàng)目的環(huán)境。演示手動(dòng)創(chuàng)建Vue3項(xiàng)目。發(fā)布任務(wù)：手動(dòng)創(chuàng)建Vue3項(xiàng)目。演示通過模板自動(dòng)創(chuàng)建Vue3項(xiàng)目。發(fā)布任務(wù)：通過模板創(chuàng)建Vue3項(xiàng)目。小組成員舉手回答使用Vite創(chuàng)建Vue3的環(huán)境要求。搶答如何驗(yàn)證創(chuàng)建Vue3項(xiàng)目的環(huán)境。驗(yàn)證自己的機(jī)器是否具有創(chuàng)建Vue3項(xiàng)目的環(huán)境，如無，則進(jìn)行完善。記憶、理解教師演示手動(dòng)創(chuàng)建項(xiàng)目的步驟。完成手動(dòng)創(chuàng)建Vue3項(xiàng)目的任務(wù)。記憶、理解教師演示通過模板自動(dòng)創(chuàng)建Vue3項(xiàng)目。完成通過模板創(chuàng)建Vue3項(xiàng)目的任務(wù)。通過提問，引發(fā)學(xué)生思考和總結(jié)，提高學(xué)生的課堂參與度。通過演練結(jié)合，幫助學(xué)生在記憶和理解后，能夠具有實(shí)踐的能力。通過詳細(xì)演示步驟，引導(dǎo)學(xué)生在人生之路上，要一步一個(gè)腳印，走穩(wěn)走踏實(shí)。啟動(dòng)Vue3項(xiàng)目發(fā)布任務(wù)：根據(jù)操作手冊(cè)，結(jié)合創(chuàng)建的Vue3項(xiàng)目，啟動(dòng)Vue3項(xiàng)目，并查看效果。講解啟動(dòng)的注意事項(xiàng)：根目錄、啟動(dòng)命令。完成項(xiàng)目啟動(dòng)任務(wù)。記憶、理解啟動(dòng)該的注意事項(xiàng)。通過操作手冊(cè)完成任務(wù)，鍛煉學(xué)生獨(dú)立操作的能力。實(shí)訓(xùn)任務(wù)任務(wù)內(nèi)容：請(qǐng)創(chuàng)建四個(gè)Vue3任務(wù)（分別使用兩種方式），將操作步驟和結(jié)果落成文檔。在“智慧職教”平臺(tái)推送任務(wù)。根據(jù)任務(wù)要求完成任務(wù)。將任務(wù)的相關(guān)文檔提交至“智慧職教”以任務(wù)為導(dǎo)向，鞏固學(xué)生的學(xué)習(xí)成果。通過落成文檔，培養(yǎng)學(xué)生的梳理能力以及編寫文檔的能力。課后拓展學(xué)生用思維導(dǎo)圖對(duì)本次課學(xué)習(xí)內(nèi)容進(jìn)行小結(jié)。布置課后總結(jié)任務(wù)，引導(dǎo)學(xué)生用思維導(dǎo)圖對(duì)本次課學(xué)習(xí)內(nèi)容進(jìn)行小結(jié)。.在“智慧職教”平臺(tái)推送課后任務(wù)。對(duì)本次課學(xué)習(xí)內(nèi)容回顧梳理小結(jié)（用XMind繪制思維導(dǎo)圖）。在“智慧職教”平臺(tái)（云課堂）按要求完成課后任務(wù)。1.復(fù)習(xí)鞏固。教學(xué)評(píng)價(jià)1.評(píng)價(jià)構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實(shí)操演練成績構(gòu)成。從互評(píng)、師評(píng)等角度，對(duì)學(xué)生進(jìn)行綜合評(píng)價(jià)考核。2.評(píng)價(jià)要素智慧職教平臺(tái)完成