JUP Vue3 Migration Assistant

Vue2 to Vue3 migration assistant with automatic code transformation

Easily migrate your Vue2 projects to Vue3 with intelligent code analysis, automatic fixes. Includes full support for JUP framework migration.

Publisher: JUP | Version: 1.0.0

🌟 Features

🔍 Smart Detection

• Automatically scan your project for Vue2 incompatible syntax
• Real-time diagnostics in the editor
• Visual tree view showing problem categories
• File-level and project-level detection

🔧 Automatic Fixes

• One-click fix for common compatibility issues
• Batch fix for entire project
• Vuex to Pinia state management migration
• Automatic migration of project configuration files

📚 Comprehensive Migration Guide

• Step-by-step migration instructions
• Vue2 to Vue3 migration rules reference
• Quick start guide (5 minutes)
• Based on real project migration experience

🎯 Supported Migrations

🎨 JUP Framework Support

This extension includes specialized support for JUP framework projects:

• Complete configuration migration: package.json, vite.config.ts, index.html
• Router migration: require → dynamic import
• Environment variables: VUE_APP_ → VITE_
• SVG icons: Vite-compatible SVG loading
• Date format: yyyy-MM-dd → YYYY-MM-DD
• SCSS optimization: @import → @use, deep selector fixes
• Nested slots: Smart handling of two-level nested slots
• JSX support: Auto-detect and add lang="jsx"

🚀 Quick Start

1. Install the Extension

Search for "JUP Vue3 Migration Assistant" in the VSCode Extension Marketplace and click Install.

2. Check Your Project

Press Ctrl+Shift+P (Mac: Cmd+Shift+P)
Type: "Vue3 Migration: 检查整个项目"

3. Fix Issues Automatically

Press Ctrl+Shift+P (Mac: Cmd+Shift+P)
Type: "Vue3 Migration: 修复诊断问题"

4. Migrate Vuex to Pinia

Press Ctrl+Shift+P (Mac: Cmd+Shift+P)
Type: "Vue3 Migration: 迁移 Vuex 到 Pinia"

5. Migrate Project Configuration (JUP)

Press Ctrl+Shift+P (Mac: Cmd+Shift+P)
Type: "Vue3 Migration: 迁移项目配置文件(含JUP)"

⌨️ Keyboard Shortcuts

📋 Commands

💡 Usage Tips

1. Backup First: Commit your code to Git before running migrations
2. Step by Step: Follow the recommended order: Check → Fix → Migrate Config → Migrate Vuex
3. Test Thoroughly: Test your project after each migration step
4. Manual Review: Always review and test automatically fixed code

⚠️ 手动修复项

以下情况需要手动修复，插件无法自动处理：

1. Mixin 混入同名对象问题

当组件和 mixin 中存在同名对象时，Vue3 中组件会直接覆盖 mixin 的对象，不会进行合并。

示例：

// mixin.js
export default {
  data() {
    return {
      user: {
        name: 'mixin-name',
        role: 'admin'
      }
    }
  }
}

// component.vue
export default {
  mixins: [myMixin],
  data() {
    return {
      user: {
        age: 25  // 这会完全覆盖 mixin 中的 user 对象
      }
    }
  }
}

修复方法： 手动合并对象属性

export default {
  mixins: [myMixin],
  data() {
    return {
      user: {
        ...myMixin.data().user,  // 展开 mixin 中的 user
        age: 25  // 添加新属性
      }
    }
  }
}

2. JS 中的 Slot 需要改成函数形式

在 JavaScript/JSX 中渲染 slot 时，Vue3 要求 slot 必须以函数形式调用。

Vue2 写法（错误）：

h('my-component', {
  slots: {
    default: '内容'
  }
})

Vue3 写法（正确）：

h('my-component', {
  slots: {
    default: () => '内容'
  }
})

或者在 JSX 中：

<MyComponent>
  {{
    default: () => '内容'
  }}
</MyComponent>

3. 插槽替换可能需要手动修复

由于 Vue2 到 Vue3 的插槽语法变化复杂，特别是：

• 自定义组件（如 el-popover、el-calendar 等）内部的插槽
• 多层嵌套的插槽结构
• 跨组件的插槽引用

可能出现的问题：

• 插槽没有被正确转换
• 插槽结束标签位置不正确
• 嵌套插槽结构混乱

需要检查的场景：

<!-- 检查 el-popover 等自定义组件内部的插槽 -->
<el-popover>
  <div slot="reference">  <!-- 需要确认是否正确转换 -->
    Reference content
  </div>
</el-popover>

<!-- 检查多层嵌套的插槽 -->
<el-calendar>
  <template #dateCell="{data}">
    <p>{{ data.day }}</p>
    <el-popover>
      <div slot="reference">  <!-- 需要确认结构是否正确 -->
        Trigger content
      </div>
    </el-popover>
  </template>
</el-calendar>

修复方法： 手动检查并修正插槽结构

<!-- 正确的 Vue3 写法 -->
<el-popover>
  <template #reference>
    <div>Reference content</div>
  </template>
  <template #default>
    <div>Default content</div>
  </template>
</el-popover>

📚 Documentation

• Full Documentation
• Quick Start Guide
• Build Guide
• Feature Details

📦 Marketplace

• VSCode Marketplace: https://marketplace.visualstudio.com/items?itemName=JUP.jup-vue3-migration-assistant
• Publisher: JUP

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see LICENSE for details

🔗 Related Links

• Vue3 Migration Guide
• Element Plus
• Pinia
• JupiterWeb Framework

🐛 Reporting Issues

Found a bug? Report it here

Made with ❤️ by JUP | Published to VSCode Marketplace