Vite是什么？如何使用Vite創(chuàng)建Vue3項(xiàng)目？

在Vue 3出現(xiàn)前，Vue 2一般使用Vue CLI創(chuàng)建。Vue CLI基于Webpack構(gòu)建并配置項(xiàng)目，在項(xiàng)目啟動(dòng)時(shí)，Webpack需要從入口文件索引整個(gè)項(xiàng)目的文件，編譯成一個(gè)或多個(gè)單獨(dú)的.js文件。雖然Webpack對(duì)代碼進(jìn)行了拆分，但是仍可能一次生成所有路由下的編譯后的文件，導(dǎo)致服務(wù)啟動(dòng)時(shí)間隨著項(xiàng)目的復(fù)雜度增加而呈指數(shù)式的增長(zhǎng)。而Vite改進(jìn)了這一點(diǎn)，在項(xiàng)目啟動(dòng)時(shí)，Vite會(huì)對(duì)模塊代碼進(jìn)行按需加載，啟動(dòng)速度更快。因此，當(dāng)使用Vue3開發(fā)新項(xiàng)目時(shí)，推薦使用Vite進(jìn)行創(chuàng)建。

什么是Vite

Vite不需要以命令的方式安裝和卸載，只要安裝了npm或yarn，就可使用Vite的相關(guān)命令創(chuàng)建項(xiàng)目。Vite會(huì)作為項(xiàng)目的開發(fā)依賴保存在項(xiàng)目的node_modules目錄中。

需要注意的是，Node.js必須為14.18及以上版本時(shí)才可以使用Vite，并且Vite中的部分模板可能需要更高的Node.js版本才能正常運(yùn)行。另外，Node.js的14、16等更新版本不再支持Windows 7操作系統(tǒng)，推薦使用Windows 10等新版操作系統(tǒng)。

Vite創(chuàng)建Vue 3項(xiàng)目

Vite提供了兩種創(chuàng)建項(xiàng)目的命令，手動(dòng)創(chuàng)建項(xiàng)目的命令和通過模板自動(dòng)創(chuàng)建項(xiàng)目的命令。

1.手動(dòng)創(chuàng)建項(xiàng)目的命令

使用npm或yarn包管理工具都可以搭配Vite手動(dòng)創(chuàng)建項(xiàng)目，具體命令如下。

　　#使用npm create命令創(chuàng)建項(xiàng)目
　　npm create vite@latest
　　#使用yarn create命令創(chuàng)建項(xiàng)目
　　yarn create vite

上述命令展示了兩種包管理工具用于創(chuàng)建Vite項(xiàng)目，在使用時(shí)任選其一即可。npm create和yarn create命令后跟一個(gè)vite包名，表示初始化Vite。vite@latest表示在npm中安裝最新版本的Vite。

打開命令提示符，切換到D：\vue\chapter01目錄，執(zhí)行如下命令。

　　yarn create vite

執(zhí)行上述命令后，Vite會(huì)提示填寫項(xiàng)目名稱，如下圖所示。

使用vite-project作為項(xiàng)目名稱后，Vite會(huì)提示選擇創(chuàng)建項(xiàng)目所使用的框架，如下圖所示。

選擇好框架后，Vite會(huì)提示選擇一個(gè)變體，如下圖所示。

選擇好變體后，Vite會(huì)提示項(xiàng)目創(chuàng)建完成，如下圖所示。

項(xiàng)目創(chuàng)建完成后的提示命令，具體命令解釋如下。

cd vite-project              # 切換到項(xiàng)目目錄
yarn                         # 安裝項(xiàng)目的全部依賴
yarn dev                     # 啟動(dòng)服務(wù)

上述命令中，yarn dev命令是Vue3項(xiàng)目中package.json文件里面scripts節(jié)點(diǎn)配置的命令。除了yarn dev命令外，還有2個(gè)常用命令yarn build和yarn preview，它們分別表示構(gòu)建生產(chǎn)環(huán)境項(xiàng)目和構(gòu)建本地預(yù)覽環(huán)境項(xiàng)目。這3個(gè)命令實(shí)際上都是別名，是為了便于開發(fā)人員記憶。當(dāng)執(zhí)行這3個(gè)命令時(shí)，yarn會(huì)讀取當(dāng)前項(xiàng)目的package.json文件中的命令配置，找到真正的命令并執(zhí)行。

Vue 3項(xiàng)目的package.json文件中的命令配置如下。

"scripts":{
 "dev": "vite",
 "build":"vite build",
 "preview": "vite preview"
}

上述配置中，dev是vite的別名，build是vite build的別名，preview是vite preview的別名。也就是說，當(dāng)執(zhí)行yarn dev時(shí)，實(shí)際執(zhí)行的命令是yarn vite。別名可以自定義，如果修改了別名，在執(zhí)行命令時(shí)需要使用修改后的別名。

項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開啟一個(gè)本地服務(wù)，具體如下。

VITE v4.1.4 ready in 441 ms
Local: http://127.0.0.1:5173/

在瀏覽器中打開http://127.0.0.1:5173/，如下圖所示。

2.通過模板自動(dòng)創(chuàng)建項(xiàng)目的命令

通過模板自動(dòng)創(chuàng)建項(xiàng)目的方式相對(duì)簡(jiǎn)單，它通過附加的命令行選項(xiàng)直接指定項(xiàng)目名稱和模板，省去了填寫項(xiàng)目名稱、選擇框架和變體等環(huán)節(jié)。Vite提供了許多模板預(yù)設(shè)，可以創(chuàng)建Vite+React+TS、Vite+Vue、Vite+Svelte等類型的項(xiàng)目。通過附加的命令行選項(xiàng)直接指定項(xiàng)目名稱和模板的基本語法格式如下。

# 使用npm6或更低版本創(chuàng)建項(xiàng)目
npm create vite@latest<項(xiàng)目名稱>--template<模板名稱>
# 使用npm7或更高版本創(chuàng)建項(xiàng)目
npm create vite@latest <項(xiàng)目名稱>----template <模板名稱>
# 使用yarn create命令創(chuàng)建項(xiàng)目
yarn create vite<項(xiàng)目名稱>--template<模板名稱>

打開命令提示符，切換到D:\vue\chapter01目錄，使用yarn創(chuàng)建一個(gè)基于Vite+Vue模板且項(xiàng)目名稱為hello-vite的項(xiàng)目。

yarn create vite hello-vite --template vue

執(zhí)行上述命令后，hello-vite項(xiàng)目創(chuàng)建完成的效果如下圖所示。

在項(xiàng)目創(chuàng)建完成后，給出了一些提示命令，需要執(zhí)行這些命令才能完成項(xiàng)目啟動(dòng)，具體命令如下。

cd hello-vite                 # 切換到項(xiàng)目目錄
yarn                          # 安裝項(xiàng)目的全部依賴
yarn dev                      # 啟動(dòng)服務(wù)

項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開啟一個(gè)本地服務(wù)，具體如下。

VITE v4.1.4 ready in 441 ms
  →Lqcal: http://127.0.0.1:5173/

在瀏覽器中打開http://127.0.0.1:5173/，頁面效果與手動(dòng)創(chuàng)建Vue 3項(xiàng)目的頁面效果相同。

Vue 3項(xiàng)目的目錄結(jié)構(gòu)

Vue 3項(xiàng)目創(chuàng)建成功后，使用VS Code編輯器打開項(xiàng)目目錄，可以看到一個(gè)默認(rèn)生成的項(xiàng)目目錄結(jié)構(gòu)，如右圖所示。

下面簡(jiǎn)要介紹Vue 3項(xiàng)目的目錄結(jié)構(gòu)中各個(gè)目錄和文件的作用，具體如下。

? vscode：存放VS Code編輯器的相關(guān)配置。

? node_modules：存放項(xiàng)目的各種依賴和安裝的插件。

? public：存放不可編譯的靜態(tài)資源文件，當(dāng)進(jìn)行項(xiàng)目構(gòu)建時(shí)，該目錄下的文件會(huì)被復(fù)制到dist目錄，該目錄下的文件需要使用絕對(duì)路徑訪問。

? src：源代碼目錄，保存開發(fā)人員編寫的項(xiàng)目源代碼。

? src\assets：存放可編譯的靜態(tài)資源文件，例如圖片、樣式文件等。該目錄下的文件需要使用相對(duì)路徑訪問。

? src\components：存放單文件組件，即.vue文件。

? src\components\HelloWorld.vue：一個(gè)名稱為HelloWorld的單文件組件。

? src\App.vue：項(xiàng)目的根組件。

? src\main.js：項(xiàng)目的入口文件，用于創(chuàng)建Vue應(yīng)用實(shí)例。

? src\style.css：項(xiàng)目的全局樣式表文件。

? gitignore：向Git倉庫上傳代碼時(shí)需要忽略的文件列表。

? index. html：默認(rèn)的主渲染頁面文件，同時(shí)也是頁面的入口文件。

? package.json:包配置文件。

? README.md：項(xiàng)目使用說明文件。

? vite.config.js：存放Vite的相關(guān)配置。

? yarn.lock：存儲(chǔ)每一個(gè)依賴項(xiàng)的安裝版本，在使用yarn安裝、升級(jí)、卸載依賴時(shí)，會(huì)自動(dòng)更新yarn.lock文件。

此外，當(dāng)執(zhí)行了yarn build命令后，在項(xiàng)目目錄中會(huì)出現(xiàn)dist目錄，該目錄中保存的是項(xiàng)目構(gòu)建后的文件。

Vue 3項(xiàng)目的運(yùn)行過程

使用Vite構(gòu)建Vue 3項(xiàng)目后，當(dāng)執(zhí)行yarn dev命令啟動(dòng)服務(wù)時(shí)，項(xiàng)目就會(huì)運(yùn)行起來，該項(xiàng)目會(huì)通過src\main.js文件將src\App.vue組件渲染到index.html文件的指定區(qū)域。

src\App.vue文件

Vue 3項(xiàng)目是由各種組件組成的，src\App.vue文件是項(xiàng)目的根組件。在根組件中可以引用其他組件，從而顯示其他組件的內(nèi)容。

index.html文件

index.html文件是頁面的入口文件，該文件中預(yù)留了用于被src\main.js文件中的Vue應(yīng)用實(shí)例所控制的區(qū)域。

src\main.js文件

src\main.js文件是項(xiàng)目的入口文件，該文件創(chuàng)建了Vue應(yīng)用實(shí)例。Vue應(yīng)用實(shí)例是Vue項(xiàng)目工作的基礎(chǔ)，每個(gè)Vue項(xiàng)目都是從創(chuàng)建Vue應(yīng)用實(shí)例開始的。