Vite Plugin Vue MCP
什麼是Vue MCP Server?
Vue MCP Server是一個開發工具,通過Vite插件形式集成到Vue項目中,提供即時可視化調試能力。它可以展示組件層次結構、組件狀態、路由信息和Pinia狀態管理數據,幫助開發者更直觀地理解和調試應用。如何使用Vue MCP Server?
只需在Vite配置中添加插件,啟動開發服務器後,通過瀏覽器訪問特定URL即可使用各種調試功能。插件會自動與Cursor編輯器集成,提供無縫的開發體驗。適用場景
適用於Vue 3項目的開發階段,特別適合需要頻繁調試組件狀態、路由變化或Pinia狀態管理的場景。主要功能
組件樹查看可視化展示Vue應用的組件層次結構,清晰呈現父子組件關係
組件狀態查看與編輯即時查看組件內部狀態數據,並可動態修改狀態值
組件高亮在頁面上高亮顯示指定組件,方便定位
路由信息查看展示Vue Router的路由配置和當前路由狀態
Pinia狀態樹查看可視化展示Pinia狀態管理庫的store結構
Pinia狀態查看查看Pinia store的詳細狀態數據
優勢與侷限性
優勢
即時可視化調試,提高開發效率
無需額外配置,一鍵集成
與Cursor編輯器無縫配合
支持Vue生態核心功能(組件、路由、狀態管理)
侷限性
僅適用於開發環境
需要應用在瀏覽器中運行才能使用
目前主要支持Vue 3項目
如何使用
安裝插件
通過包管理器安裝vite-plugin-vue-mcp插件
配置Vite
在vite.config.ts文件中添加插件配置
啟動開發服務器
運行開發命令啟動應用
訪問MCP服務
在瀏覽器中訪問MCP服務器提供的SSE端點
使用案例
調試組件狀態當某個組件顯示異常時,通過查看其內部狀態數據快速定位問題
理解組件結構新接手項目時,通過組件樹快速瞭解應用結構
動態修改狀態測試不同狀態值對組件的影響,無需修改代碼
常見問題
為什麼看不到任何組件信息?
如何更改MCP服務器的端口?
這個插件會影響生產構建嗎?
相關資源
npm包頁面
插件的npm官方頁面
GitHub倉庫
插件源代碼和問題追蹤
Cursor文檔
MCP協議的官方文檔
Vite官網
Vite構建工具官方文檔
精選MCP服務推薦

Markdownify MCP
Markdownify是一個多功能文件轉換服務,支持將PDF、圖片、音頻等多種格式及網頁內容轉換為Markdown格式。
TypeScript
1.7K
5分

Baidu Map
已認證
百度地圖MCP Server是國內首個兼容MCP協議的地圖服務,提供地理編碼、路線規劃等10個標準化API接口,支持Python和Typescript快速接入,賦能智能體實現地圖相關功能。
Python
701
4.5分

Firecrawl MCP Server
Firecrawl MCP Server是一個集成Firecrawl網頁抓取能力的模型上下文協議服務器,提供豐富的網頁抓取、搜索和內容提取功能。
TypeScript
3.8K
5分

Sequential Thinking MCP Server
一個基於MCP協議的結構化思維服務器,通過定義思考階段幫助分解複雜問題並生成總結
Python
257
4.5分

Context7
Context7 MCP是一個為AI編程助手提供即時、版本特定文檔和代碼示例的服務,通過Model Context Protocol直接集成到提示中,解決LLM使用過時信息的問題。
TypeScript
5.2K
4.7分

Magic MCP
Magic Component Platform (MCP) 是一個AI驅動的UI組件生成工具,通過自然語言描述幫助開發者快速創建現代化UI組件,支持多種IDE集成。
JavaScript
1.7K
5分

Notion Api MCP
已認證
一個基於Python的MCP服務器,通過Notion API提供高級待辦事項管理和內容組織功能,實現AI模型與Notion的無縫集成。
Python
119
4.5分

Edgeone Pages MCP Server
EdgeOne Pages MCP是一個通過MCP協議快速部署HTML內容到EdgeOne Pages並獲取公開URL的服務
TypeScript
249
4.8分