在 Windows 子系統 Linux 版上安裝 Vue.js

協助您在 Windows 上設定 Vue.js 開發環境的指南,方法是在 Windows 子系統 Linux 版 (WSL) 上安裝 Vue.js Web 架構。 在 Vue.js 概觀頁面上深入了解。

Vue 可以直接在 Windows 上或 WSL 上安裝。 如果您計劃與 NodeJS 後端互動、想要與 Linux 實際執行伺服器同位,或計劃遵循使用 Bash 命令的教學課程,通常建議您在 WSL 上安裝。 您也可以考慮將 Vite 視為Vue.js的替代方案。

必要條件

  • 安裝 Windows 子系統 Linux 版 (WSL),包括 Linux 發行版本 (例如 Ubuntu),並確定它以 WSL 2 模式執行。 可開啟 PowerShell 並輸入下列內容,以此方式進行檢查:wsl -l -v
  • 在 WSL 2 上安裝 Node.js:這包括版本管理員、封裝管理員、Visual Studio Code 和遠端開發延伸模組。 Node Package Manager (npm) 會用來安裝 Vue.js。

重要

使用 WSL 安裝 Linux 發行版本將會建立用來儲存檔案的目錄:\\wsl\Ubuntu-20.04 (將 Ubuntu-20.04 取代為您使用的任何 Linux 發行版本)。 若要在 Windows 檔案總管中開啟此目錄,請開啟 WSL 命令列,使用 cd ~ 選取您的主目錄,然後輸入 explorer.exe .。請勿在掛接的 C 磁碟機 (/mnt/c/Users/yourname$) 上安裝或儲存您將使用的檔案。 這樣做會大幅降低安裝和建置時間的速度。

安裝 Vue.js

若要在 WSL 上安裝 Vue.js:

  1. 開啟 WSL 命令列 (即 Ubuntu)。

  2. 建立新的專案資料夾:mkdir VueProjects,並進入該目錄:cd VueProjects

  3. 使用 Node Package Manager (npm) 安裝 Vue.js:

npm install vue

使用 vue --version 命令檢查您已安裝的版本號碼。

注意

若要使用 CDN 來安裝 Vue.js,而不是 NPM,請參閱 Vue.js 安裝文件

安裝 Vue CLI

Vue CLI 是一個工具組,可讓您在終端/命令列中使用 Vue。 它可讓您快速建立新專案 (vue create)、製作新想法的原型 (vue serve),或使用圖形化使用者介面 (vue ui) 管理專案。 Vue CLI 是全域安裝的 npm 套件,可為您處理某些組建複雜度 (例如使用 Babel 或 Webpack)。 如果您不是要建置新的單頁應用程式,可能不需要或想要 Vue CLI。

若要安裝 Vue CLI,請使用 npm。 您必須使用 -g 旗標來全域安裝,才能升級 (vue upgrade --next):

npm install -g @vue/cli

若要深入了解可新增的其他外掛程式 (例如 linting 或 Apollo 用於整合 GraphQL),請瀏覽 Vue CLI 文件中的 Vue CLI 外掛程式

其他資源