feat: add migration logs for Vue2 app (#603)

Author: webfansplz

packages/devtools-kit/src/core/index.ts

@@ -43,6 +43,21 @@ export function initDevTools() {
     }
   }
 
+  // @ts-expect-error skip type check
+  // Vue2 app detection
+  target.__VUE_DEVTOOLS_GLOBAL_HOOK__.once('init', (Vue) => {
+    console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 700; font-size: 20px;')
+
+    console.log('%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.', 'font-bold: 700; font-size: 16px;')
+
+    const url = 'https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp'
+    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, 'font-size: 16px;', 'text-decoration: underline; cursor: pointer;font-size: 16px;')
+
+    console.log('%cPlease install and enable only the legacy version for your Vue2 app.', 'font-bold: 700; font-size: 16px;')
+
+    console.log('%c[_____Vue DevTools v7 log_____]', 'color: red; font-bold: 700; font-size: 20px;')
+  })
+
   hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
     addDevToolsPluginToBuffer(pluginDescriptor, setupFn)
     const { app } = activeAppRecord ?? {}