# Vue组件监控
## 基本信息
- Slug: `webfansplz-vite-plugin-vue-mcp`
- Source: modelscope
- Publisher: @webfansplz/vite-plugin-vue-mcp
- Categories: developer-tools / monitoring
- Hosted: No
- License: MIT License
- Source URL: https://www.modelscope.cn/mcp/servers/@webfansplz/vite-plugin-vue-mcp
## 简介
通过 Model Context Protocol 服务器为 Vue 应用提供应用洞察，公开组件树、状态、路由和 Pinia 数据。
## 安装提示

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

## MCP Server 详情

# vite-plugin-vue-mcp

[![npm version][npm-version-src]](https://npmjs.com/package/vite-plugin-vue-mcp)
[![npm downloads][npm-downloads-src]](https://npmjs.com/package/vite-plugin-vue-mcp)
[![bundle][bundle-src]](https://bundlephobia.com/result?p=vite-plugin-vue-mcp)
[![License][license-src]](https://github.com/webfansplz/vite-plugin-vue-mcp/blob/main/LICENSE)

Vite 插件，为您的 Vue 应用程序提供组件树、状态、路由以及 Pinia 树和状态信息的 MCP 服务器。

## 安装 📦

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


## 使用 🔨

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

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


然后 MCP 服务器将在 `http://localhost:[端口]/__mcp/sse` 可用。

如果您正在使用 Cursor，请在项目根目录下创建一个 `.cursor/mcp.json` 文件，此插件将自动为您更新它。有关 MCP 的更多详细信息，请参阅 [官方 Cursor 文档](https://docs.cursor.com/context/model-context-protocol)。

### 选项

```ts
export interface VueMcpOptions {
  /**
   * The host to listen on, default is `localhost`
   */
  host?: string

  /**
   * The port to listen on, default is the port of the Vite dev server
   */
  port?: number

  /**
   * Print the MCP server URL in the console
   *
   * @default true
   */
  printUrl?: boolean

  /**
   * The MCP server info. Ingored when `mcpServer` is provided
   */
  mcpServerInfo?: McpServerInfo

  /**
   * Custom MCP server, when this is provided, the built-in MCP tools will be ignored
   */
  mcpServer?: (viteServer: ViteDevServer) => Awaitable<McpServer>

  /**
   * Setup the MCP server, this is called when the MCP server is created
   * You may also return a new MCP server to replace the default one
   */
  mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable<void | McpServer>

  /**
   * The path to the MCP server, default is `/__mcp`
   */
  mcpPath?: string

  /**
   * Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,
   * if `.cursor` folder exists.
   *
   * @default true
   */
  updateCursorMcpJson?: boolean | {
    enabled: boolean
    /**
     * The name of the MCP server, default is `vue-mcp`
     */
    serverName?: string
  }

  /**
   * append an import to the module id ending with `appendTo` instead of adding a script into body
   * useful for projects that do not use html file as an entry
   *
   * WARNING: only set this if you know exactly what it does.
   * @default ''
   */
  appendTo?: string | RegExp
}
```


## 特性/工具 ✨

### 获取组件树

`get-component-tree`: 获取 Vue 组件树。

![component-tree](./screenshots/component-tree.gif)

### 获取组件状态

`get-component-state`: 获取组件的状态（输入：`componentName`）。

![component-state](./screenshots/component-state.gif)

### 编辑组件状态

`edit-component-state`: 编辑组件的状态（输入：`componentName`, `path`, `value`, `valueType`）。

![edit-component-state](./screenshots/edit-component-state.gif)

### 高亮组件

`highlight-component`: 高亮显示一个组件（输入：`componentName`）。

![highlight-component](./screenshots/highlight-component.gif)

### 获取路由

`get-router-info`: 获取应用程序的 Vue 路由信息。

![route-tree](./screenshots/router-info.gif)

### 获取 Pinia 树

`get-pinia-tree`: 获取应用程序的 Pinia 树。

![pinia-tree](./screenshots/pinia-tree.gif)

### 获取 Pinia 状态

`get-pinia-state`: 获取应用程序的 Pinia 状态（输入：`storeName`）。

![pinia-state](./screenshots/pinia-state.gif)

## 架构 ⚡️

![architecture](./screenshots/architecture.png)

## 注意事项 💡

**请确保在使用功能之前，应用程序已经在浏览器中运行。**

## 致谢 💖

该项目受到 [vite-plugin-mcp](https://github.com/antfu/nuxt-mcp/tree/main/packages/vite-plugin-mcp) 的启发。感谢 [@antfu](https://github.com/antfu) 的出色工作。

## 许可证 📖

[MIT](./LICENSE) 许可证 © [Arlo](https://github.com/webfansplz)

<!-- Badges -->