如何实现Vue2项目升级Vue3？

Vue3正式版已经发布有两年多了，如今它也已成为Vue的默认开发版本，如果你想要对之前Vue2项目进行升级重构，可以从以下几个维度入手：

① 构建工具
② 入口文件
③ 插件
④ 指令
⑤ 路由
⑥ 状态管理
⑦ 其他

一、构建工具

Vue3推荐使用Vite作为构建工具，相对Webpack来说Vite超快的热更新速度能极大提高开发效率，项目越大效果越明显。

1. 安装

npm i vite -g
npm create vite@latest

更多详情可以看我之前写的一篇文章 → Vue3+Vite初体验

初始项目结构大致如下：

然后我们可以将Vue2项目的src目录下的内容直接复制粘贴到新创建项目的src目录下，然后再继续接下来的重构操作。

2. 修改配置文件

默认配置文件vite.config.js如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

我们可以根据项目需求来新增一些内容，例如：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',  // 开发或生产环境服务的公共基础路径
  plugins: [vue()],
  resolve: {
    alias: {  // 配置路径别名
      '@': resolve('src')
    },
  },
  css: {
    preprocessorOptions: {   // css预处理器
      less: {
        // 引入全局的Less库，有关lib.less请看 → https://www.jianshu.com/p/b13e2a2204b2
        additionalData: '@import "./src/assets/less/lib.less";'
      },
    },
  }
})

这里需要注意的是，在Vue2项目配置vue.config.js中，我们是使用CommonJs的require()语法来导入相关依赖，而在Vue3项目配置vite.config.js中我们使用的是原生ES6的import语法来导入的。

二、入口文件

1. index.html

Vite项目的HTML入口文件是放在项目根目录下的，而且需要手动引入main.js才行，而main.js就是JS的入口文件。

2. main.js

① 创建并挂载根实例

我们需要在main.js创建Vue实例，而Vue3创建实例的方式与Vue2有所不同，它使用的是createApp()来创建，例如：

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);

然后我们还需要将创建的实例挂载在页面上显示出来：

app.mount("#app");

需要注意的是，Vue3中的挂载方法不再是$mount()而是mount()。

② 使用路由和状态管理

如果需要用到路由和状态管理，我们还需要用到vue-router和vuex，使用use()方法来注册。

import router from "./router";
import store from "./store";
app.use(router)
   .use(store);

有关router和store实例的创建，后面内容会讲到。

3. App.vue

App.vue通常是作为页面根组件，我们会在其中放置路由组件，而页面路由切换时我们可能会给其加上一些动画效果，比如渐隐渐现，我们就可以用到内置的组件来实现，例如：

更多相关内容请查看 → https://router.vuejs.org/zh/guide/advanced/transitions.html

另外组件在与搭配使用时也类似，需要用到v-slot指令，例如：

三、插件

插件定义方式与Vue2差不多，就是参数有所不同，例如：

export default {
    install(app, options) {
        // 注入一个全局可用的$isMobile()方法，用户判断是否是移动设备
        app.config.globalProperties.$isMobile = () => 'ontouchstart' in window;
    }
}

install()方法的第一个参数是Vue实例，我们可以向app.config.globalProperties中添加一些全局实例属性或方法，类似于Vue2中的Vue.prototype。

四、指令

我们知道v-model不仅可以用在表单组件上，还能用在自定义组件上，但是在Vue3中v-model与Vue2不同，它是modelValue属性和update:modelValue事件的组合语法糖，例如：

它相当于：

组件内部定义：

五、路由

Vue Router从v3到v4在迁移的过程中可能改动地方比较多，这里只是简单例举了几个常见的变化，详情可以参考官方文档 → https://router.vuejs.org/zh/guide/migration/index.html#%E7%A0%B4%E5%9D%8F%E6%80%A7%E5%8F%98%E5%8C%96

1. 安装

npm install vue-router@4

2. 创建Router实例

import { createRouter, createWebHashHistory } from "vue-router";
export default createRouter({   // 替代之前的 new Router()
  history: createWebHashHistory(),  // 替代之前的 mode，这里使用的是hash模式
  routes: [
    {
      path: '/',
      component: () => import("@/views/Home/index.vue")
    }
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };  // 以前的x改成left，y改成top
    }
  }
});

六、状态管理

1. 安装

npm install vuex@next

2. 创建Store实例

import { createStore } from 'vuex';

export default createStore({  // 替代之前的 new Vuex.Store()
  state: {
  },
  mutations: {
  },
  actions: {
  }
});

七、其他

在Vue2项目升级Vue3的过程中，除了以上列举的那些常见需要注意修改的点之外，还有一些其他需要注意的，比如Vue3中删除了filter过滤器，如果之前项目中有用到的话，需要使用computed或methods中的方法替代；删除了一些API属性和方法，如$on()、$off()、$once()、$set()、$delete()、$destroy()、Vue.exend()和$children等。

总结

最后，用一张表对本文简单地做个总结：

Vue2升级Vue3对照表