第9章Vue工程化9.1VueCLI9.2新一代前端構(gòu)建工具Vite9.3ElementPlus組件庫(kù)9.4實(shí)訓(xùn)：物流公司管理頁(yè)面掌握VueCLI工具的安裝與使用掌握VueCLI中圖形化工具的用法了解新一代前端構(gòu)建工具Vite的使用了解Element-Plus組件庫(kù)的使用引言開發(fā)大型項(xiàng)目時(shí)，需要考慮項(xiàng)目的組織結(jié)構(gòu)、項(xiàng)目構(gòu)建、部署等問題，這些工作的開發(fā)成本較高，不利于提高項(xiàng)目開發(fā)效率。為此，使用Vue提供的一整套完整的流程進(jìn)行開發(fā)是非常適合的，VueCLI和Vite就是基于Vue進(jìn)行快速項(xiàng)目開發(fā)的工具。本章重點(diǎn)介紹VueCLI、Vite、Element-Plus組件庫(kù)的使用，通過學(xué)習(xí)本章內(nèi)容可極大地提升項(xiàng)目的開發(fā)效率。9.1VueCLIVueCLI簡(jiǎn)介

VueCLI的環(huán)境配置安裝VueCLI

使用VueCLI創(chuàng)建項(xiàng)目項(xiàng)目結(jié)構(gòu)分析實(shí)驗(yàn)：詩(shī)歌展示頁(yè)面VueCLI是Vue官方提供的基于Webpack的Vue工具鏈，致力于將Vue生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于默認(rèn)配置實(shí)現(xiàn)平穩(wěn)銜接，這樣就可以使開發(fā)者只專注于開發(fā)應(yīng)用，而不必浪費(fèi)大量時(shí)間去研究項(xiàng)目搭建中的配置問題。VueCLI中主要包含以下3個(gè)獨(dú)立的部分：CLI、CLI服務(wù)、CLI插件9.1VueCLI1.CLICLI(@vue/cli)是一個(gè)全局安裝的npm包，提供了終端里的vue命令。它可以通過vuecreate命令快速搭建一個(gè)新項(xiàng)目，通過vueserve命令構(gòu)建原型或者通過vueui命令啟動(dòng)Vue的圖形化工具。2.CLI服務(wù)CLI服務(wù)是一個(gè)開發(fā)環(huán)境依賴，屬于一個(gè)npm包，局部安裝在每個(gè)@vue/cli創(chuàng)建的項(xiàng)目中。CLI服務(wù)是構(gòu)建于Webpack和Webpack-dev-server之上的。3.CLI插件CLI插件是向Vue項(xiàng)目提供可選功能的npm包，VueCLI插件的名字以@vue/cli-plugin-(內(nèi)建插件)或vue-cli-plugin-(社區(qū)插件)開頭，非常容易使用。9.1.1VueCLI簡(jiǎn)介9.1VueCLI1.Node.js的安裝（1）打開的官方網(wǎng)站，下載、安裝Node.js,檢查其版本9.1.2VueCLI的環(huán)境配置9.1VueCLINode.js自帶NPM可選擇以任意一個(gè)命令來安裝VueCLI，具體命令如下所示。npmintsall-g@vue/cli或者yarnglobaladd@vue/cli此處選擇“npmintsall-g@vue/cli”命令進(jìn)行安裝，在DOS系統(tǒng)窗口中輸入此命令，即可安裝VueCLI，檢查NPM版本，如圖9.1.3安裝VueCLI9.1VueCLI1.命令創(chuàng)建例如在D盤的Vue3文件夾中創(chuàng)建一個(gè)名為myproject項(xiàng)目，具體步驟如下所示。（1）進(jìn)入Vue3文件夾中，將文件夾地址欄內(nèi)容替換為cmd并按下回車鍵，會(huì)在指定項(xiàng)目路徑中打開DOS系統(tǒng)窗口，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI1.命令創(chuàng)建例如在D盤的Vue3文件夾中創(chuàng)建一個(gè)名為myproject項(xiàng)目，具體步驟如下所示。（2）在DOS系統(tǒng)窗口的命令行中輸入“vuecreatemyprojrct”命令并按下回車鍵，進(jìn)行項(xiàng)目創(chuàng)建，隨即會(huì)提示選擇配置方式，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI1.命令創(chuàng)建例如在D盤的Vue3文件夾中創(chuàng)建一個(gè)名為myproject項(xiàng)目，具體步驟如下所示。（3）在（2）步驟中，可以選擇Vue3默認(rèn)配置方式、Vue2默認(rèn)配置方式或手動(dòng)配置方式。默認(rèn)配置非常適合快速創(chuàng)建一個(gè)新項(xiàng)目的原型，而手動(dòng)設(shè)置則提供了更多的選項(xiàng)。此處使用方向鍵選擇Vue3默認(rèn)配置方式并按下回車鍵，即可創(chuàng)建myproject項(xiàng)目，并顯示創(chuàng)建過程，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI1.命令創(chuàng)建例如在D盤的Vue3文件夾中創(chuàng)建一個(gè)名為myproject項(xiàng)目，具體步驟如下所示。（4）項(xiàng)目創(chuàng)建完成后，會(huì)提示啟動(dòng)項(xiàng)目的操作步驟，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI1.命令創(chuàng)建例如在D盤的Vue3文件夾中創(chuàng)建一個(gè)名為myproject項(xiàng)目，具體步驟如下所示。（5）在命令行中，輸入“cdmyproject”命令，即可進(jìn)入myproject項(xiàng)目目錄。在當(dāng)前命令行中輸入“npmrunserve”命令啟動(dòng)項(xiàng)目，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI1.命令創(chuàng)建例如在D盤的Vue3文件夾中創(chuàng)建一個(gè)名為myproject項(xiàng)目，具體步驟如下所示。（6）項(xiàng)目啟動(dòng)后，會(huì)在DOS系統(tǒng)窗口中顯示項(xiàng)目的IP地址和端口號(hào)，只需要在瀏覽器地址欄中輸入“http://localhost:8080/”或“7:8080/”即可在瀏覽器中訪問項(xiàng)目，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI1.命令創(chuàng)建例如在D盤的Vue3文件夾中創(chuàng)建一個(gè)名為myproject項(xiàng)目，具體步驟如下所示。（5）在命令行中，輸入“cdmyproject”命令，即可進(jìn)入myproject項(xiàng)目目錄。在當(dāng)前命令行中輸入“npmrunserve”命令啟動(dòng)項(xiàng)目，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI2.圖形化工具創(chuàng)建項(xiàng)目使用圖形化工具創(chuàng)建和管理項(xiàng)目，依賴于“vueui”命令。例如在D盤的Vue3文件夾中創(chuàng)建一個(gè)名為myproject項(xiàng)目，具體步驟如下所示。（1）在DOS系統(tǒng)窗口的命令行中輸入“vueui”命令，按下回車鍵，顯示圖形化工具啟動(dòng)過程，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI2.圖形化工具創(chuàng)建項(xiàng)目（2）圖形化工具啟動(dòng)成功，會(huì)在本地瀏覽器中打開一個(gè)Vue項(xiàng)目管理器頁(yè)面，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI2.圖形化工具創(chuàng)建項(xiàng)目（3）單擊“創(chuàng)建”按鈕，會(huì)顯示創(chuàng)建項(xiàng)目的路徑，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI2.圖形化工具創(chuàng)建項(xiàng)目（4）進(jìn)入項(xiàng)目的詳情配置頁(yè)面，即可輸入項(xiàng)目名稱myproject，按需配置選項(xiàng)，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI2.圖形化工具創(chuàng)建項(xiàng)目（5）根據(jù)需求選擇一套預(yù)設(shè)方案即可，此處選擇第一套預(yù)設(shè)方案，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI2.圖形化工具創(chuàng)建項(xiàng)目（6）單擊“創(chuàng)建項(xiàng)目”按鈕，開始創(chuàng)建項(xiàng)目，顯示創(chuàng)建過程，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI2.圖形化工具創(chuàng)建項(xiàng)目（7）項(xiàng)目創(chuàng)建成功，即可啟動(dòng)項(xiàng)目。首先在側(cè)邊欄中單擊“任務(wù)”菜單，選擇serve選項(xiàng)，進(jìn)入serve頁(yè)面；然后在serve頁(yè)面中單擊“運(yùn)行”按鈕和“啟動(dòng)app”按鈕，即可啟動(dòng)當(dāng)前項(xiàng)目，如圖9.1.4使用VueCLI創(chuàng)建項(xiàng)目9.1VueCLI將創(chuàng)建好的項(xiàng)目在VSCode開發(fā)工具中打開，項(xiàng)目的目錄結(jié)構(gòu)如圖9.1.5項(xiàng)目結(jié)構(gòu)分析9.1VueCLI1.目錄結(jié)構(gòu)解析由VueCLI所創(chuàng)建的項(xiàng)目，其目錄結(jié)構(gòu)、各文件夾和文件的說明9.1VueCLI9.1.5項(xiàng)目結(jié)構(gòu)分析2.App.vue在目錄結(jié)構(gòu)的src目錄下有一個(gè)很重要的文件，就是項(xiàng)目的根組件App.vue文件，該文件是一個(gè)典型的單文件組件，即將組件定義在單獨(dú)的文件中，以便于開發(fā)和維護(hù)。具體代碼9.1VueCLI9.1.5項(xiàng)目結(jié)構(gòu)分析<template>//模板代碼

<div><imgalt="Vuelogo"src="./assets/logo.png"><HelloWorldmsg="WelcometoYourVue.jsApp"></HelloWorld></div></template><script>//組件代碼importHelloWorldfrom'./components/HelloWorld.vue'exportdefault{name:'App',components:{HelloWorld}}</script><style></style>//CSS樣式規(guī)則3.main.jsmain.js文件為整個(gè)項(xiàng)目的入口文件，主要作用是加載各種公共組件以及項(xiàng)目所需的插件，創(chuàng)建并初始化根組件實(shí)例，具體代碼9.1VueCLI9.1.5項(xiàng)目結(jié)構(gòu)分析import{createApp}from'vue'importAppfrom'./App.vue'createApp(App).mount('#app')4.index.html在public目錄下的index.html文件是項(xiàng)目的主單頁(yè)面應(yīng)用（SPA)。在文件中，存在一個(gè)id名為app的<div>元素，main.js創(chuàng)建的根組件實(shí)例會(huì)動(dòng)態(tài)掛載到該元素上，具體代碼9.1VueCLI9.1.5項(xiàng)目結(jié)構(gòu)分析<htmllang=""><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="icon"href="<%=BASE_URL%>favicon.ico"><title><%=htmlWebpackPlugin.options.title%></title></head><body><noscript><strong>We'resorrybut<%=htmlWebpackPlugin.options.title%>doesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue.</strong></noscript><divid="app"></div><!--builtfileswillbeautoinjected--></body></html>5.關(guān)鍵文件間的傳遞關(guān)系圖HelloWorld.vue、App.vue、main.js以及index.html文件之間的傳遞關(guān)系如圖9.1VueCLI9.1.5項(xiàng)目結(jié)構(gòu)分析在右圖中，HelloWorld.vue是子組件，App.vue是根組件，根組件引入HelloWorld組件并使用該組件標(biāo)簽。main.js是入口文件，main.js生成根組件實(shí)例，并將根組件實(shí)例掛載到index.html中id名為app的<div>元素上。1.實(shí)驗(yàn)描述本案例是一個(gè)詩(shī)歌展示頁(yè)面，其具體實(shí)現(xiàn)依賴于Vue的VueCLI、事件綁定、組件注冊(cè)、組件通信和組合式API。詩(shī)歌展示頁(yè)面由詩(shī)歌名稱列表和內(nèi)容面板組成，詩(shī)歌展示頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如圖9.1VueCLI9.1.6實(shí)驗(yàn)：詩(shī)歌展示頁(yè)面2.代碼實(shí)現(xiàn)（1）根據(jù)9.1.4節(jié)中的內(nèi)容，創(chuàng)建一個(gè)名為“myproject”的Vue項(xiàng)目，在新建項(xiàng)目的components文件夾下，新建一個(gè)名為Poems的單文件組件，該組件的后綴名為“.vue”。（2）在App組件中使用import語(yǔ)句引入Poems組件，使用components選項(xiàng)注冊(cè)Poems組件。在App組件中定義一個(gè)詩(shī)歌信息數(shù)組poemList，并使用生命周期函數(shù)將poemList數(shù)組內(nèi)第一條信息默認(rèn)保存在currentVerse對(duì)象中。（3）在setup()函數(shù)中定義一個(gè)getCurrentVerse()方法。當(dāng)單擊詩(shī)歌列表項(xiàng)時(shí)，獲取到該項(xiàng)信息并保存至currentVerse對(duì)象中。9.1VueCLI9.1.6實(shí)驗(yàn)：詩(shī)歌展示頁(yè)面2.代碼實(shí)現(xiàn)（4）在<Poems>標(biāo)簽上，使用v-bind指令將currentVerse對(duì)象保存的信息傳遞給Poems組件。Poems組件通過props選項(xiàng)接收App組件傳遞過來的數(shù)據(jù)，即content，并將content中的數(shù)據(jù)渲染在template模板中，具體代碼如例9-19.1VueCLI9.1.6實(shí)驗(yàn)：詩(shī)歌展示頁(yè)面例9-1具體代碼見源碼包/ch09/myproject.html文件//Poems.vue<template><div><h3>{{content.title}}</h3><p>{{content.dynasty}}-{{content.author}}</p><pclass="verse"v-for="(verse,index)incontent.verseList":key="index">{{verse}}</p></div></template><script>exportdefault{name:'Poems',props:['content'],setup(props){console.log(props.content);}}</script><style>.verse{width:200px;}</style>2.代碼實(shí)現(xiàn)在App組件中引入的Poems組件具體代碼9.1VueCLI9.1.6實(shí)驗(yàn)：詩(shī)歌展示頁(yè)面例9-1在App組件中，可使用@符號(hào)替換導(dǎo)入語(yǔ)句中的src目錄，簡(jiǎn)化路徑地址的訪問，即簡(jiǎn)化為importPoemsfrom"@/components/Poems.vue"。9.2新一代前端構(gòu)建工具ViteVite是Vue作者開發(fā)的一種新型前端構(gòu)建工具，它在法語(yǔ)中意為“快速的”，即無(wú)需讀者做任何額外的配置就可以完成構(gòu)建工作。Vite基于原生的ES模塊提供了豐富的內(nèi)建功能，它利用瀏覽器解析import并在服務(wù)器端按需對(duì)其進(jìn)行編譯，并且跳過打包環(huán)節(jié)，因此Vite的服務(wù)器啟動(dòng)速度非?？?。Vite使用Rollup打包項(xiàng)目代碼，輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源，能夠顯著提升前端開發(fā)體驗(yàn)。9.2新一代前端構(gòu)建工具Vite1.Vite的安裝與使用在D盤的Vue文件夾中，基于Vite的npm命令創(chuàng)建一個(gè)名為vite_project的項(xiàng)目，演示Vite的安裝與使用，具體步驟如下所示。（1）進(jìn)入Vue3文件夾中，將文件夾地址欄內(nèi)容替換為cmd并按下回車鍵，即可在指定項(xiàng)目路徑中打開DOS系統(tǒng)窗口，如圖9.2新一代前端構(gòu)建工具Vite1.Vite的安裝與使用（2）在DOS系統(tǒng)窗口的命令行中輸入“npmcreatevite@latest”命令，該命令會(huì)自動(dòng)安裝Vite及相關(guān)依賴并創(chuàng)建基于Vite的項(xiàng)目模板，無(wú)需另行安裝Vite。隨后，在該命令后按下回車鍵，會(huì)提示定義項(xiàng)目名稱，在命令行中輸入vite_project，創(chuàng)建一個(gè)名為vite_project的項(xiàng)目，如圖9.2新一代前端構(gòu)建工具Vite1.Vite的安裝與使用（3）完成步驟（2）后，確定項(xiàng)目名稱為vite_project。隨即會(huì)提示選擇本項(xiàng)目所使用的框架，此處使用方向鍵選擇Vue作為本項(xiàng)目的基礎(chǔ)框架，如圖9.2新一代前端構(gòu)建工具Vite1.Vite的安裝與使用（4）完成步驟（3）后，隨即會(huì)提示選擇項(xiàng)目的開發(fā)語(yǔ)言，此處使用方向鍵選擇JavaScript作為本項(xiàng)目的開發(fā)語(yǔ)言，如圖9.2新一代前端構(gòu)建工具Vite1.Vite的安裝與使用（5）完成步驟（4）后，即可創(chuàng)建vite_project項(xiàng)目。項(xiàng)目創(chuàng)建完成后，會(huì)提示啟動(dòng)項(xiàng)目的操作步驟，如圖9.2新一代前端構(gòu)建工具Vite1.Vite的安裝與使用（6）在命令行中，輸入“cdvite_project”命令，進(jìn)入vite_project項(xiàng)目。輸入“npminstall”命令安裝項(xiàng)目依賴。輸入“npmrundev”命令啟動(dòng)項(xiàng)目，待進(jìn)度加載完成后，項(xiàng)目啟動(dòng)成功，如圖9.2新一代前端構(gòu)建工具Vite1.Vite的安裝與使用（7）項(xiàng)目啟動(dòng)成功后，會(huì)在DOS系統(tǒng)窗口中顯示項(xiàng)目的IP地址和端口號(hào)，只需要在瀏覽器地址欄中輸入“7:3000/”或“8:3000/”或“http://localhost:3000/”即可在瀏覽器中訪問項(xiàng)目，如圖9.2新一代前端構(gòu)建工具Vite2.Vite項(xiàng)目目錄結(jié)構(gòu)解析將創(chuàng)建好的項(xiàng)目在VSCode開發(fā)工具中打開，項(xiàng)目的目錄結(jié)構(gòu)如圖9.2新一代前端構(gòu)建工具Vite2.Vite項(xiàng)目目錄結(jié)構(gòu)解析Vite工具創(chuàng)建的項(xiàng)目的目錄結(jié)構(gòu)、各文件夾和文件的用途詳細(xì)說明9.2新一代前端構(gòu)建工具Vite9.3ElementPlus組件庫(kù)安裝ElementPlus使用ElementPlus組件實(shí)驗(yàn)：使用ElementPlus重構(gòu)詩(shī)歌展示頁(yè)面在實(shí)際開發(fā)中，需要結(jié)合各種第三方組件庫(kù)來完成項(xiàng)目，使用組件庫(kù)可以降低頁(yè)面的開發(fā)成本，提升開發(fā)效率。但是伴隨著Vue3的出現(xiàn)，很多第三方組件庫(kù)，如ElementUI、AntDesignVue等，出現(xiàn)了無(wú)法兼容Vue3新特性的問題，而ElementPlus組件庫(kù)就是為了解決這個(gè)問題而誕生的。本節(jié)將圍繞ElementPlus的安裝與使用進(jìn)行介紹。9.3ElementPlus組件庫(kù)1.CDN方式安裝在開發(fā)簡(jiǎn)單的靜態(tài)頁(yè)面時(shí)，可以使用CDN的方式引入Vue框架。同樣地，也可以使用CDN方式來引入ElementPlus，讀者可以在<head>標(biāo)簽內(nèi)以瀏覽器HTML標(biāo)簽的方式引入ElementPlus的樣式與組件庫(kù)。（1）CDN方式安裝ElementPlus，語(yǔ)法格式9.3.1安裝ElementPlus<head><!--引入樣式--><linkrel="stylesheet"href="http:///element-plus/dist/index.css"/><!--引入組件庫(kù)--><scriptsrc="http:///element-plus"></script></head></head>9.3ElementPlus組件庫(kù)1.CDN方式安裝（2）ElementPlus安裝完成后，需要在應(yīng)用程序?qū)嵗袙燧dElementPlus，語(yǔ)法格式9.3.1安裝ElementPlusletinstance=Vue.createApp(App)instance.use(ElementPlus)instance.mount("#Application")9.3ElementPlus組件庫(kù)上述語(yǔ)法格式中，調(diào)用createApp()方法創(chuàng)建應(yīng)用程序?qū)嵗⑼ㄟ^應(yīng)用程序?qū)嵗膗se()方法來掛載ElementPlus模塊，隨后便可在模板中直接使用ElementPlus中內(nèi)置的組件。2.NPM方式安裝在使用VueCLI工具創(chuàng)建的工程化項(xiàng)目中，可以使用NPM包管理工具執(zhí)行ElementPlus的安裝命令，直接安裝ElementPlus。（1）NMP方式安裝ElementPlus，命令代碼9.3.1安裝ElementPlusnpminstallelement-plus--save9.3ElementPlus組件庫(kù)通過NMP命令安裝ElementPlus后，需要在工程化項(xiàng)目的main.js文件中掛載ElementPlus。2.NPM方式安裝（2）在mian.js文件中掛載ElementPlus，語(yǔ)法格式9.3.1安裝ElementPlusimport{createApp}from'vue'importElementPlusfrom'element-plus'//引入element-plusimport'element-plus/dist/index.css'//element-plus樣式constapp=createApp(App)app.use(ElementPlus)//掛載ElementPlusapp.mount('#app')9.3ElementPlus組件庫(kù)在單文件中使用ElementPlus的內(nèi)置組件時(shí)，只需要在單文件的template標(biāo)簽中直接引入組件標(biāo)簽即可。如使用ElementPlus的Button按鈕組件，語(yǔ)法格式9.3.2使用ElementPlus組件<template><el-row><el-button>默認(rèn)按鈕</el-button><el-buttontype="primary">主要按鈕</el-button><el-buttontype="success">成功按鈕</el-button></el-row></template>9.3ElementPlus組件庫(kù)template標(biāo)簽中只能放置一個(gè)直接子元素，因此需要使用<div>標(biāo)簽或<el-row>標(biāo)簽對(duì)多個(gè)直接子元素進(jìn)行包裹。1.實(shí)驗(yàn)描述在9.1.6節(jié)中，實(shí)現(xiàn)了1個(gè)詩(shī)歌展示頁(yè)面，本節(jié)將使用ElementPlus中的Tabs組件快速重構(gòu)1個(gè)詩(shī)歌展示頁(yè)面，詩(shī)歌展示頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如圖9.3.3實(shí)驗(yàn)：使用ElementPlus重構(gòu)詩(shī)歌展示頁(yè)面9.3ElementPlus組件庫(kù)2.代碼實(shí)現(xiàn)（1）創(chuàng)建一個(gè)名為element_projrct的Vue項(xiàng)目，在該項(xiàng)目的components文件夾下，新建一個(gè)名為ElePoems的單文件組件，該組件的后綴名為.vue。（2）在App組件中使用import語(yǔ)句引入ElePoems組件，使用components選項(xiàng)注冊(cè)ElePoems組件。（3）在App組件中使用ElementPlus組件庫(kù)的Tabs組件，并在<el-tab-pane>標(biāo)簽中遍歷poemList數(shù)組。（4）在<ElePoems>標(biāo)簽上，使用v-bind指令將遍歷的poemList數(shù)組的數(shù)組項(xiàng)傳遞給ElePoems組件。ElePoems組件通過props選項(xiàng)接收App組件傳遞過來的數(shù)據(jù)，即content，并將content中的數(shù)據(jù)渲染在template模板中，具體代碼如例9-29.3.3實(shí)驗(yàn)：使用ElementPlus重構(gòu)詩(shī)歌展示頁(yè)面9.3ElementPlus組件庫(kù)例9-2具體代碼見源碼包/ch09/element_project.html文件9.4實(shí)訓(xùn)：物流公司管理頁(yè)面物流公司管理頁(yè)面結(jié)構(gòu)簡(jiǎn)圖實(shí)現(xiàn)物流公司管理頁(yè)面效果本案例將制作一個(gè)物流公司管理頁(yè)面，頁(yè)面主要由根組件（App組件）、ListHeader組件、LogisticsList組件、AddForm組件以及ElementPlus內(nèi)置的Dialog組件組成。根組件內(nèi)嵌套ListHeader組件及LogisticsList組件。其中，ListHeader組件可用于展示頁(yè)面主題，放置“添加公司”的按鈕。LogisticsList組件可用于渲染全部公司信息。物流公司管理頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如圖9.4實(shí)訓(xùn)：物流公司管理頁(yè)面9.4.1物流公司管理頁(yè)面結(jié)構(gòu)簡(jiǎn)圖實(shí)現(xiàn)物流公司管理頁(yè)面的具體步驟如下所示。第1步，使用VueCLI創(chuàng)建一個(gè)名為“l(fā)ogistics”的Vue項(xiàng)目，在logistics項(xiàng)目的components文