在適用於Linux的 Windows 子系統上安裝 Vue.js

在 Windows Subsystem for Linux(WSL)上建立 Vue.js 開發環境的指南。 背景請參見 Vue.js 概述

Vue 可以直接安裝在 Windows 或 WSL 上 。 如果你打算與 Node.js 後端互動、部署到 Linux 伺服器,或跟隨使用 Bash 指令的教學,推薦使用 WSL。

先決條件

  • 安裝 Windows Linux 子系統(WSL),包括以 WSL 2 模式運行的 Linux 發行版(如 Ubuntu)。 以 wsl -l -v 驗證
  • 在 WSL 2上安裝 Node.js:這包括版本管理員、套件管理員、Visual Studio Code 和遠端開發延伸模組。

這很重要

請將專案檔案存放在 WSL 檔案系統(例如 ~/projects),而不是掛載的 Windows 磁碟機(/mnt/c/)。 跨越檔案系統邊界作業會大幅減慢安裝與建置時間。

建立一個 Vue 專案

建立新 Vue 3 專案的推薦方式是 npm create vue@latest,使用 create-vue,官方基於 Vite 的支架工具。

  1. 打開你的 WSL 終端機(例如 Ubuntu)。

  2. 進入您的專案目錄:

    mkdir -p ~/projects
    cd ~/projects
    
  3. 建立一個新的 Vue 專案:

    npm create vue@latest
    

    安裝程式會提示你為專案命名並選擇可選功能(TypeScript、JSX 支援、Vue 路由器、Pinia 狀態管理、Vitest、ESLint)。

  4. 進入專案資料夾,安裝相依關係,然後啟動開發伺服器:

    cd <your-project-name>
    npm install
    npm run dev
    

    您的應用程式將可在 http://localhost:5173.

其他資源