Vue.js 3前端開發(fā)基礎及項目化應用 教案 單元10 構建工程化的Vue項目

《Vue.js前端開發(fā)基礎及項目化應用》教學設計課程名稱：Vue.js前端開發(fā)基礎及項目化應用授課年級：授課學期：學年第一學期教師姓名：2023年09月09日課題名稱單元10構建工程化的Vue項目計劃學時6學時內(nèi)容分析企業(yè)級Vue項目通常是單頁面應用，且采用工程化方式來開發(fā)。Vue工程項目的構建，需要依賴于VueCLI、ElementPlus等輔助工具來完成。本單元將介紹VueCLI工具的使用方法，利用VueCLI和ElementPlus搭建工程化的Vue前端項目，以及項目的開發(fā)和部署的實現(xiàn)。通過“todoMVC”任務，進一步幫助學習者熟悉VueCLI工具的使用，掌握Vue工程項目的開發(fā)方法以及對ElementPlus組件庫的運用。教學目標及基本要求1.掌握VueCLI工具的使用方法2.了解工程化的Vue項目的項目結構及其組成要素3.能夠利用VueCLI開發(fā)工程化的Vue項目4.了解Vite工具的使用方法教學重點1.了解工程化的Vue項目的項目結構及其組成要素2.能夠利用VueCLI開發(fā)工程化的Vue項目教學難點教學方式教學采用教師使用PPT講解和案例示范相結合的方式教學過程第一課時（VueCLI工具，Vue工程項目構建）一、創(chuàng)設情境，引入工程化前端項目開發(fā)的必要性1.教師通過應用場景描述，引出前端工程化概念。前端工程化是前端發(fā)展的必然趨勢，這使得工程化的開發(fā)方式成為大中型前端項目開發(fā)的必備技能。工程化的Vue項目開發(fā)需要借助一些工具的支持，以提高開發(fā)效率。Vue官方提供的VueCLI工具可實現(xiàn)項目的快速搭建和便捷管理，基于Vue的UI組件庫ElementPlus則能讓頁面布局的構建變得更為容易。2.明確學習目標。了解VueCLI工具掌握VueCLI工具的安裝方法和常用命令掌握VueCLI工具搭建Vue工程的方法二、進行重點知識的講解1.教師根據(jù)課件，介紹VueCLI工具，并通過演示來講解該工具的安裝和使用方法。（1）VueCLI概述VueCLI是一個基于Vue進行快速開發(fā)的完整系統(tǒng)，能夠幫助開發(fā)者快速搭建項目的交互式腳手架。（2）VueCLI安裝步驟安裝Node.js雙擊安裝文件node.exe進行安裝使用npm安裝VueCLInpminstall-g@vue/cli2.教師根據(jù)課件，講解VueCLI搭建項目的具體方法，并通過項目的創(chuàng)建過程進行演示。（1）項目創(chuàng)建命令vuecreatefirst-app（2）項目參數(shù)設置Default([Vue3]babel,eslint)：Vue3的項目，只包含JavaScript編譯器Babel、代碼檢測工具ESLint。Default([Vue2]babel,eslint)：Vue2的項目，只包含JavaScript編譯器Babel、代碼檢測工具ESLint。Manuallyselectfeatures：手動選擇特性。（3）項目運行命令cdfirst-appnpmrunserve三、歸納總結，布置課后作業(yè)1.回顧上課前的學習目標，對本節(jié)課知識點進行總結。教師帶領學生總結本節(jié)課需要熟悉的知識點，包括VueCLI工具的特點，VueCLI常用命令的使用方法，利用VueCLI工具搭建一個完整結構的Vue項目的實現(xiàn)過程。2.布置隨堂練習，檢查學生掌握情況。根據(jù)在線課程資源，給學生布置隨堂練習，檢測學生的掌握程度，并對學生出現(xiàn)的問題進行解決。3.使用在線學習平臺下發(fā)課后作業(yè)。第二課時（項目結構、項目入口文件、單文件組件）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時的知識1.教師對學生們的疑問進行統(tǒng)一答疑。2.回顧上個課時所學習的內(nèi)容，繼續(xù)介紹本課時的內(nèi)容。上節(jié)課主要為大家介紹了VueCLI工具，VueCLI的安裝步驟，VueCLI常用命令的使用方法，利用VueCLI搭建具有完整結構的Vue項目的具體流程。接下來，本節(jié)課將對于Vue項目結構進行剖析，講解項目結構、項目入口文件和單文件組件等內(nèi)容。3.明確學習目標。了解Vue工程項目的項目結構了解項目入口文件的作用和編寫方法掌握單文件組件的編寫方法二、進行重點知識的講解1.教師根據(jù)課件，介紹Vue工程項目的結構，并使用實例進行演示。（1）Vue工程項目結構node_modulespublicsrc.gitignorebabel.config.jsjsconfig.jsonpackage-lock.jsonpackage.jsonREADME.mdvue.config.js（2）使用案例講解Vue工程項目結構2.教師根據(jù)課件，介紹項目入口文件的作用和編寫方法，并使用代碼進行演示。//導入Vue庫文件的createApp函數(shù)import{createApp}from'vue'//導入根組件App.vueimportAppfrom'./App.vue'//創(chuàng)建Vue應用實例，并掛載根組件createApp(App).mount('#app')3.教師根據(jù)課件，介紹單文件組件的編寫方法，并使用代碼進行演示。（1）單文件組件單文件組件（Single-FileComponent，SFC）是一種特殊的文件格式，它將Vue組件的template、script和style這3個部分封裝在一個擴展名為.vue的單個文件中。（2）使用案例講解編寫單文件組件的具體方法。三、歸納總結，布置課后作業(yè)1.回顧上課前的學習目標，對本節(jié)課知識點進行總結。教師帶領學生總結本節(jié)課需要了解的知識點，包括Vue項目結構組成及其作用，項目入口文件作用和編寫方法，單文件組件的構成及其編寫方法，并結合VueCLI工具，能夠構建具有簡單功能的Vue工程項目。2.布置隨堂練習，檢查學生掌握情況。根據(jù)在線課程資源，給學生布置隨堂練習，檢測學生的掌握程度，并對學生出現(xiàn)的問題進行解決。3.使用在線學習平臺下發(fā)課后作業(yè)。第三課時（項目配置文件，新一代構建工具Vite）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時的知識1.教師對學生們的疑問進行統(tǒng)一答疑。2.回顧上個課時所學習的內(nèi)容，繼續(xù)介紹本課時的內(nèi)容。上節(jié)課主要為大家介紹了Vue項目結構組成及其作用，項目入口文件作用和編寫方法，單文件組件的構成及其編寫方法。接下來，本節(jié)課將通過實例講解項目主要配置文件package.json和vue.config.js各配置項作用，以及使用方法，新一代構建工具Vite的使用方法。3.明確學習目標。了解項目配置文件package.json了解項目配置文件vue.config.js熟悉Vite工具構建項目的方法二、進行重點知識的講解1.教師根據(jù)課件，介紹項目配置文件package.json中各配置項的作用，并使用代碼進行演示。（1）package.json作用用于記錄項目的基本信息（如名稱、版本、許可證、啟動項目的方法、聲明依賴包、運行腳本等元數(shù)據(jù)），其配置項目包括：name、version、scripts、dependencies和devDependencies。（2）使用案例講解該配置文件的具體作用。2.教師根據(jù)課件，介紹vue.config.js中各配置項的作用和配置方法，并使用代碼進行演示。（1）vue.config.js作用用于保存與項目部署相關的配置，是一個可選的配置文件（1）actions的作用。配置項目包括：publicPath、outputDir、devServer。（2）使用案例講解該配置文件的具體作用。3.教師根據(jù)課件，介紹Vite工具的特點，并使用代碼進行演示。（1）特點快速的冷啟動即時的HMR真正的按需編譯（2）構建Vue項目構建項目命令npmcreatevite@latest運行項目命令cdvite-project//進入目錄vite-projectnpmruninstall//安裝項目的依賴包npmrundev//啟動開發(fā)服務器三、歸納總結，布置課后作業(yè)1.回顧上課前的學習目標，對本節(jié)課知識點進行總結。教師帶領學生總結本節(jié)課需要了解的知識點，包括項目配置文件package.json、vue.config.js的各配置項目的作用，掌握vue.config.js主要配置項的配置方法，了解Vite工具的應用場景，熟悉Vite工具構建Vue項目的具體流程。2.布置隨堂練習，檢查學生掌握情況。根據(jù)在線課程資源，給學生布置隨堂練習，檢測學生的掌握程度，并對學生出現(xiàn)的問題進行解決。3.使用在線學習平臺下發(fā)課后作業(yè)。第四課時（ElementPlus組件庫）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時的知識1.教師對學生們的疑問進行統(tǒng)一答疑。2.回顧上個課時所學習的內(nèi)容，繼續(xù)介紹本課時的內(nèi)容。上節(jié)課主要為大家介紹了配置文件package.json和vue.config.js各配置項作用，以及使用方法，新一代構建工具Vite的使用方法。接下來，本節(jié)課將介紹ElementPlus組件庫中常用組件的使用方法，以及在Vue項目中應用ElementPlus組件庫的方法。3.明確學習目標。了解ElementPlus的特點ElementPlus組件庫中常用組件的使用方法掌握Vue項目中應用ElementPlus組件庫的方法二、進行重點知識的講解1.教師根據(jù)課件，介紹ElementPlus組件庫及其特點。ElementPlus是一個基于Vue3的UI組件庫，用于制作頁面樣式、設計頁面結構。ElementPlus內(nèi)置了豐富的樣式、布局和組件，可以幫助開發(fā)者快速建成網(wǎng)站原型。具有易用性、靈敏性和可定制性的特點。2.教師根據(jù)課件，介紹在Vue項目中引入ElementPlus組件庫的方法，并使用代碼進行演示。（1）CDN方式導入ElementPlus注冊ElementPlus為全局組件庫使用ElementPlus（2）插件方式安裝ElementPlus導入ElementPlus使用ElementPlus3.教師根據(jù)課件，介紹ElementPlus組件庫中的常用組件，并使用代碼進行演示。（1）基礎組件如el-button等（2）el-dialog（3）el-form三、歸納總結，布置課后作業(yè)1.回顧上課前的學習目標，對本節(jié)課知識點進行總結。教師帶領學生總結本節(jié)課需要了解的ElementPlus組件庫的特點，掌握Vue項目中應用ElementPlus組件庫的方法，掌握ElementPlus組件庫中常用組件的應用場景和使用方法。2.布置隨堂練習，檢查學生掌握情況。根據(jù)在線課程資源，給學生布置隨堂練習，檢測學生的掌握程度，并對學生出現(xiàn)的問題進行解決。3.使用在線學習平臺下發(fā)課后作業(yè)。第五課時（VueCLI在實際項目中的應用）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時的知識1.教師對學生們的疑問進行統(tǒng)一答疑。2.回顧上個課時所學習的內(nèi)容，繼續(xù)介紹本課時的內(nèi)容。上節(jié)課主要為大家介紹了ElementPlus組件庫的特點，Vue項目中應用ElementPlus組件庫的方法，ElementPlus組件庫中常用組件的應用場景和使用方法。接下來，本節(jié)課將通過實際應用項目，來進一步熟悉VueCLI和ElementPlus組件庫的使用方法，并掌握工程化Vue項目的構建和開發(fā)方法。3.明確學習目標。掌握VueCLI和ElementPlus組件庫的使用方法掌握工程化Vue項目的構建和開發(fā)方法二、進行重點知識的講解1.教師根據(jù)課件，介紹項目10——todoMVC的需求描述、實現(xiàn)思路和代碼實現(xiàn)。（1）需求描述todoMVC是一個經(jīng)典案例，其功能是處理待辦事項列表。它要求每在輸入框中輸入一個任務信息并單擊回車鍵，將生成一個新的任務信息列表項。每個任務信息列表項由復選框、“刪除”按鈕組成，單擊“刪除”按鈕可刪除該任務，選中復選框表示任務為完成狀態(tài)。任務信息列表下方顯示已完成任務數(shù)和全部任務數(shù)，單擊“清除已完成任務”按鈕將清除已完成任務信息列表項。（2）實現(xiàn)思路使用VueCLI搭建Vue工程項目todomvc，在項目中引入ElementPlus組件庫來構建頁面。\將頁面布局分割成上、中、下3個部分，分別對應輸入框、任務信息列表和任務信息列表下方內(nèi)容，對應地創(chuàng)建3個組件文件：TodoHeader.vue、TodoList.vue、TodoFooter.vue。TodoHeader.vue所定義的組件TodoHeader用于實現(xiàn)輸入任務信息，TodoList.vue所定義的組件TodoList用于實現(xiàn)任務信息列表的顯示和操作，TodoFooter.vue所定義的組件TodoFooter用于實現(xiàn)任務完成情況統(tǒng)計，以及清除頁面中已完成任務信息列表項。通過根組件App調(diào)用TodoHeader、TodoList