vite-plugin-vue-mcp - MCP服务，MCP服务器，MCP教程

基本能力

产品定位

vite-plugin-vue-mcp 是一个开发工具插件，旨在为 Vue 应用提供实时的组件和状态信息，帮助开发者快速调试和优化应用。

核心功能

1. 组件树查看：获取 Vue 应用的组件树结构。
2. 组件状态管理：查看和编辑组件的状态。
3. 路由信息查看：获取 Vue 路由的详细信息。
4. Pinia 状态管理：查看和操作 Pinia 的状态树。
5. 组件高亮：在页面上高亮显示指定组件。

适用场景

1. 开发调试：快速查看和修改组件状态，定位问题。
2. 状态管理：实时监控 Pinia 状态的变化。
3. 路由调试：查看和调试路由配置。

工具列表

1. get-component-tree：获取组件树。
2. get-component-state：获取组件状态。
3. edit-component-state：编辑组件状态。
4. highlight-component：高亮组件。
5. get-router-info：获取路由信息。
6. get-pinia-tree：获取 Pinia 树。
7. get-pinia-state：获取 Pinia 状态。

常见问题解答

1. 如何启动 MCP 服务器？：安装插件后，MCP 服务器会自动启动，默认地址为 http://localhost:[port]/__mcp/sse。
2. 如何配置 Cursor？：在项目根目录创建 .cursor/mcp.json 文件，插件会自动更新该文件。
3. 如何修改 MCP 服务器路径？：通过 mcpPath 选项配置。

使用教程

使用依赖

无特殊前置依赖，只需安装插件即可。

安装教程

bash
pnpm install vite-plugin-vue-mcp -D

配置 Vite

```ts
// vite.config.ts
import { VueMcp } from 'vite-plugin-vue-mcp'

export default defineConfig({
plugins: [VueMcp()],
})
```

调试方式

1. 启动 Vite 开发服务器。
2. 访问 http://localhost:[port]/__mcp/sse 查看 MCP 服务器状态。
3. 使用提供的工具（如 get-component-tree）调试应用。