🚀 在 VS Code 中！

在 Visual Studio Code 中使用 Vue

Vue.js 是一個熱門的 JavaScript 程式庫，用於建置 Web 應用程式和使用者介面，而 Visual Studio Code 內建支援 Vue.js 的建構區塊 HTML、CSS 和 JavaScript。為了獲得更豐富的 Vue.js 開發環境，您可以安裝 Vue - 官方 (先前為 Volar) 擴充功能，以取得 IntelliSense、TypeScript、格式化等支援。

注意： Vue 2 支援已於 2023 年 12 月 31 日終止，因此Vetur 擴充功能不建議使用。您需要停用 Vetur 才能使用 Vue - 官方擴充功能。

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

您應該會在瀏覽器的 http://localhost: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 - 官方 擴充功能。

Vue 擴充功能為 VS Code 提供 Vue.js 語言功能 (語法醒目提示、IntelliSense 和格式化)。

Vue - Official extension

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

您現在應該會看到 .vue 是 Vue.js 語言的已辨識檔案類型，並且您具有語法醒目提示、括號比對和 hover 描述等語言功能。

Vue language features

IntelliSense

當您開始在 App.vue 中輸入時，您會看到 HTML 和 CSS 的智慧建議或完成項目，以及 Vue template 區段中宣告 (v-bind、v-for) 等 Vue.js 特定項目

Vue.js suggestions

以及 scripts 區段中的 computed 等 Vue 屬性

Vue.js JavaScript suggestions

前往定義、查看定義

VS Code 中的 Vue - 官方擴充功能透過提供類型定義等語言服務功能來增強 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 的 Hot Module Replacement (HMR) 功能會立即在瀏覽器中反映更新，您將會看到「Hello World!」。讓伺服器保持執行狀態，因為我們將繼續學習 Vue.js 用戶端偵錯。

提示： VS Code 支援自動儲存，預設會在延遲後儲存您的檔案。檢查檔案功能表中的自動儲存選項以開啟自動儲存，或直接設定 files.autoSave 使用者設定。

hello world

Linting

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

您可以在下方看到當 Vue linter 偵測到範本中有一個以上根元素時發生的錯誤

Vue linting

偵錯

您可以使用內建的 JavaScript 偵錯工具偵錯用戶端 Vue.js 程式碼。請依照此對話，將 Vite/Vue.js 3 專案與使用 Microsoft Edge 的 VS Code 搭配使用。

對於 現在處於維護模式 的 Vue CLI，請查看 VS Code 偵錯秘訣網站上的 Vue.js 在 VS Code 中偵錯 秘訣，以深入瞭解。

另一個用於偵錯 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

04/03/2025