vue2升级至vue3 项目技术栈升级攻略

1. 依赖层面 package.json 更新版本依赖

{
  "name": "myApp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint --no-fix"
  },
  "dependencies": {
    "element-plus": "^1.1.0-beta.9",
    "vue": "^3.2.9",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

 2. 代码层面

1）new Vue() 改写 createApp()

vue2使用new Vue() 创建vue实例，vue3 通过 createApp() 创造实例

//vue2
import Vue from 'vue';
new Vue({
  render: h => h(App)
}).$mount("#app");

// 修改为

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

2)  Vue.prototype 改写 app.config.globalProperties

3）Vue.extend 废弃，如果要拓展组件使用extends属性

4）Vue全局方法改写为实例的方法

5）filter弃用，可以通过compute定义函数代替；如果是全局定义的filter方法，可以通过定义filter全局常量来代替

6）event bus 废弃，可自行实现一个event bus 封装

class Bus {
    constructor() {
    // 收集订阅，调度中心
        this.list = {};
    }
    // 订阅
    $on(name, fn) {
        this.list[name] = this.list[name] || [];
        this.list[name].push(fn);
    }
    // 发布
    $emit(name, data) {
        if (this.list[name]) {
            this.list[name].forEach((fn) => {
                fn(data);
            });
        }
    }

    // 取消订阅
    $off(name) {
        if (this.list[name]) {
            delete this.list[name];
        }
    }
}
let bus = new Bus();
export default bus;

7)  Vue.set this.$set 废弃

8.) vuex 修改

import { createStore } from 'vuex';
export default createStore({...})

9) vue-router 修改

//vue2
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router =  new Router({
  routes: [...]
})
修改为：

//vue3
import { createRouter,createWebHashHistory } from 'vue-router';
const router =  new createRouter({
  history: createWebHashHistory(),       //可有其它选项
  routes: [...]
})

 

完成以上几个方面的修改，大多数vue2项目即可完成技术栈到vue3的迁移。