Vue.js3.0從入門到實踐教學(xué)設(shè)計課程名稱：Vue.js3.0從入門到實踐授課年級：授課學(xué)期：教師姓名：年月日課程名稱第9章 Vue工程化計劃學(xué)時6內(nèi)容分析開發(fā)大型項目時，需要考慮項目的組織結(jié)構(gòu)、項目構(gòu)建、部署等問題，這些工作的開發(fā)成本較高，不利于提高項目開發(fā)效率。為此，使用Vue提供的一整套完整的流程進(jìn)行開發(fā)是非常適合的，VueCLI和Vite就是基于Vue進(jìn)行快速項目開發(fā)的工具。本章重點介紹VueCLI、Vite、Element-Plus組件庫的使用，通過學(xué)習(xí)本章內(nèi)容可極大地提升項目的開發(fā)效率。教學(xué)目標(biāo)與教學(xué)要求【知識目標(biāo)】掌握VueCLI工具的安裝與使用掌握VueCLI中圖形化工具的用法了解新一代前端構(gòu)建工具Vite的使用了解Element-Plus組件庫的使用【技能目標(biāo)】能夠正確安裝與使用VueCLI工具能夠正確使用VueCLI中的圖形化工具能夠使用ElementPlus重構(gòu)詩歌展示頁面【育人目標(biāo)】培養(yǎng)學(xué)生的社會責(zé)任感和使命感，使其能夠運用技術(shù)為社會做出積極的貢獻(xiàn)。培養(yǎng)學(xué)生的團(tuán)隊協(xié)作精神和溝通能力，使其能夠在團(tuán)隊中發(fā)揮自己的優(yōu)勢并幫助他人。教學(xué)重點VueCLI的環(huán)境配置安裝VueCLI使用VueCLI創(chuàng)建項目項目結(jié)構(gòu)分析實驗：詩歌展示頁面新一代前端構(gòu)建工具Vite安裝ElementPlus使用ElementPlus組件實驗：使用ElementPlus重構(gòu)詩歌展示頁面實訓(xùn)：物流公司管理頁面教學(xué)難點實驗：詩歌展示頁面實驗：使用ElementPlus重構(gòu)詩歌展示頁面實訓(xùn)：物流公司管理頁面教學(xué)方式課堂講解配合PPT演示教學(xué)過程第一、二課時（VueCLI簡介、VueCLI的環(huán)境配置、安裝VueCLI、使用VueCLI創(chuàng)建項目、項目結(jié)構(gòu)分析、實驗：詩歌展示頁面）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的VueCLI簡介、VueCLI的環(huán)境配置、安裝VueCLI、使用VueCLI創(chuàng)建項目、項目結(jié)構(gòu)分析、實驗：詩歌展示頁面等內(nèi)容。明確學(xué)習(xí)目標(biāo)了解VueCLI中包含的3個獨立部分掌握VueCLI的環(huán)境配置方式掌握VueCLI的安裝方式掌握使用VueCLI創(chuàng)建項目的方式理解項目結(jié)構(gòu)分析掌握詩歌展示頁面的實現(xiàn)方式知識講解知識點1-VueCLI簡介VueCLI中主要包含以下3個獨立的部分。CLICLI(@vue/cli)是一個全局安裝的npm包，提供了終端里的vue命令（如vuecreate、vueserve、vueui）。它可以通過vuecreate命令快速搭建一個新項目，通過vueserve命令構(gòu)建原型或者通過vueui命令啟動Vue的圖形化工具。CLI服務(wù)CLI服務(wù)(@vue/cli-service)是一個開發(fā)環(huán)境依賴，屬于一個npm包，局部安裝在每個@vue/cli創(chuàng)建的項目中。CLI服務(wù)是構(gòu)建于Webpack和Webpack-dev-server之上的。CLI插件CLI插件是向Vue項目提供可選功能的npm包，例如Babel/TypeScript轉(zhuǎn)譯、ESLint集成、單元測試和end-to-end測試等。VueCLI插件的名字以@vue/cli-plugin-(內(nèi)建插件)或vue-cli-plugin-(社區(qū)插件)開頭，非常容易使用。知識點2-VueCLI的環(huán)境配置Node.js的安裝首先打開Node.js的官方網(wǎng)站。下載推薦版的Node.js。雙擊node-v18.15.0-x64.msi文件，彈出歡迎界面。進(jìn)入許可協(xié)議界面。進(jìn)入設(shè)置安裝路徑界面。進(jìn)入自定義設(shè)置界面。進(jìn)入本機(jī)模塊設(shè)置工具界面。進(jìn)入準(zhǔn)備安裝界面。開始安裝并進(jìn)入安裝進(jìn)度界面。進(jìn)入安裝完成界面。環(huán)境檢查在運行對話框中輸入cmd。輸入“node-v”命令，按下回車鍵。若出現(xiàn)Node對應(yīng)的版本號，則說明Node安裝成功。輸入“npm-v”命令。若出現(xiàn)NPM對應(yīng)的版本號，則說明NPM安裝成功。知識點3-安裝VueCLI讀者可選擇以任意一個命令來安裝VueCLI，具體命令如下所示。npmintsall-g@vue/cli或者yarnglobaladd@vue/cli此處選擇“npmintsall-g@vue/cli”命令進(jìn)行安裝，在DOS系統(tǒng)窗口中輸入此命令，即可安裝VueCLI，檢查NPM版本如下圖所示。至此，已完成VueCLI的環(huán)境配置與安裝。知識點4-使用VueCLI創(chuàng)建項目1. 命令創(chuàng)建例如在D盤的Vue3文件夾中創(chuàng)建一個名為myproject項目，具體步驟如下所示。在指定項目路徑中打開DOS系統(tǒng)窗口。輸入“vuecreatemyprojrct”命令并按下回車鍵，進(jìn)行項目創(chuàng)建，隨即會提示選擇配置方式。選擇Vue3默認(rèn)配置方式、Vue2默認(rèn)配置方式或手動配置方式。項目創(chuàng)建完成后，會提示啟動項目的操作步驟。在當(dāng)前命令行中輸入“npmrunserve”命令啟動項目。輸入“http://localhost:8080/”或“7:8080/”即可在瀏覽器中訪問項目。2.圖形化工具創(chuàng)建項目使用圖形化工具創(chuàng)建和管理項目，依賴于“vueui”命令。例如在D盤的Vue3文件夾中創(chuàng)建一個名為myproject項目，具體步驟如下所示。在DOS系統(tǒng)窗口的命令行中輸入“vueui”命令，按下回車鍵，顯示圖形化工具啟動過程。圖形化工具啟動成功，會在本地瀏覽器中打開一個Vue項目管理器頁面。顯示創(chuàng)建項目的路徑。單擊“在此創(chuàng)建新項目”按鈕，會進(jìn)入項目的詳情配置頁面，即可輸入項目名稱myproject，按需配置選項。根據(jù)需求選擇一套預(yù)設(shè)方案即可，此處選擇第一套預(yù)設(shè)方案。單擊“創(chuàng)建項目”按鈕，開始創(chuàng)建項目，顯示創(chuàng)建過程。稍等片刻后，項目創(chuàng)建成功，即可啟動項目。知識點5-項目結(jié)構(gòu)分析項目的目錄結(jié)構(gòu)如下圖所示。目錄結(jié)構(gòu)解析App.vuemain.jsindex.html關(guān)鍵文件間的傳遞關(guān)系圖知識點6-實驗：詩歌展示頁面詩歌展示頁面結(jié)構(gòu)簡圖如下圖所示。詩歌展示頁面的代碼實現(xiàn)：（1）創(chuàng)建一個名為“myproject”的Vue項目，在新建項目的components文件夾下，新建一個名為Poems的單文件組件，該組件的后綴名為“.vue”。（2）在App組件中使用import語句引入Poems組件，使用components選項注冊Poems組件。在App組件中定義一個詩歌信息數(shù)組poemList，并使用生命周期函數(shù)將poemList數(shù)組內(nèi)第一條信息默認(rèn)保存在currentVerse對象中。（3）在setup()函數(shù)中定義一個getCurrentVerse()方法。當(dāng)單擊詩歌列表項時，獲取到該項信息并保存至currentVerse對象中。（4）在<Poems>標(biāo)簽上，使用v-bind指令將currentVerse對象保存的信息傳遞給Poems組件。Poems組件通過props選項接收App組件傳遞過來的數(shù)據(jù)，即content，并將content中的數(shù)據(jù)渲染在template模板中，具體代碼可參考教學(xué)PPT或教材。知識鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第三、四課時（新一代前端構(gòu)建工具Vite、安裝ElementPlus、使用ElementPlus組件、實驗：使用ElementPlus重構(gòu)詩歌展示頁面、實訓(xùn)：物流公司管理頁面）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的新一代前端構(gòu)建工具Vite、安裝ElementPlus、使用ElementPlus組件、實驗：使用ElementPlus重構(gòu)詩歌展示頁面、實訓(xùn)：物流公司管理頁面等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握構(gòu)建工具Vite的使用方式掌握ElementPlus組件的安裝與使用掌握使用ElementPlus重構(gòu)詩歌展示頁面的方式掌握物流公司管理頁面的實現(xiàn)方式知識講解知識點1-新一代前端構(gòu)建工具ViteVite的安裝與使用在D盤的Vue文件夾中，基于Vite的npm命令創(chuàng)建一個名為vite_project的項目，演示Vite的安裝與使用，具體步驟如下所示。在指定項目路徑中打開DOS系統(tǒng)窗口。在命令行中輸入vite_project，創(chuàng)建一個名為vite_project的項目。使用方向鍵選擇Vue作為本項目的基礎(chǔ)框架。使用方向鍵選擇JavaScript作為本項目的開發(fā)語言。項目創(chuàng)建完成后，會提示啟動項目的操作步驟。輸入“cdvite_project”命令，進(jìn)入vite_project項目。輸入“npminstall”命令安裝項目依賴。輸入“npmrundev”命令啟動項目，待進(jìn)度加載完成后，項目啟動成功。在瀏覽器中訪問項目。Vite項目目錄結(jié)構(gòu)解析將創(chuàng)建好的項目在VSCode開發(fā)工具中打開，項目的目錄結(jié)構(gòu)如下圖所示。知識點2-安裝ElementPlusCDN方式安裝（1）CDN方式安裝ElementPlus，語法格式如下所示。<head><!--引入樣式--><linkrel="stylesheet"href="http:///element-plus/dist/index.css"/><!--引入組件庫--><scriptsrc="http:///element-plus"></script></head></head>（2）ElementPlus安裝完成后，需要在應(yīng)用程序?qū)嵗袙燧dElementPlus，語法格式如下所示。letinstance=Vue.createApp(App)instance.use(ElementPlus)instance.mount("#Application")NPM方式安裝（1）NMP方式安裝ElementPlus，命令代碼如下所示。npminstallelement-plus--save通過NMP命令安裝ElementPlus后，需要在工程化項目的main.js文件中掛載ElementPlus。（2）在mian.js文件中掛載ElementPlus，語法格式如下所示。import{createApp}from'vue'importElementPlusfrom'element-plus'//引入element-plusimport'element-plus/dist/index.css'//element-plus樣式constapp=createApp(App)app.use(ElementPlus)//掛載ElementPlusapp.mount('#app')知識點3-使用ElementPlus組件在單文件中使用ElementPlus的內(nèi)置組件時，只需要在單文件的template標(biāo)簽中直接引入組件標(biāo)簽即可。在單文件組件中使用ElementPlus的Button按鈕組件，語法格式如下所示。<template><el-row><el-button>默認(rèn)按鈕</el-button><el-buttontype="primary">主要按鈕</el-button><el-buttontype="success">成功按鈕</el-button></el-row></template>需要注意的是，template標(biāo)簽中只能放置一個直接子元素，因此需要使用<div>標(biāo)簽或<el-row>標(biāo)簽對多個直接子元素進(jìn)行包裹。知識點4-實驗：使用ElementPlus重構(gòu)詩歌展示頁面詩歌展示頁面結(jié)構(gòu)簡圖如下圖示。詩歌展示頁面的代碼實現(xiàn)：（1）創(chuàng)建一個名為element_projrct的Vue項目，在該項目的components文件夾下，新建一個名為ElePoems的單文件組件，該組件的后綴名為.vue。（2）在App組件中使用import語句引入ElePoems組件，使用components選項注冊ElePoems組件。（3）在App組件中使用ElementPlus組件庫的Tabs組件，并在<el-tab-pane>標(biāo)簽中遍歷poemList數(shù)組。（4）在<ElePoems>標(biāo)簽上，使用v-bind指令將遍歷的poemList數(shù)組的數(shù)組項傳遞給ElePoems組件。ElePoems組件通過props選項接收App組件傳遞過來的數(shù)據(jù)，即content，并將content中的數(shù)據(jù)渲染在template模板中，具體代碼可參考教學(xué)PPT或教材。知識點5-實訓(xùn)：物流公司管理頁面物流公司管理頁面結(jié)構(gòu)簡圖如下圖所示。實現(xiàn)物流公司管理頁面的具體步驟如下所示。第1步，使用VueCLI創(chuàng)建一個名為“l(fā)ogistics”的Vue項目，在logistics項目的components文件夾下，新建ListHeader組件、LogisticsList組件以及AddForm組件。在根組件中注冊并使用這3個組件。第2步，根組件中引入組合式API，并在此組件的setup()函數(shù)中定義頁面所需數(shù)據(jù)與方法，如tableData對象、dialogFormVisible變量、editFlag變量、editIndex變量、submitForm()方法、changeDialog()方法等，并將根組件中的數(shù)據(jù)與方法按需傳遞給對應(yīng)的組件。第3步，在ListHeader組件中，使用Eleme