參加你附近的 ，瞭解 VS Code 中的 AI 輔助開發。

在 Visual Studio Code 中使用 Vue

Vue.js 是一個流行的 JavaScript 庫，用於構建 Web 應用程式和使用者介面。Visual Studio Code 內建了對 Vue.js 構建塊 HTML、CSS 和 JavaScript 的支援。為了獲得更豐富的 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 專案的腳手架。按照提示選擇可選功能。如果您不確定某個選項，可以選擇“No”。

Vue app scaffolding

專案建立後，進入該目錄並安裝依賴項。安裝依賴項可能需要幾分鐘時間。

cd <your-project-name>
npm install

讓我們透過輸入 npm run dev 快速執行我們的 Vue 應用程式，以啟動 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 - Official 擴充套件

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

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

Vue - Official extension

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

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

Vue language features

IntelliSense

當您開始在 App.vue 中輸入時，您會看到針對 HTML 和 CSS 的智慧建議或補全，也會看到針對 Vue template 部分中 Vue.js 特定專案（如宣告 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)）：在不離開當前上下文的情況下內聯檢視型別定義。

要使用“速覽定義”，請按照以下步驟操作

  1. 將游標放在 App 上。
  2. 右鍵單擊，將滑鼠懸停在上下文選單中的速覽上，然後選擇速覽定義。
  3. 一個速覽視窗將開啟，顯示來自 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.js extensions

  • 像 Vue VS Code Snippets 這樣的擴充套件可以方便地提供 Vue 程式碼片段。

    Vue VS Code Snippets

  • 還有一些擴充套件包，它們捆綁了其他人認為對 Vue.js 開發有用的擴充套件。

    Vue.js Extension Pack

09/11/2025