关于使用element-ui 和 vue-i18n进行国际化操作（以中英文切换为主）

1. 下载安装好element-ui和vue-i18n: cnpm i --save element-ui 和 cnpm i --save vue-i18n（npm install可代替cnpm i）

2. 在renderer文件里面的main.js里面进行配置引入

   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import '@/assets/css/global.css'
   
   import VueI18n from 'vue-i18n'                              //i18n    
   
   import enLocale from 'element-ui/lib/locale/lang/en'        //英文
   import zhLocale from 'element-ui/lib/locale/lang/zh-CN'     //中文

3. 在main.js中进行自定义语言编写

   const messages = {
       en: {
           enLocale,    //关键字
           title: {
               monitor: 'Monitor',
               parameter: 'Modify',
               setting: 'Setting',
               information: 'About'
           }
       },
       zh: {
           zhLocale,    //关键字
           title: {
               monitor: '监控信息',
               parameter: '修改参数',
               setting: '设置系统',
               information: '关于版本'
           }
       }
   }

4.  在main.js中引入使用自定义语言包

   Vue.use(VueI18n)        
   Vue.use(ElementUI, {
       i18n: (key, value) => i18n.t(key, value)
   })
   
   // Create VueI18n instance with options
   const i18n = new VueI18n({
       locale: store.state.SystemData.locale,   // 设置默认语言，我写在store里面
       messages                                 // 设置自定义的语言包
   })

5. 记得在new vue中添加进来

   /* eslint-disable no-new */
   new Vue({
       el: '#app',
       components: { App },
       router,
       store,
       template: '<App/>',
       i18n    //记得添加
   }).$mount('#app')

6. 在页面中使用， <template></template>里面添加（这里有坑，请注意）

• <el-checkbox v-model="checkedData.user"> {{$t('title.monitor')}}</el-checkbox>
• 在label,value,key等地方使用时，记得在该属性前加上:

 <el-select v-model="dataInput.FanSelete" size="small" :disabled="!checkedData.fan">
        <el-option :label="$t('title.monitor')"   :value="1"></el-option>
        <el-option :label="$t('title.parameter')" :value="2"></el-option>
 </el-select>

 

• 将this.$t() 写到了data属性里，切换语言不起作用，data是一次性产生的，所以只能初始化国际化的值，不能响应变化，要响应变化，官方建议写到computed属性里，所以这里建议使用国际化的控件都在<template></template>里面书写。