用Vite建置一個Vue專案

J
UniMarket
Published in
Nov 11, 2022

Vite和Vue Cli一樣都是一種建構工具,他跟著Vue3一起被推出。比較特別的是雖然他是Vue推出的建構工具,但連React也可以用Vite建構。還沒有Vite之前Vue Cli為主要的構件工具,開發速度與效能上Vite比Cli快非常多,但Cli存在已久周邊生態域最為完善,Vite為目前官方開發重心。

npm會隨著node.js一起安裝,開啟node首頁即可點擊下載,LTS是最新穩定版本、Current是最新功能版本。

找到要建構的資料夾位置,輸入npm init vue@latest。

接下來Vite會問你專案名稱、需不需要安裝一些工具。

在vscode開啟檔案,可以看到Vite已經將檔案建構完成。

輸入npm i,npm 會自動依照 package.json 的內容下載套件。

出現專門放套件的node_modules資料夾。

執行npm run dev啟動本地伺服器

打開連結即會出現用Vite建構Vue初始的網頁畫面。

非常簡單又快速的建構完成,大家也去試試吧~掰

--

--

J
UniMarket

前端工程菜鳥的學習日記 請各位大大帶我飛 ಥ⌣ಥ