Vue2到Vue3迁移

herbsama

已于 2023-06-21 17:46:18 修改

阅读量585

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript vue

于 2023-06-20 11:00:11 首次发布

本文链接：https://blog.csdn.net/herbsama/article/details/131301459

文章详细介绍了如何将旧的Vue2项目迁移到Vue3，包括新建Vue3项目，逐步迁移业务代码，处理i18n从8到9的升级，更新router和vuex到最新版本。同时，文章提到了eventBus的替代方案，如mitt库的使用，以及Vuetify升级遇到的问题和建议直接创建新项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想想怎么做

懒得写，先放着

一步步来

新建一个vue3项目

将旧的业务代码搬进来， index.html搬到src下面。用yarn安装。运行项目成功后代码报错就置空一步步排查
(1). ## App.vue置空

<template>
  <header>
   111111111111111111111111111111
  </header>

  <main>
  </main>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  data: () => ({
  }),
  created() {
  },
  computed: {
  },
  methods: {
  },
}
</script>

(2). ## main.js置空

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

i18n从8升到9，vue3必须使用9版本(如果你有用的话)

起因:vue.use(i18n)报错
npm i -g yarn
yarn install vue-i18n@9.2.2(版本随你)
官网
localization.js（无所谓啥名字）

import { createI18n } from 'vue-i18n';
import cn from '../../lang/cn.js';
import de from '../../lang/de.js';
const messages = {
  de: de,
  cs: cs,
};
const defaultLocale = 'en';
const localeData = {
  legacy: false, // composition API
  globalInjection: true, //全局生效$t
  locale: defaultLocale, // 默认cn翻译
  messages
}
export function setupI18n (app) {
  const i18n = createI18n(localeData)
  app.use(i18n)
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { setupI18n  } from './utils/localization'
const app = createApp(App)
// setupI18n(app)
app.use(setupI18n)
app.mount('#app')

html
（1）：template中

{{ $t('login.accepting_termsOfService')  }}

（2）template的引号中

<a-input type="text" :placeholder="$t('messages.name')" />

（3）script中

import { useI18n } from "vue-i18n";
const { t } = useI18n();
console.log(t("messages.name"));


//setup中
import { useI18n } from "vue-i18n";
 setup(){
    const { t } = useI18n() // use as global scope
    return { t }
  }
 <p>{{ t('login.accepting_termsOfService') }}</p>

3. 升级router，vuex（必须）

github官网router升级
 github官网vuex升级

yarn add vuex@next --save 
yarn add vue-router@next --save

//router.js
import { createRouter as _createRouter, createWebHistory } from 'vue-router'
   export function createRouter() {
  return _createRouter({
  history: createWebHistory(),
  routes: [
    {
      // for all other paths not intercepted by any other route:
      path: '/:pathMatch(.*)*',       //改一下通配符规则
      redirect: '/',
    },
    ]})
//store.js
import { createStore as _createStore } from 'vuex'
export function createStore () {
  return _createStore({})
}
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createStore } from './store/store'
import { createRouter } from './router'
const router = createRouter()
const store = createStore()

const app = createApp(App)

app.use(store).use(router)
app.mount('#app')

踩坑：
export function createRouter() {} 而不是export default function createRouter() {}

3. eventBus替代方案

(1):vue3中已经移除了emit, on等方法，Eventbus通讯使用的是发布订阅的设计模式，可以自己实现一个。(没检验,不推荐)

// bus.js
class Bus {
    listeners = {}
    constructor( { methods }) {
        this.listeners = {}
        Object.keys(methods).forEach(key => {
            this[key] = methods[key]
        })
    }
    $on(name, fn) {
        this.listeners[name] = this.listeners[name] || []
        this.listeners[name].push(fn)
    }
    $emit(name, ...args) {
        if (this.listeners[name]) {
            this.listeners[name].forEach(fn => fn.apply(null,args))
        }
    }
    $off(name, fn) {
        if (this.listeners[name]) {
            const index = this.listeners[name].indexOf(fn)
            if (index > -1) {
                this.listeners[name].splice(index, 1)
            }
        }
    }
}
export default Bus;

// eventBus.js
const eventBus = new Bus({
 methods: {
      liveUpdate(start, msg) {
      if (start) {
        this.$emit('startLiveUpdate',msg);
      } else {
        this.$emit('stopLiveUpdate', msg);
      }
    },
  }
})

export { eventBus };

// 页面
import {eventBus} from '@/utils/eventBus';
eventBus.$on('startLiveUpdate', (message) => {
      console.log("我是直接监听的",message);
    });

eventBus.$emit('startLiveUpdate', "我是emit发送的");

eventBus.liveUpdate(true, "我是方法发送的")

(2): 使用mitt代替

// eventBus.js
import mitt from 'mitt';

export const eventBus = mitt()

export const EventBus = {
  resetAllData() {
    eventBus.emit('resetAllData');
  }}

// 页面
import { EventBus, eventBus }  from '@/utils/eventBus';

// 开启监听
eventBus.on('annotationClicked', () => {
   this.curComp = 'app-annotationen';
});

// 调用EventBus方法
EventBus.liveUpdate(this.liveUpdateActive);

4. vuetify从2升到3

升级生个屁，一堆坑

npm create vuetify
新建一个vue3+vuetify3项目，然后从头再来