vite 是新一代前端構建工具，和 webpack 類似。

vite 的啟動速度更快。在開發環境中，不需要打包就可以直接運行。

vite 的更新速度更快。當修改內容后，不需要刷新瀏覽器，頁面就會實時更新。

vite 完全是按需編譯。它只會編譯需要的模塊，不需要等待整個應用編譯完成。

使用 vite 創建項目：

一、首先我們要準備好一個目錄，用于存放 Vue 項目。然后在目錄中打開命令行。

?

二、在命令行中輸入 `npm init vue@latest` 再按回車鍵，創建 Vue 項目。

?

創建 Vue 項目命令：

npm init vue@latest

三、如果是第一次使用 vite 創建項目，會提示安裝 create-vue 腳手架。需要輸入 y 然后按回車鍵確認安裝。

?需要安裝以下軟件包:
? create-vue@latest
好的，繼續? (y)

顯示以下內容表示安裝成功：?

?

四、輸入項目名稱，按回車鍵確定。

?注：Vue 項目的名稱不允許使用大寫字母、中文漢字、特殊符號等。

五、選擇配置項。按上下左右鍵切換選項，按回車鍵確認選項。

?六、切換到項目目錄，安裝依賴。

?切換命令：

cd 項目名

?

安裝命令：

npm install
簡寫：npm i

備注：出現 added xxx packages in xxm 表示安裝成功。?

運行vue項目：

一、在命令行中運行：

1、首先打開項目所在位置，進入根目錄，在文件夾內輸入 cmd 打開命令行窗口。

2、在命令行中輸入 npm run dev 運行項目。?

?

3、項目運行完畢后，復制本地連接，在網頁中打開。或按 ctrl + 鼠標左鍵 在默認瀏覽器中打開。

?打開之后會是這個頁面

?

二、在 VSCode 中運行：

1、在 VSCode 中打開項目，隨便選擇一個文件，按 ctrl + 反引號 打開終端，然后在終端中輸入 npm run dev 運行當前項目。

?

運行命令：

npm run dev

?

終端運行完畢后，復制本地連接，在網頁中打開。或按 ctrl + 鼠標左鍵 在默認瀏覽器中打開。

打開后同樣可以看到這個頁面。

?

原創作者：吳小糖

創作時間：2023.8.14