vue-i18n 国际化 element ui实际项目中的整理

前端国际化文档
一、简介
1、项目中使用的国际化插件----vue-i18n；
2、实现
前端页面的国际化实现，copy一份项目的中文，然后把页面上的中文全部改成英文，创建语言包，element ui组件的国际化已经在项目的配置文件中完成；
通过登陆页面的按钮触发事件的形式，来控制 locale 的值，去调用对应的语言包实现的国际化；
在页面中可通过topMenu的下拉菜单Language切换语言;
3、配置
项目中配置默认为中文，首次进入获取用户缓存的语言进行显示；
根据缓存的语言预测用户的语言习惯，显示相应的语言；
4、语言包
在src/i18n/page目录下新建页面所需要的语言包（中文和英文），中文语言包引入到src/i18n/langs/zh中，英文语言包引入到src/i18n/langs/en；
语言包命名规范：模块名.性质名.特殊名：XXXXX；

二、基本使用
1、vue组件模板中的使用

{{$t('key.value')}}

2、vue组件模板数据绑定的使用 3、vue组件data中赋值的使用 data:{ msg:this.$t('key.value');}

4、vue组件filters中的使用
组件中引用import i18n from ‘@/i18n/i18n’;
 i18n.t(‘key.value’),
5、vue组件js中的使用
mes: this.KaTeX parse error: Unexpected character: '' at position 16: t('key.value') ̲模板板字符串：`{this.KaTeX parse error: Expected 'EOF', got '}' at position 15: t('key.value')}̲` 引用import i18…t(’‘key.value’’)}}

9、在element ui组件中集成的语言切换，已经配置好了，不用新建语言包，例如 page组件、日期组件等；
10、在页面中获取当前设置的语言
Let currentLang = localStorage.lang == ‘zh’
Let currentLang = localStorage.lang == ‘en’
11、时间的国际化处理
在所需转换的页面中引入公共方法；
import dataLang from ‘@/i18n/data’
在模板中应用（自定义列）例：
{{ dataLang(scope.row.createTime)}}
在methods中应用，例：
let enDate = dataLang(createTime)

三、注意事项
1、中文和英文的字体宽度不一样，form的 labelWidth要注意；
2、按钮名称的英文太长，按钮会自动变长，会影响页面样式；
3、Form表单label取名规范易懂，相同的label在语言包中可以复用；
4、Table的表头取名规范，太长的英文用简称代替；
5、语言包按照页面新建，不要耦合在一起；
6、因不同项目有各个方面的差异，以上方法都是在本项目中测试过，仅限于本项目使用；
7、务必遵循严格的语言包命名规范，出现相同的语言包，会影响其他模块；
8、项目中相同的内容显示尽量统一，例：企业名称，有的模块中是企业名称，有的模块是公司名称等；

四、英文规范注意事项
1、导航栏（统一下面的英文书写格式）

2、侧边栏（统一下面的英文书写格式）

3、有关姓名的英文名和中文名的表单填写，填写name的Input的样式需要调整

4、字体标准
使用的系统字体一般是：Arial;
英文和中文的字体大小12–16px之间；
5、时间的显示不同
Hh:mm:ss 15 April 2020 
6、换行启用严格模式

7、项目中的专业用词翻译参照专有名称翻译，不要使用翻译软件的直译，会有歧义和误差。