作为一个前端小白，刚刚接触学习Vue.js框架结合Element-ui组件开发项目。由于最近需要实现国际化功能，在看element-ui的开发文档时，只有简单的引入没有应用实例，对于我这种小白不能get到，无从下手。在网上也查了很多次，发现资料极其少，可能是两者恰好是近年新兴起来的，成熟的参考资料不是那么多。于是自己在参考相关文档后，多次尝试后，终于成功了。写下这部分的总结便于自己以后参考，也希望有可能帮到有需要的人。
一、Vuei18n的安装（这个是基于已经安装了Vue的前提下哦）
命令行：npm install vue-i18n –save
二、使用（参考于网上现有的资料）
也是先在main.js入口文件中进行引入配置。分如下两种情况：
1. 直接在main.js中写入语言的对应，根据自己实际情况来选择所需要的语言，这里以中文和英语为例尝试：
（1）main.jsimport 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’)又能匹配识别。目前还没有找到原因，希望有知道的小伙伴务必分享给我，非常感谢咯。
声明：本博文由博主Bonjourjw（http://blog.csdn.net/bonjourjw）原创编辑，我经其同意后转载过来供大家交流学习，未经其同意禁止转载！