Chuan's Mindspace
【筆記：Vue】用 Vite 建立 Vue 專案
Chuan
  2025/04/12 16:18   2025/04/12 16:20  

　　記錄一下如何用 Vite 建立 Vue 專案——其實滿簡單、直觀的。


安裝 Node.js、npm、pnpm

  1. Node.js
  2. npm
    • 如果是使用 Windows 安裝程式安裝 Node.js，過程中就可以選擇
    • 執行 npm -v 以確認版本
  3. pnpm
    • 取代 npm，將下載的所有 package 放在一個共用資料夾、並在此專案的「node_modules」底下用硬連結／junction 的方式連接至共用資料夾，以節省硬碟空間、避免重複下載——所以我個人偏好使用 pnpm。
    • 執行 npm install -g pnpm 安裝
    • 執行 pnpm -v 以確認版本

用 Vite 建立 Vue 專案

  1. pnpm create vite：使用最新版本的 Vite，並開始互動式建立專案
    1. Project name（輸入專案名稱，之後也會是資料夾名稱）：<my-vue-app>（可以自由改成想要的名稱）
    2. Select a framework（選擇框架）：用『上』／『下』選擇［Vue］
    3. Select a variant（選擇語言或種類）：用『上』／『下』選擇［JavaScript］或［TypeScript］
  2. 進到專案、下載初始依賴 
    1
    2
    cd my-vue-app-1
    pnpm install
  3. 啟動開發伺服器
    1
    pnpm run dev
  4. 打包
    1
    pnpm run build
    • 打包好的檔案會在「dist」資料夾下

參考資料

  1. 安裝 Node.js、npm、pnpm
  2. 用 Vite 建立 Vue 專案
  3. 參考資料
  1. 安裝 Node.js、npm、pnpm
  2. 用 Vite 建立 Vue 專案
  3. 參考資料