vuei8N+ELEMENT

vue-i18n是一个用于Vue.js应用程序的国际化插件。它允许您根据不同的语言环境提供不同的翻译文本，并且可以在整个应用程序中轻松地切换语言。

具体使用vue-i18n进行国际＊＊＊＊＊＊```javascript
export default {
buttons: {
login: '登录'
},
menus: {
home: '首页'
}
}

3. 在en.ts中，导出一个包含英文翻译文本的对象，例如：

export default {
buttons: {
login: 'Login'
},
menus: {
home: 'Home'
}
}

import { createI18n } from 'vue-i18n'
import zhCn from './zh-cn'
import en from './en'

const i18n = createI18n({
legacy: false,
globalInjection: true,
locale: localStorage.getItem('lang') || 'zhCn',
messages: {
zhCn,
en
}
})

export default i18n

5. 在Vue项目的入口文件main.js中，通过import导入i18n实例，并在Vue实例的创建中注册i18n，例如：

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './locales'

const app = createApp(App)

app.use(i18n)

app.mount('#app')

6. 在Vue组件中使用翻译文本，在template中使用$t方法，在ts文件中使用$t属性，例如：

<template>
<div>
<button>{{ $t('buttons.login') }}</button>
<a>{{ $t('menus.home') }}</a>
</div>
</template>

export default {
methods: {
handleClick() {
console.log(this.$t('buttons.login'))
}
}
}