Vue to React MCP

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

✨ 功能特性

• 🚀 智能迁移规划: 自动分析 Vue 组件并生成详细的 React 迁移计划

• 📚 持续学习优化: 智能学习迁移模式，从用户修改中提炼最佳实践

• 🔄 任务管理: 支持大型项目分阶段迁移，可暂停和继续

• 📝 知识积累: 自动维护 MIGRATION_GUIDE.md 知识库，沉淀迁移经验

• 🎯 通用设计: 适用于任何 Vue 到 React 项目，无特定框架依赖

• 💾 基准对比: 保存 AI 生成的基准版本，支持代码修改学习

Related MCP server: Frontend Code Analysis MCP

📦 安装

使用 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 执行流程：

1. 📊 获取项目信息和已有迁移指南

2. 🔍 分析 Vue 组件结构（模板、脚本、样式）

3. 📋 生成详细的迁移任务清单

4. ⚡ 逐步执行迁移任务

5. 💾 保存 AI 基准版本用于后续学习

2. 继续未完成的迁移

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

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

3. 学习用户优化

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

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

学习过程：

1. 🔍 对比 AI 基准版本与用户修改版本

2. 📝 提炼通用的最佳实践和编码偏好

3. 📚 更新 MIGRATION_GUIDE.md 知识库

4. 🧠 为后续迁移提供更准确的指导

🔧 核心工具

📁 项目结构

迁移过程中会在 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[知识积累完成]

🔍 最佳实践

1. 项目准备: 确保 Vue 和 React 项目路径正确，React 项目已初始化

2. 分阶段迁移: 大型项目建议按页面/模块逐步迁移

3. 及时学习: 每次优化代码后让 AI 学习，提升后续迁移质量

4. 保持版本: 重要节点建议手动备份，AI 基准版本会自动清理

5. 查看指南: 定期查看 MIGRATION_GUIDE.md，了解积累的最佳实践

📊 版本信息

当前版本：v1.0.6

• ✅ 支持完整的 Vue 到 React 迁移流程

• ✅ 智能任务管理和续传功能

• ✅ 代码学习和知识积累

• ✅ 自动化构建和发布

🤝 贡献

欢迎提交 Issue 和 Pull Request！

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

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