狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

什么是Vite

Vite(讀音：/vit/)是一個輕量級、運行速度快的前端構建工具，它支持模塊熱替換(Hot Module Replacement，HMR)，可以即時、準確地更新模塊，當代碼修改時無須重新加載頁面或清除應用程序狀態。Vite默認安裝的插件比較少，隨著開發過程中依賴的增多，需要額外進行配置。

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

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

Vite創建Vue 3項目

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

1.手動創建項目的命令

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

　　#使用npm create命令創建項目

　　npm create vite@latest

　　#使用yarn create命令創建項目

　　yarn create vite

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

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

　　yarn create vite

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

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

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

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

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

cd vite-project              # 切換到項目目錄

yarn                         # 安裝項目的全部依賴

yarn dev                     # 啟動服務

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

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

"scripts":{

"dev": "vite",

"build":"vite build",

"preview": "vite preview"

}

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

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

VITE v4.1.4 ready in 441 ms

Local: http://127.0.0.1:5173/

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

2.通過模板自動創建項目的命令

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

# 使用npm6或更低版本創建項目

npm create vite@latest<項目名稱>--template<模板名稱>

# 使用npm7或更高版本創建項目

npm create vite@latest <項目名稱>----template <模板名稱>

# 使用yarn create命令創建項目

yarn create vite<項目名稱>--template<模板名稱>

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

yarn create vite hello-vite --template vue

執行上述命令后，hello-vite項目創建完成的效果如下圖所示。

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

cd hello-vite                 # 切換到項目目錄

yarn                          # 安裝項目的全部依賴

yarn dev                      # 啟動服務

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

VITE v4.1.4 ready in 441 ms

→Lqcal: http://127.0.0.1:5173/

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

Vue 3項目的目錄結構

Vue 3項目創建成功后，使用VS Code編輯器打開項目目錄，可以看到一個默認生成的項目目錄結構，如右圖所示。

下面簡要介紹Vue 3項目的目錄結構中各個目錄和文件的作用，具體如下。

• vscode：存放VS Code編輯器的相關配置。

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

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

• src：源代碼目錄，保存開發人員編寫的項目源代碼。

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

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

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

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

• src\main.js：項目的入口文件，用于創建Vue應用實例。

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

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

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

• package.json:包配置文件。

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

• vite.config.js：存放Vite的相關配置。

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

此外，當執行了yarn build命令后，在項目目錄中會出現dist目錄，該目錄中保存的是項目構建后的文件。

Vue 3項目的運行過程

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

src\App.vue文件

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

index.html文件

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

src\main.js文件

src\main.js文件是項目的入口文件，該文件創建了Vue應用實例。Vue應用實例是Vue項目工作的基礎，每個Vue項目都是從創建Vue應用實例開始的。