在 Visual Studio Code 中使用 Vue

Name: Visual Studio Code
Author: Microsoft

Vue.js 是一個流行的 JavaScript 庫，用於構建 Web 應用程式和使用者介面，Visual Studio Code 對 HTML、CSS 和 JavaScript 的 Vue.js 構建塊提供了內建支援。為了獲得更豐富的 Vue.js 開發環境，您可以安裝 Vue - Official (以前稱為 Volar) 擴充套件，以獲得對 IntelliSense、TypeScript、格式化等的支援。

注意：Vue 2 的支援已於 2023 年 12 月 31 日結束，因此 Vetur 擴充套件的使用不被推薦。您需要停用 Vetur 才能使用 Vue - Official 擴充套件。

welcome to Vue

歡迎來到 Vue

本教程將使用 Vite 工具。如果您是 Vue.js 框架的新手，可以在 vuejs.org 網站上找到很棒的文件和教程。

要安裝和使用 Vite 和 Vue.js，您需要安裝 Node.js JavaScript 執行時和 npm (Node.js 包管理器)。npm 包含在 Node.js 中，您可以從 Node.js 下載安裝。

提示：要測試您的計算機上是否正確安裝了 Node.js 和 npm，您可以輸入 node --version 和 npm --version。

開始之前，請確保您位於要建立專案的父目錄中。然後開啟終端或命令提示符並鍵入

npm create vue@latest

系統會提示您安裝 create-vue。

Create vue

這可能需要幾分鐘時間來安裝和執行 create-vue，它將幫助您搭建 Vue 專案。按照提示選擇可選功能。如果您不確定某個選項，可以選擇“否”。

Vue app scaffolding

專案建立完成後，導航到專案目錄並安裝依賴項。安裝其依賴項可能需要幾分鐘時間。

cd <your-project-name>
npm install

讓我們快速執行我們的 Vue 應用程式，鍵入 npm run dev 來啟動 Web 伺服器並在瀏覽器中開啟應用程式。

npm run dev

您應該會在瀏覽器中 https://:5173 上看到“Welcome to your Vue.js App”。

要在 VS Code 中開啟您的 Vue 應用程式，請在終端（或命令提示符）中，導航到 vue-project 資料夾並鍵入 code .

cd vue-project
code .

VS Code 將啟動並在檔案資源管理器中顯示您的 Vue 應用程式。

Vue - 官方擴充套件

現在展開 src 資料夾並選擇 App.vue 檔案。您會注意到 VS Code 沒有顯示任何語法高亮，並且它將該檔案視為純文字，正如您在右下角的“狀態列”中所看到的。您還會看到一個通知，推薦用於 .vue 檔案型別的 Vue - Official 擴充套件。

Vue 擴充套件為 VS Code 提供了 Vue.js 語言功能（語法高亮、IntelliSense 和格式化）。

Vue - Official extension

在通知中，按“安裝”下載並安裝 Vue 擴充套件。您應該會在“擴充套件”檢視中看到 Vue 擴充套件正在“安裝”。安裝完成後（可能需要幾分鐘），“安裝”按鈕將變為“管理”齒輪按鈕。

現在您應該會看到 .vue 是 Vue.js 語言的可識別檔案型別，並且您擁有語法高亮、括號匹配和懸停描述等語言功能。

Vue language features

IntelliSense

在 App.vue 中鍵入時，您會看到智慧建議或自動完成，不僅適用於 HTML 和 CSS，還適用於 Vue.js 特定的專案，例如 Vue template 部分中的宣告（v-bind、v-for）。

Vue.js suggestions

以及 scripts 部分中的 Vue 屬性，例如 computed。

Vue.js JavaScript suggestions

轉到定義，速覽定義

VS Code 中的 Vue - Official 擴充套件透過提供型別定義等語言服務功能來增強 Vue.js 開發體驗。您可以使用以下方法訪問這些功能：

轉到定義（F12）：直接導航到程式碼中的型別定義。
窺視定義（⌥F12（Windows Alt+F12，Linux Ctrl+Shift+F10））：在不離開當前上下文的情況下，內聯檢視型別定義。

要使用“窺視定義”，請按照以下步驟操作：

將游標放在 App 上。
右鍵單擊，將滑鼠懸停在上下文選單的“窺視”上，然後選擇“窺視定義”。
一個窺視視窗將開啟，顯示來自 App.js 的 App 定義。

Vue.js peek definition

按 Escape 關閉速覽視窗。

Hello World

讓我們將示例應用程式更新為渲染“Hello World!”。在 App.vue 中，將 HelloWorld 元件的 msg 自定義屬性文字替換為“Hello World!”。

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Hello World!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

儲存 App.vue 檔案（⌘S（Windows、Linux Ctrl+S））後，Vite 的熱模組替換 (HMR) 功能將立即在瀏覽器中反映更新，您將看到“Hello World!”。在繼續學習 Vue.js 客戶端除錯之前，請保持伺服器執行。

提示：VS Code 支援自動儲存，預設情況下它會在延遲後儲存你的檔案。在檔案選單中勾選自動儲存選項以開啟該功能，或者直接配置 files.autoSave 使用者設定。

hello world

程式碼檢查

Linter 會分析您的原始碼，並在您執行應用程式之前警告您潛在的問題。Vue ESLint 外掛（eslint-plugin-vue）會檢查 Vue.js 特定的語法錯誤，這些錯誤會在編輯器中顯示為紅色波浪線，並在“問題”面板（“檢視”>“問題”⇧⌘M（Windows、Linux Ctrl+Shift+M））中顯示。

下方顯示了一個錯誤，當 Vue linter 檢測到模板中有多個根元素時：

Vue linting

除錯

您可以使用內建的 JavaScript 偵錯程式除錯客戶端 Vue.js 程式碼。請遵循此對話，在 VS Code 中使用 Microsoft Edge 與 Vite/Vue.js 3 專案。

對於目前已進入維護模式的 Vue CLI，請檢視 VS Code 除錯食譜站點上的 VS Code 中的 Vue.js 除錯食譜以瞭解更多資訊。

另一個流行的 Vue.js 除錯工具是 vue-devtools 外掛，無論在何種環境中都可以使用。

其他擴充套件

在“擴充套件”檢視（⇧⌘X（Windows、Linux Ctrl+Shift+X））中搜索，輸入vue 查詢其他 Vue 擴充套件。
像 Vue VS Code Snippets 這樣的擴充套件對於 Vue 程式碼片段可能很有用。
還有擴充套件包，它們捆綁了其他人認為對 Vue.js 開發有用的擴充套件。

12/10/2025