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

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

什么是Vite

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

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

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

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

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

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

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

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

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

　　yarn create vite

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

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

選擇好框架后，Vite會提示選擇一個變體，如下圖所示。

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

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

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

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

Vue 3項目的package.json文件中的命令配置如下。

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

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

項目啟動后，會默認開啟一個本地服務(wù)，具體如下。

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

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

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

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

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

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

yarn create vite hello-vite --template vue

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

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

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

項目啟動后，會默認開啟一個本地服務(wù)，具體如下。

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

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

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

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

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

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

? node_modules：存放項目的各種依賴和安裝的插件。

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

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

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

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

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

? src\App.vue：項目的根組件。

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

? src\style.css：項目的全局樣式表文件。

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

? index. html：默認的主渲染頁面文件，同時也是頁面的入口文件。

? package.json:包配置文件。

? README.md：項目使用說明文件。

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

? yarn.lock：存儲每一個依賴項的安裝版本，在使用yarn安裝、升級、卸載依賴時，會自動更新yarn.lock文件。

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

Vue 3項目的運行過程

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

src\App.vue文件

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

index.html文件

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

src\main.js文件

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