vue 便捷使用i18n

Vue框架提供了一种便捷的方式来实现国际化（i18n）功能。下面是一个简单的步骤来使用Vue的i18n扩展：

1. 安装依赖：首先，你需要在你的Vue项目中安装`vue-i18n`依赖。你可以使用npm或者yarn来安装，例如：

npm install vue-i18n

或者

yarn add vue-i18n

2. 创建语言文件：在你的项目中创建一个`locales`文件夹，并在其中添加语言文件。每个语言文件应该是一个JavaScript＊＊＊js`文件来存储中文翻译：

// zh-CN.js
export default {
  welcome: '欢迎',
  goodbye: '再见'
}

3. 设置Vue插件：在你的Vue应用入口文件中，配置和使用Vue的i18n插件。首先，导入依赖：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

然后，使用Vue插件：

Vue.use(VueI18n)

最后，创建一个新的`VueI18n`实例并将其添加到Vue的实例中：

const i18n = new VueI18n({
  locale: 'zh-CN', // 设置默认语言
  messages: {
    'zh-CN': require('./locales/zh-CN.js')
    // 可以添加更多语言文件
  }
})

new Vue({
  el: '#app',
  i18n,
  // ...
})

4. 在模板中使用：现在你可以在Vue组件的模板中使用i18n的消息。例如，在一个组件中：

<template>
  <div>
    <p>{{ $t('welcome') }}</p>
    <p>{{ $t('goodbye') }}</p>
  </div>
</template>

`$t`是Vue-i18n提供的一个全局过滤器，用于翻译消息。

这样，你就可以方便地在Vue应用中使用i18n了。你可以根据需要添加更多的语言文件，并使用不同的语言来访问不同的翻译消息。