VueSage MCP API 文档

安装与配置

推荐使用 npx

# 运行最新版本
npx vuesage-mcp@latest analyze <file>

# 运行特定版本
npx vuesage-mcp@1.1.43 analyze <file>

Cursor 编辑器配置

{
  "mcpServers": {
    "vuesage": {
      "command": "vuesage-mcp",
      "version": "1.1.44",
      "enabled": true
    }
  }
}

功能特性

API 参考

analyze

分析单个 Vue 组件文件

interface AnalyzeResult {
  score: number;          // 总分 (0-100)
  issues: string[];       // 严重问题
  warnings: string[];     // 警告
  fixes: Fix[];          // 可用的修复方案
  details: {
    ui: {
      accessibility: string;  // ✅ 或 ⚠️ 或 ❌
      responsiveness: string;
      semantics: string;
    };
    code: {
      props: string;
      emits: string;
      style: string;
    };
  };
}

analyzeBatch

批量分析多个组件

interface BatchResult {
  summary: {
    totalFiles: number;
    averageScore: number;
    totalIssues: number;
    totalWarnings: number;
    passRate: string;
  };
  details: AnalyzeResult[];
}

autoFix

自动修复检测到的问题

interface Fix {
  type: string;        // 修复类型
  element?: string;    // 目标元素
  attribute?: string;  // 属性名
  value?: string;      // 属性值
  content?: string;    // 内容
  from?: string;       // 替换源
  to?: string;         // 替换目标
}

使用示例

基础分析

npx vuesage-mcp@latest analyze src/components/Button.vue

批量分析

npx vuesage-mcp@latest analyzeBatch "src/**/*.vue"

自动修复

npx vuesage-mcp@latest autoFix src/components/Button.vue

版本说明

1.1.43 更新内容

• ✨ 新增 UI 分析功能
• 🔧 添加自动修复能力
• 📊 增强分析报告
• 🚀 支持 npx 运行方式
• 📦 优化依赖管理