从 Vue 2 到 Vue 3：项目迁移的详细步骤与实战指南

最新推荐文章于 2025-04-02 12:56:18 发布

全栈探索者chen

最新推荐文章于 2025-04-02 12:56:18 发布

阅读量2.1k

点赞数 17

分类专栏： vue 文章标签： vue.js 前端 javascript 开发语言前端框架 ecmascript 程序人生

本文链接：https://blog.csdn.net/mmc123125/article/details/144054380

版权

vue 专栏收录该内容

162 篇文章

订阅专栏

从 Vue 2 到 Vue 3：项目迁移的详细步骤与实战指南

在这里插入图片描述

将一个现有的 Vue 2 项目迁移到 Vue 3 是一项需要精心规划和逐步执行的任务。虽然 Vue 3 带来了很多新特性和性能改进，但在迁移过程中需要注意兼容性问题、依赖更新以及代码重构。以下是一步一步的 Vue 2 到 Vue 3 的迁移步骤，帮助你顺利完成这一过程。

第一步：准备工作

在迁移之前，你需要做好一些准备工作，确保迁移过程不会中断开发进度。

备份代码：迁移之前，建议先对项目进行完整备份。通过 Git 创建分支，以便在遇到问题时可以回退。
查看依赖：确保项目中所有第三方库和插件都已经更新到支持 Vue 3 的版本。如果有一些库不支持 Vue 3，尝试寻找替代品或等待更新。
审查项目结构：尤其是大型项目，建议先将代码拆分成更小的模块。这样可以避免一次性迁移带来的复杂性。小规模的迁移更容易管理和调试。

第二步：更新依赖和安装 Vue 3

更新 vue 版本：

打开 package.json 文件，将 Vue 版本从 2.x 更新为 3.x：

{
  "dependencies": {
    "vue": "^3.0.0",
    // 其他依赖
  }
}

安装兼容的 Vue 3 依赖：
- Vue Router：Vue 3 使用 Vue Router 4，确保安装最新版本。
```
npm install vue-router@4
```
- Vuex：Vue 3 使用 Vuex 4，确保安装支持 Vue 3 的版本。
```
npm install vuex@4
```
更新其他依赖：检查项目中的所有其他依赖库，确保它们也都支持 Vue 3。你可以参考各个库的文档，查看是否需要升级到支持 Vue 3 的版本。

第三步：迁移配置和构建工具

Vue 3 对一些构建工具和配置文件也做了一些更改。如果你使用的是 Vue CLI 创建的项目，更新配置文件以支持 Vue 3。

更新 vue.config.js（如果使用 Vue CLI）：

Vue 3 不再支持一些 Vue 2 中的配置，确保更新 vue.config.js 文件以符合 Vue 3 的要求。
修改 Babel 配置（如果使用 Babel）：

确保 Babel 配置支持 Vue 3 的新语法和功能。
更新 TypeScript 配置（如果使用 TypeScript）：

如果项目使用 TypeScript，更新 tsconfig.json 文件，使其与 Vue 3 兼容。确保类型检查和代码智能提示正常工作。

第四步：调整 Vue 实例和生命周期钩子

Vue 实例改动：

在 Vue 3 中，创建 Vue 实例的方法发生了变化。Vue 2 使用 new Vue() 来创建实例，而 Vue 3 则使用 createApp()。

Vue 2 示例：
```
new Vue({
  el: '#app',
  render: h => h(App)
});
```
Vue 3 示例：
```
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
```

生命周期钩子更改：

Vue 3 中的生命周期钩子有一些更名，例如 beforeDestroy 被更改为 beforeUnmount，destroyed 改为 unmounted。

Vue 2：

export default {
  beforeDestroy() {
    console.log('Component is about to be destroyed');
  },
  destroyed() {
    console.log('Component is destroyed');
  }
};

Vue 3：

export default {
  beforeUnmount() {
    console.log('Component is about to unmount');
  },
  unmounted() {
    console.log('Component unmounted');
  }
};

自定义事件：Vue 3 中的自定义事件方式有了变化。如果你的项目中大量使用了 $emit，请确保逐个检查，尤其是传递参数的方式和绑定事件的方式。

第五步：迁移到 Composition API（可选）

Vue 3 引入了 Composition API，它能帮助你更加灵活地组织组件逻辑，特别是在复杂项目中，它比 Vue 2 中的 Options API 更加清晰和高效。

你可以逐步将 Vue 2 的 data、computed、methods 等属性迁移到 Vue 3 的 Composition API 中。

Vue 2 示例：

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

Vue 3 Composition API 示例：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

如果你的项目中较多使用了 data 和 methods，可以考虑逐步迁移到 Composition API。虽然这个步骤是可选的，但它有助于提高代码的复用性和可维护性。

第六步：迁移 Vue Router 和 Vuex

Vue 3 使用 Vue Router 4 和 Vuex 4 版本，它们的 API 和 Vue 2 中有所不同。需要逐步将 Vue 2 的路由和状态管理逻辑迁移到 Vue 3。

迁移 Vue Router：

在 Vue 3 中，使用 createRouter 和 createWebHistory 来配置路由。

Vue 2 示例：

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

Vue 3 示例：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

迁移 Vuex：

在 Vue 3 中，Vuex 4 对状态管理也做了很多改进。你需要使用 createStore 方法来创建 Vuex 实例。

Vue 2 示例：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

Vue 3 示例：

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});