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的遷移。