Vue 使用Vite建立Vue專案

Vite是可以快速建置Vue專案的工具，建立方式如下。

事前要求

安裝好Node.js及npm，參考「Windows 11 安裝nvm」。

建立Vue專案

使用Node.js版本為v22.21.1。

在要建立專案的目錄下開啟命令列，輸入npm create vue@latest開始建立Vue專案。

C:\>npm create vue@latest

> npx
> create-vite

│
◇  Project name:
│  vue3-demo
│
◇  Select a framework:
│  Vue
│
◇  Select a variant:
│  JavaScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes
│
◇  Scaffolding project in C:\vue3-demo...
│
◇  Installing dependencies with npm...

added 35 packages, and audited 36 packages in 8s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
│
◇  Starting dev server...

> vue3-demo@0.0.0 dev
> vite


  VITE v7.3.0  ready in 360 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

完成後，可以在瀏覽器中開啟 http://localhost:5173/ 查看Vue專案。

若要結束在命令列按Ctrl + C離開。

若要啟動則在命令列的專案根目錄輸入npm run dev啟動應用程式。

C:\vue3-demo>npm run dev

> vue3-demo@0.0.0 dev
> vite


  VITE v7.3.0  ready in 1116 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help