I18n (internationalization ) —未完美
产物国际化是产物后期保护及推行中重要的一环,经由过程国际化操纵使得产物能更好顺应差别言语和区域的需求
国际化重点:
1、 言语
言语本地化
2、 文明
色彩、风俗等
3、 誊写习气
日期花样、时区、数字花样、誊写方向
备注:项目中会兵分两路,一起是言语的国际化,另一起重要为文明国际化
产物设计之初引入国际化规范,相符项目的开辟流程。
国内重要重要三点,一个是港澳台采纳中文繁体+英文,内陆浅显中文简体,新疆等区域采纳文明规范。
Vue-I18n
Vue-I18n装置
CDN:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
NPM:
npm install vue-i18n --save-dev
vue-I18n暴露$t对象举行运用
项目例子(面向中国内陆及港澳台)
Main.js
import VueI18n from 'vue-i18n'
/* 平台国际言语静态字典 */
import LangEn from './lang/en'
import LangZhCHS from './lang/zhCHS'
import LangZhCHT from './lang/zhCHT'
/* vue-i18n注册 */
Vue.use(VueI18n)
// 设置言语项
const i18n = new VueI18n({
locale: 'zhCHS',
messages: {
'en': LangEn,
'zhCHS': LangZhCHS,
'zhCHT': LangZhCHT
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
i18n,
components: { App },
template: '<App/>'
})
zhCHS.js
经由过程exports
module.exports = {
buttom: {
cancel: '作废',
determine: '肯定',
login: '上岸',
signOut: '退出上岸',
registered: '注册',
search: '查询',
submit: '提交',
save: '保留'
}
}
Example.vue
经由过程$t举行数据绑定
例子中初始化先搜检浏览器默许言语,并保留到localstorage中
经由过程this.$i18n.locale能够随便切换版本
<v-btn flat>{{$t('buttom.cancel')}}</v-btn>
<v-btn-toggle v-model="icon">
<v-btn flat value="zhCHS">
<span>中文</span>
<v-icon>format_align_left</v-icon>
</v-btn>
<v-btn flat value="en">
<span>English</span>
<v-icon>format_color_text</v-icon>
</v-btn>
</v-btn-toggle>
watch: {
icon (val) {
this.$i18n.locale = val
this.setLocalStorage('PLAY_LANG', val)
}
},
created () {
let lang = this.getLocalStorage('PLAY_LANG')
if (lang) {
this.icon = lang
} else {
let defaultLang = this.getNavigatorLang() // 猎取浏览器设置言语
this.setLocalStorage('PLAY_LANG', defaultLang)
this.icon = defaultLang
}
}
效果图:
中文
英文
完全项目github地点:https://github.com/hty7/vue-d…