想想怎么做
懒得写,先放着
一步步来
将旧的业务代码搬进来, 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')
起因: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项目,然后从头再来