在 Vue.js 中获取框架版本信息及理解全局 API 的版本差异是开发者需要掌握的重要知识点

// 浏览器控制台直接访问
console.log(Vue.version) // Vue 2.x 输出 "2.7.16"

// Vue 3 需要先获取应用实例
import { version } from 'vue'
console.log(version) // 输出 "3.4.21"

{
  "dependencies": {
    "vue": "^3.4.21" // 版本号格式遵循SemVer规范
  }
}

# npm
npm list vue

# yarn
yarn list vue

// 典型 Vue 2 全局 API 使用
Vue.component('my-component', { /* ... */ })
Vue.directive('focus', { /* ... */ })
Vue.mixin({ /* ... */ })

// Vue 3 全局API作用域变更
import { createApp } from 'vue'

const app = createApp({})
app.component('my-component', { /* ... */ })
app.directive('focus', { /* ... */ })

// 兼容性封装示例
function registerComponent(name, component) {
  if (Vue.version.startsWith('2')) {
    Vue.component(name, component)
  } else if (Vue.version.startsWith('3')) {
    const app = Vue.createApp({})
    app.component(name, component)
  }
}

// package.json 推荐配置
{
  "dependencies": {
    "vue": "~3.4.21" // 使用波浪符锁定次要版本
  }
}

// Webpack 别名配置
module.exports = {
  resolve: {
    alias: {
      'vue$': process.env.VUE_3 ? 'vue/dist/vue.esm-browser.prod.js' 
               : 'vue/dist/vue.runtime.esm.js'
    }
  }
}

# 使用vue-diagnostics
npx vue-diagnostics@latest

// 检查安装的Vue版本
try {
  console.log(`Vue版本: ${Vue.version}`)
} catch (e) {
  console.error('Vue未正确加载')
}

// tsconfig.json 推荐配置
{
  "compilerOptions": {
    "types": ["vue/global-deps"]
  }
}

declare module 'vue' {
  interface GlobalComponents {
    // 版本特定的组件类型扩展
  }
}