MCP 服务器

Vue to React MCP

Enables automated migration of Vue projects to React with intelligent analysis, task management, and learning from user modifications.

README

Vue to React MCP

一个用于自动化 Vue 到 React 迁移的 MCP (Model Context Protocol) 服务器。通过智能分析和学习，帮助您高效地将 Vue 项目迁移到 React。

✨ 功能特性

🚀 智能迁移规划: 自动分析 Vue 组件并生成详细的 React 迁移计划
📚 持续学习优化: 智能学习迁移模式，从用户修改中提炼最佳实践
🔄 任务管理: 支持大型项目分阶段迁移，可暂停和继续
📝 知识积累: 自动维护 MIGRATION_GUIDE.md 知识库，沉淀迁移经验
🎯 通用设计: 适用于任何 Vue 到 React 项目，无特定框架依赖
💾 基准对比: 保存 AI 生成的基准版本，支持代码修改学习

📦 安装

使用 npm 全局安装：

npm install -g @jianger666/vue-to-react-mcp

或者使用 npx 直接运行：

npx @jianger666/vue-to-react-mcp --vue-project /path/to/vue --react-project /path/to/react

⚙️ 配置

重要说明: 此 MCP 服务器需要在您的 React 项目中配置和使用。请确保您已经在 React 项目中设置了 MCP 服务器配置。

Cursor 配置

在您的 React 项目中配置 MCP 服务器：

{
  "mcpServers": {
    "vue-to-react": {
      "command": "npx",
      "args": [
        "@jianger666/vue-to-react-mcp",
        "--vue-project", "/path/to/vue/project",
        "--react-project", "/path/to/react/project"
      ]
    }
  }
}

参数说明

--vue-project: Vue 项目的绝对路径
--react-project: React 项目的绝对路径（目标项目）

🚀 使用方法

1. 开始迁移页面

通过自然语言告诉 AI 您想迁移的页面：

"帮我迁移用户管理页面"
"迁移 src/views/UserList.vue 到 React"
"将 Vue 的商品列表页面迁移到 React"

AI 执行流程：

📊 获取项目信息和已有迁移指南
🔍 分析 Vue 组件结构（模板、脚本、样式）
📋 生成详细的迁移任务清单
⚡ 逐步执行迁移任务
💾 保存 AI 基准版本用于后续学习

2. 继续未完成的迁移

如果迁移过程中断，可以继续：

"继续之前的迁移任务"
"我想继续迁移"

3. 学习用户优化

当您完成代码优化后，让 AI 学习您的改动：

"我改好了代码，你学习一下吧"
"学习 src/pages/UserList 目录的改动"
"分析我对组件的修改并更新迁移指南"

学习过程：

🔍 对比 AI 基准版本与用户修改版本
📝 提炼通用的最佳实践和编码偏好
📚 更新 MIGRATION_GUIDE.md 知识库
🧠 为后续迁移提供更准确的指导

🔧 核心工具

工具名称	功能描述
`get_from_application`	获取项目信息，检查迁移任务状态
`migrate_page`	创建新的页面迁移任务
`continue_migrate_page`	继续执行未完成的迁移任务
`save_ai_baseline`	保存 AI 生成的代码基准版本
`learn_from_changes`	学习用户修改，更新迁移指南

📁 项目结构

迁移过程中会在 React 项目根目录创建以下文件：

your-react-project/
├── MIGRATION_GUIDE.md     # 迁移指南知识库
├── {文件名}_migrate_task.md # 当前迁移任务清单（按文件名区分）
└── .ai-baseline/          # AI 基准版本（自动清理）
    ├── 2024-01-15_14-30-25/
    └── 2024-01-15_15-45-12/

🎯 工作原理

graph TD
    A[用户发起迁移请求] --> B[获取项目信息]
    B --> C{检查任务文件}
    C -->|不存在| D[分析 Vue 组件]
    C -->|存在| E[继续未完成任务]
    D --> F[生成迁移计划]
    F --> G[执行迁移任务]
    E --> G
    G --> H[保存 AI 基准版本]
    H --> I[用户优化代码]
    I --> J[学习用户修改]
    J --> K[更新迁移指南]
    K --> L[知识积累完成]