開發工具：Vue DevTools 與 VS Code

專案順利運作後，接著我們來安裝兩個常用工具：瀏覽器的 Vue DevTools 與編輯器 VS Code 的官方擴充套件。它們雖然不是開發的必要條件，但能讓檢查狀態與排除問題更有效率。

Vue DevTools

Vue DevTools 是官方提供的瀏覽器除錯工具，可讓我們直接檢視元件樹、觀察元件狀態 (State)，並追蹤事件與路由變化。在開發遇到「畫面為何沒更新？」或「狀態值到底變成了什麼？」等疑問時，打開它是最直覺的第一步。

安裝方式十分簡單，只需前往瀏覽器 (如 Chrome、Edge 或 Firefox) 的擴充功能商店，搜尋並安裝「Vue.js devtools」即可 (亦可參考 Vue DevTools 官方說明文件)。安裝完畢後，開啟先前以 pnpm dev 啟動的網頁，並打開瀏覽器開發者工具 (F12)，便會看見新增的 Vue 分頁。

注意：DevTools 7 對應 Vue 3

目前的 Vue DevTools 7 是專為 Vue 3 設計的。若讀者需要維護的專案尚未升級、仍以 Vue 2 撰寫，則必須改用 v6 版本。本書主線皆採用 Vue 3，因此直接使用 7 即可；有關 Vue 2 舊專案的說明，請參閱 1/e 封存。

VS Code 與 Vue (Official) 擴充套件

在編輯器方面，官方推薦使用 VS Code，並搭配安裝官方擴充套件 Vue (Official) (可在擴充套件市集搜尋 Vue.volar 快速尋找)。此套件能為 .vue 單一元件檔 (SFC) 提供語法高亮、自動完成、型別提示與模板檢查，讓編輯器更容易即時指出問題。

注意：Vue (Official) 已取代 Vetur，請停用 Vetur

如果讀者先前曾開發過 Vue 2 專案，電腦中可能還留有舊版的 Vetur 擴充套件。

• Vue (Official)（原名 Volar）已全面取代 Vetur，成為 Vue 3 的官方推薦擴充套件。
• 請注意，兩者不要同時啟用：在 Vue 3 專案中，請務必將 Vetur 停用或解除安裝，以免因兩者衝突，導致重複提示或語法高亮異常。

其他編輯器（例如 WebStorm）也均有完善的 Vue 支援。若你使用其他開發工具，可參考 Vue 官方的 IDE 支援說明 來進行設定。

---

工具就緒之後，還有一個屬於這個時代的新夥伴值得介紹：AI 輔助開發。下一節，我們來看看怎麼把 AI 納入 Vue 的開發流程。