vue3 正式发布至今大约快两年了，但是手头上的 vue2 项目，碍于大量使用 vue-class-component ，况且项目中还使用了不少与它相关的其他包 vue-property-decorator 和 vuex-class ，因而很难直接向 vue3 升级。

（推测当时之所以用 class-component 是为了配合 ts 的类型检查，如今 vue3 的组合 API 已经有非常好的 ts 体验了。）

好消息是， vue-class-component 和 vue-property-decorator 都有对应的 vue3 版本。坏消息是，它们两看上去像是都已经被废弃不再更新。雪上加霜的还有它们在 vue3 版本中也带入与 vue2 版本不同的重大变更， vuex-class 甚至直接就没有 vue3 版本。

这几座大山压在眼前，升级 vue3 看上去更是遥遥无期。

有没有可能能够让上面的3个包暴露出和 vue2 版本一摸一样的 API，这样我只需要简单升级包版本就搞定了？就像 vue2.7 把 vue3 的一些 API 带回 vue2 一样。

基于上面的想法，我把这3个包的仓库都 fork 一份，而且发布了提供与 vue2 版本相同的 API。有这一步作为基础，接下来的升级工作就简单很多了。下文将一一介绍：

升级 vue-cli

vue upgrade
旧项目使用 vue-cli 创建的，所以第一步自然是升级 vue-cli，具体操作可以查阅官方升级指南 Migrate from v4 | Vue CLI (vuejs.org)。
升级 vue-class-component
npm install vue-class-component@8.0.0-rc.1 
安装 kaygnas-vue-property-decorator
npm install kaygnas-vue-property-decorator
安装后需要全局搜索替换把 vue-property-decorator 替换成 kaygnas-vue-property-decorator。
这里需要注意一下下面的用法可能会报错：
// 会报错
@Component
class extends Vue {
// 改成就 ok
@Component({})
class extends Vue {
安装 kaygnas-vuex-class
npm install kaygnas-vuex-class
安装后需要全局搜索替换把 vuex-class 替换成 kaygnas-vuex-class，就行了。
更新 main.ts
import { createApp } from 'vue' 
import App from './App.vue' 
const app = createApp(App)
app.mount('#app')
现在再试一下 npm run dev，项目终于又能够跑起来啦。
当然这里只是简单的例子，实际项目中还有更多的依赖也需要同步升级，包括 vue 全家桶的 vue-router 和 vuex，还有 ant-design-vue 等等等。
值的注意的是，考虑到与 vue-class-component 相关的包都几乎被废弃了，所以项目升级 vue3 后请尽量使用 vue3 的组合式 API，避免再继续使用装饰器语法，否则日后遇到问题恐怕没人能够帮你修复。
  
分类：
 前端
 
标签：
 
Vue.js
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    KaygNas