VueI18n插件的简单应用于国际化

作为一个前端小白，刚刚接触学习Vue.js框架结合Element-ui组件开发项目。由于最近需要实现国际化功能，在看element-ui的开发文档时，只有简单的引入没有应用实例，对于我这种小白不能get到，无从下手。在网上也查了很多次，发现资料极其少，可能是两者恰好是近年新兴起来的，成熟的参考资料不是那么多。于是自己在参考相关文档后，多次尝试后，终于成功了。写下这部分的总结便于自己以后参考，也希望有可能帮到有需要的人。

一、Vuei18n的安装（这个是基于已经安装了Vue的前提下哦）
命令行：npm install vue-i18n –save
二、使用（参考于网上现有的资料）
也是先在main.js入口文件中进行引入配置。分如下两种情况：
1. 直接在main.js中写入语言的对应，根据自己实际情况来选择所需要的语言，这里以中文和英语为例尝试：

  （1）main.js

 import VueI18n from 'vue-i18n'  Vue.use(VueI18n);  const i18n = new VueI18n({  locale: 'Chinese', // 语言标识   messages:{    Chinese : {      message: {        hello: '你好世界!',        do:'搜一下',        center:'处理中心',        work:'我的工作台',        choose1:'选择1',        choose2:'选择2',        choose3:'选择3',        dan:'订单管理'      }        },      English : {       message: {         hello: 'hello world',         do:'search',         center:'processing center',         work:'my Workbench',         choose1:'option1',         choose2:'option2',         choose3:'option3',         dan:'Order management'          }       }    } })/*还需要将VueI18n挂载到Vue实例上，可全局使用*/new Vue({  el: '#app',  i18n,  render: h => h(App)})

（2）.vue文件

语言下拉选择框的下面是一个简单的导航栏和form表单的一个输入框，使用element-ui插件中的，用来简单试验是否可以配套element-ui使用。因此简单的设置，下拉列表默认值为中文，表单数据也在数据中定义一下。！！然后elment-ui相关要显示的，写法有些不一样：     v-bind 属性名 = "$t('message.xx')" 或  :属性名 = "$t('message.xx')"

最后还需要将调用watch函数，对我们的语言变量进行监听，实时监测所选的语言，按key进行匹配。

2 也可以将翻译文件单独写在assets，在main.js文件中引用即可。如下图所示：我在assets目录下新建了一个translate文件夹，分别存放了中文和英文翻译，便于后面的修改和添加。

Chinese.js代码如下：

export const Ch = {      message: {        hello: '你好世界!',        do:'搜一下',        center:'处理中心',        work:'我的工作台',        choose1:'选择1',        choose2:'选择2',        choose3:'选择3',        dan:'订单管理',        activityname:'活动名称'      }  }

同理English.js也一样，下面在main.js中就修改为：

const i18n = new VueI18n({  locale: 'Chinese', // 语言标识  messages:{    Chinese : Ch,    English : En } })

最后说下自己犯的两个错误：
1.一定要用es6语法将需要引用的文件export出去，刚开始我就没有这样，直接在main.js里引用没有作用T T；
2.在main.js里import时，一定要加{ }，没有加的后果也是……
！！！！！！！可能自己在这方面比较欠缺，在后来第二次项目中使用时，又忘记了加{}，找了好久的原因，事不过三，需要自己谨记。

三.最终实现效果如下：

   选择要设置的语言，默认为中文显示，如下图所示：

   当切换为英文时，效果如下：

有什么不对的地方，希望大家能帮忙指正，一起进步。还有关于element-ui中的国际化的使用，自己也一直没有弄明白，如果大佬们知道能分享给我^_^

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
又过了一周的时间，自己在项目中重新使用时，又遇到了很多新的问题。例如：
（1）虽然在main.js里使用了全局挂载，在各个子组件中使用时，我又分别调用了watch函数去监听locale变量的值变化，，，这样其实是没有必要的。因为我的导航菜单项的路由跳转控制在Home.vue中，在Home.vue中进行监听时即使子路由跳转也会知道locale的值，从而改变语言状态显示。
（2）国际化的模板语言是$t()，而不是{{}}，因此在路由跳转时，原本就是通过遍历显示菜单项，然后每个菜单项匹配router.js中的name,原本的未国际化之前，代码实现如下：

修改为：

只要把route.js中定义路由项的地方，路由的name改为key就可以了，在i18n中$t指令是先通过找到item.name中对应的key，再通过key去匹配翻译文件中的语言状态。
暂且遇到的坑都记在这里了……^_^ 接下来的日子，希望自己能继续保持学习和记录的热情，一步一步地成长，♪(^∇^*)

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 、、、、、、、 后来的后来，在vue中的js部分，包括data里的数据及methods里的方法都不可避免的使用到了国际化标签。需要在调用处通过this关键词调用国际化指令t，即this.t（’key’），确实一般实现上都没有问题。
但后来发现，在elment-ui表单处必然涉及到表单验证，如果是直接在data里写简单的不为空的提示信息验证，如下所示：

验证信息不能被识别，提示信息仍是原样输出，时间紧迫我只能通过在函数语句中调用实现：

通过callback语句调用，使用this.$t(‘key’)又能匹配识别。目前还没有找到原因，希望有知道的小伙伴务必分享给我，非常感谢咯。