Vue到React转换MCP

Name: Vue到React转换MCP
Author: jianger666

作者：jianger6665 星标更新：2025-07-18

安装使用来源：spider==github.com

项目介绍

Vue to React MCP

一个用于自动化Vue到React迁移的MCP（模型上下文协议）服务器。通过智能分析和学习，帮助您高效地将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服务器配置。

配置指针

在您的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_VIDE.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[知识积累完成]

🔍 最佳实践

项目准备 确保Vue和React项目的路径正确，并且React项目已初始化
分阶段迁移 对于大型项目，建议按页面/模块逐步迁移
及时学习 每次优化代码后，让AI学习并提高后续迁移的质量
维护版本 建议在重要节点手动备份，AI基准版本会自动清理
查看指南 定期查看MIGRATION_CuidE.md，了解累积的最佳实践

📊 版本信息

当前版本：v1.0.6

✅ 支持完整的Vue到React迁移过程
✅ 智能任务管理和继续功能
✅ 代码学习和知识积累
✅ 自动化构建和发布

🤝 贡献

欢迎提交Issue和Pull Requests！

GitHub: https://github.com/jianger666/vue-to-react-mcp
Issues: https://github.com/jianger666/vue-to-react-mcp/issues