4.1項(xiàng)目初始化前端框架技術(shù)與應(yīng)用FrontendFrameworks項(xiàng)目工程化Vue.js的開發(fā)集成方案有兩種：腳本直接引入和工程化構(gòu)建。在前三章中，我們學(xué)習(xí)了如何使用腳本直接引入的方式開發(fā)Vue應(yīng)用程序，適合快速上手和小型項(xiàng)目。然而，對(duì)于復(fù)雜的Vue應(yīng)用程序，僅掌握Vue本身的語(yǔ)法是不夠的。前言為了提高開發(fā)效率和代碼的可維護(hù)性，我們需要使用工具和框架來(lái)構(gòu)建和管理項(xiàng)目。這包括：項(xiàng)目初始化：使用VueCLI或Vite等腳手架工具來(lái)創(chuàng)建項(xiàng)目，快速搭建項(xiàng)目結(jié)構(gòu)，配置構(gòu)建工具（如Webpack或Vite）。模塊化開發(fā)：采用單文件組件（SFC）模式，利用VueRouter管理路由，使用Vuex或Pinia等狀態(tài)管理庫(kù)。代碼優(yōu)化：通過(guò)代碼分割等功能優(yōu)化性能，使用ESLint等工具保證代碼質(zhì)量，編寫測(cè)試確保應(yīng)用正確性。打包與部署：配置構(gòu)建工具生成可部署的應(yīng)用程序包，選擇合適的部署方式，并設(shè)置CI/CD流程實(shí)現(xiàn)自動(dòng)化部署。通過(guò)工程化構(gòu)建，我們可以充分利用Vue生態(tài)系統(tǒng)中的工具和最佳實(shí)踐。在接下來(lái)的章節(jié)中，我們將深入探討Vue工程化構(gòu)建的各個(gè)方面，包括項(xiàng)目腳手架、構(gòu)建工具、模塊化開發(fā)、代碼優(yōu)化和部署策略等，幫助你高效開發(fā)Vue應(yīng)用程序。前言1包管理工具2腳手架3創(chuàng)建項(xiàng)目4前端UI框架安裝目錄|CONTENT1包管理工具采用構(gòu)建項(xiàng)目的方式開發(fā)Vue應(yīng)用程序，我們需要配置必要的環(huán)境和安裝工具來(lái)創(chuàng)建項(xiàng)目，例如配置Node.js環(huán)境，安裝包管理工具、腳手架及構(gòu)建工具等。包管理工具用于管理項(xiàng)目中的第三方庫(kù)和工具，幫助快速安裝、升級(jí)和卸載依賴，提升開發(fā)效率和項(xiàng)目維護(hù)性。目前主流的JavaScript包管理工具是NPM和Yarn。包管理工具1包管理工具包管理工具NPMNPM(NodePackageManager)是Node.js默認(rèn)的包管理工具，廣泛用于JavaScript生態(tài)系統(tǒng)。它提供豐富的命令行工具，用于高效管理依賴的安裝、升級(jí)和版本控制。NPM可以管理本地項(xiàng)目依賴和全局安裝的工具。通過(guò)package.json文件，NPM可以自動(dòng)安裝項(xiàng)目所需的所有模塊，并允許開發(fā)者指定依賴版本范圍，確保模塊更新不會(huì)破壞項(xiàng)目。NPM的安裝NPM是Vue的默認(rèn)包管理工具，與Vue構(gòu)建工具深度集成。NPM隨Node.js一起安裝，安裝Node.js后，NPM會(huì)自動(dòng)配置好，無(wú)需單獨(dú)安裝。有了NPM后，我們才能創(chuàng)建Vue的項(xiàng)目。1包管理工具NPM的安裝打開Node.js的中文官方網(wǎng)站，點(diǎn)擊“下載Node.js(LTS)“按鈕，即可開始下載安裝包，按照默認(rèn)配置進(jìn)行安裝即可。待安裝完成后，同時(shí)按win+R鍵打開運(yùn)行窗口，輸入cmd，點(diǎn)擊確定，打開Windows系統(tǒng)的命令行工具命令提示符（CMD）。依次在其中輸入命令node-v和npm-v，若返回相應(yīng)的版本號(hào)，說(shuō)明安裝成功。1231包管理工具NPM的常用命令命令作用npm-v通過(guò)查看版本，看NPM是否安裝成功npm-h查看命令提示npminstall在項(xiàng)目node_modules目錄下安裝package.json文件中列出的所有依賴npminstall-g<packageName>全局安裝指定的依賴包（該依賴可以直接在命令行里使用）npminstall<packageName>在項(xiàng)目中安裝指定的依賴包（寫入package.json文件中的dependencies節(jié)點(diǎn)）npminstall--save-dev<packageName>在項(xiàng)目中安裝指定的依賴包（寫入package.json文件中的devDependencies節(jié)點(diǎn)，僅在開發(fā)環(huán)境中使用）npmuninstall<packageName>刪除項(xiàng)目中指定的依賴包npmlist-g查看所有全局安裝的模塊npmlistvue查看Vue包及其直接依賴的包名和版本號(hào)npminstall-gnpm@<version>可以更新NPM到某個(gè)指定版本npmrun<script>運(yùn)行某腳本<packageName>后面可加版本號(hào)，安裝指定版本的依賴，格式為：<packageNamec>@<version>1包管理工具包管理工具YarnYarn是由Facebook開發(fā)的JavaScript包管理工具，旨在提升包管理的性能和可靠性。它在安裝依賴、鎖定依賴版本和緩存依賴等方面進(jìn)行了優(yōu)化，通常比NPM提供更快的安裝速度。Yarn提供了與NPM兼容的命令行界面，開發(fā)者可以無(wú)縫切換使用。在大型Vue.js項(xiàng)目中，尤其是在網(wǎng)絡(luò)環(huán)境較差的情況下，Yarn可能是更好的選擇。Yarn的安裝Yarn可以通過(guò)NPM安裝。如果已經(jīng)安裝了NPM，安裝Yarn只需在命令行中運(yùn)行以下命令：npminstall-gyarn安裝完成后，可以通過(guò)以下命令驗(yàn)證Yarn是否安裝成功：yarn-version如果命令返回Yarn的版本號(hào)，說(shuō)明安裝成功。1包管理工具Yarn的常用命令命令作用yarn-h查看命令提示yarninit新建一個(gè)package.jsonyarninstall在項(xiàng)目node_modules目錄下安裝package.json文件中列出的所有依賴yarnadd<packageName>在項(xiàng)目中安裝指定的依賴包（寫入package.json文件中的dependencies節(jié)點(diǎn)）yarnadd--dev<packageName>在項(xiàng)目中安裝指定的依賴包（寫入package.json文件中的devDependencies節(jié)點(diǎn)，僅在開發(fā)環(huán)境中使用）yarnremove<packageName>刪除指定的依賴包yarnupgrade<packageName>更新指定的依賴包yarnrun<script>運(yùn)行某腳本無(wú)論選擇NPM還是Yarn，熟練掌握這些包管理工具的使用，能夠幫助我們更高效地管理項(xiàng)目依賴，提高開發(fā)效率和代碼質(zhì)量。2腳手架安裝包管理工具后，下一步是安裝腳手架。腳手架是一個(gè)標(biāo)準(zhǔn)項(xiàng)目生成器，通過(guò)預(yù)設(shè)配置初始化項(xiàng)目結(jié)構(gòu)和配置，快速搭建基于特定框架的項(xiàng)目骨架，包括目錄結(jié)構(gòu)、配置文件和示例代碼。這些工具通常內(nèi)置構(gòu)建工具（如Webpack、Rollup、Vite），用于將源代碼轉(zhuǎn)換為可部署的產(chǎn)品代碼，并提供預(yù)配置設(shè)置，支持代碼分割、TreeShaking等優(yōu)化功能。腳手架的概念2腳手架常用的腳手架VueCLIVue.js官方腳手架工具，基于Webpack，用于快速搭建單頁(yè)面應(yīng)用。它能快速生成Vue.js項(xiàng)目的目錄結(jié)構(gòu)，簡(jiǎn)化項(xiàng)目啟動(dòng)和開發(fā)流程。不過(guò)，VueCLI已進(jìn)入維護(hù)模式，新項(xiàng)目推薦使用Vite，除非項(xiàng)目依賴Webpack。Vite是一個(gè)基于ES模塊的現(xiàn)代化Web應(yīng)用腳手架和構(gòu)建工具，提供快速的開發(fā)體驗(yàn)和高效的生產(chǎn)構(gòu)建。它利用瀏覽器的ES模塊支持，實(shí)現(xiàn)快速冷啟動(dòng)，并支持Vue.js、React等多種框架。這使得Vite成為一個(gè)通用的前端腳手架工具和構(gòu)建工具，適用于各種類型的Web應(yīng)用程序。憑借其出色的性能和良好的開發(fā)體驗(yàn)，Vite正逐步成為Vue.js項(xiàng)目的首選工具。CreateVite是Vite官方提供的腳手架工具，用于快速創(chuàng)建新的Vite項(xiàng)目。它通過(guò)命令行交互，根據(jù)用戶的選擇和配置，生成包含必要文件和目錄結(jié)構(gòu)的新項(xiàng)目，并安裝必要的依賴項(xiàng)。CreateVite2腳手架腳手架CreateVite的安裝（1）檢查依賴環(huán)境首先，確保已安裝Node.js，Vite需要Node.js版本14.18或更高版本。如果尚未安裝或不確定版本，可以通過(guò)命令行檢查，可參考上節(jié)中的方法。（2）安裝Vite在命令行工具中，輸入以下命令進(jìn)行安裝：npminstall-gvite等待命令執(zhí)行完成后輸入以下命令，查看Vite版本號(hào)，驗(yàn)證是否安裝成功：vite-v若返回Vite版本號(hào)，說(shuō)明安裝成功。2腳手架腳手架CreateVite的安裝（3）安裝CreateVite

在命令行工具中，輸入以下命令進(jìn)行安裝：npminstall-gcreate-vite等待命令執(zhí)行完成后輸入以下命令，查看系統(tǒng)中全局安裝的create-vite版本：npmlist-gcreate-vite若返回create-vite版本號(hào)，說(shuō)明安裝成功。3項(xiàng)目創(chuàng)建創(chuàng)建項(xiàng)目的步驟腳手架CreateVite安裝好后，我們即可使用相關(guān)命令進(jìn)行Vue項(xiàng)目的創(chuàng)建。進(jìn)入我們準(zhǔn)備創(chuàng)建項(xiàng)目的目錄，例如D:/Repos/vue，在該目錄下打開命令行工具，并輸入命令：create-vite<projectName>其中<projectName>是項(xiàng)目名稱，可以自取。按上下箭頭進(jìn)行移動(dòng)，選擇框架Vue，按回車進(jìn)入下一步。選擇語(yǔ)言JavaScript，按回車進(jìn)入下一步。至此項(xiàng)目就創(chuàng)建成功了。3項(xiàng)目創(chuàng)建初始項(xiàng)目架構(gòu)（1）.vscode/目錄下存放的是VSCode編輯器在當(dāng)前工作區(qū)的相關(guān)配置文件。例如extensions.json文件中記錄了當(dāng)前項(xiàng)目推薦使用的插件。（2）node_modules/目錄下存放的是當(dāng)前項(xiàng)目所有的依賴。（3）public/目錄下存放的是靜態(tài)文件，這些文件不會(huì)被編譯，最終會(huì)原樣復(fù)制到打包目錄下。地進(jìn)行開發(fā)。（4）src/目錄是源代碼目錄，存放項(xiàng)目的主要代碼。3項(xiàng)目創(chuàng)建初始項(xiàng)目架構(gòu)（5）src/assets/目錄下存放靜態(tài)資源，如圖像、字體等。這些文件會(huì)由構(gòu)建工具編譯處理，可以通過(guò)相對(duì)路徑引用（6）src/components/目錄存放Vue組件，每個(gè)組件都是一個(gè)獨(dú)立的.vue文件，這里存放的組件一般為公共的組件，能夠在全局中多次調(diào)用的。其中src/components/HelloWorld.vue是默認(rèn)生成的示例組件。（7）一般在src目錄下還會(huì)建一個(gè)名為views目錄，一般來(lái)說(shuō)主要界面常寫在該文件夾中。當(dāng)然你也可以自己隨便命名，但是在團(tuán)隊(duì)開發(fā)中保持通用規(guī)范。（8）src/App.vue為根組件，整個(gè)應(yīng)用的入口組件。（9）src/main.js為應(yīng)用的入口文件，負(fù)責(zé)創(chuàng)建Vue實(shí)例并掛載到DOM上。3項(xiàng)目創(chuàng)建初始項(xiàng)目架構(gòu)（10）.gitignore：Git忽略文件列表，指定哪些文件和目錄不被包含在版本控制中。（11）index.html：應(yīng)用的主HTML文件，Vite會(huì)在構(gòu)建時(shí)自動(dòng)注入生成的靜態(tài)資源鏈接。（12）package-lock.json：鎖定安裝的依賴版本，確保項(xiàng)目依賴的一致性。（13）package.json：項(xiàng)目的依賴、腳本和其他元數(shù)據(jù)。其中dependencies節(jié)點(diǎn)中記錄了運(yùn)行時(shí)的依賴，發(fā)布后即生產(chǎn)環(huán)境中所需要用的依賴；devDependencies節(jié)點(diǎn)中記錄了開發(fā)時(shí)的依賴，里面的依賴是開發(fā)時(shí)用的。（14）README.md：項(xiàng)目的說(shuō)明文件，通常用于描述項(xiàng)目、如何安裝和使用等信息。（15）vite.config.js：Vite的配置文件，用于修改默認(rèn)配置。熟悉項(xiàng)目目錄結(jié)構(gòu)和文件，有助于我們更好地進(jìn)行開發(fā)。4前端UI框架集成ElementPlus集成ElementPlus是Vue3的一個(gè)組件庫(kù)，提供了一套豐富的組件用于構(gòu)建用戶界面。在第一章中我們已經(jīng)學(xué)會(huì)了如何在采用漸進(jìn)式引入Vue的項(xiàng)目中安裝ElementPlus框架，現(xiàn)在我們來(lái)學(xué)習(xí)如何在用腳手架創(chuàng)建的Vue項(xiàng)目中安裝ElementPlus。打開項(xiàng)目myproject，點(diǎn)擊VSCode菜單欄的終端，點(diǎn)擊新建終端，此時(shí)出現(xiàn)終端的窗口，也可以使用快捷鍵“Ctrl+shift+`”，終端窗口如下圖所示：4