将 Vue2 项目迁移到 Vue3

一、准备工作

1. 项目备份
   • 在开始迁移之前，务必备份整个项目，包括源代码、配置文件和相关的资源文件。这样在迁移过程中如果出现问题，可以方便地回滚到原始状态。
2. 更新工具链
   • 确保使用的构建工具（如 Vue CLI 或 Vite）是支持 Vue3 的版本。如果使用 Vue CLI，可以通过npm update - g @vue/cli更新到最新版本。

二、Vue 核心升级

1. 更新 Vue 依赖
   • 在项目的package.json文件中，将vue的版本从 2.x 更新到 3.x。例如，将"vue": "^2.6.11"修改为"vue": "^3.2.47"（这里以最新的稳定版本为例）。然后运行npm install或者yarn来更新vue包。
2. 处理全局 API 变化
   • Vue3 中许多全局 API 的使用方式发生了变化。例如，在 Vue2 中可以通过Vue.component来全局注册组件，在 Vue3 中需要使用app.component，其中app是通过createApp函数创建的 Vue 应用实例。
   • Vue2 中的全局注册组件示例：

        Vue.component('my - component', {
          template: '<div>Hello Vue2</div>'
        });
        new Vue({
          el: '#app'
        });

     Vue3 中的等效操作：

        import { createApp } from 'vue';
        const app = createApp({});
        app.component('my - component', {
          template: '<div>Hello Vue3</div>'
        });
        app.mount('#app');

三、组件相关的迁移

1. 组件选项的变更
   • 生命周期钩子：
     • 在 Vue3 中，beforeCreate和created生命周期钩子被setup函数部分替代。setu