Vue框架——Vue-i18n学习总结
1.概述
Vue I18n 是 Vue.js 的国际化插件,格局比较大,具体怎么解释还是不太好说,直接看用法就能明白。简单说一下为什么叫这个名字:internationalization(i+中间的18个字母+n)。
2.配置方法
(1)安装vue-I18n插件
//需要使用npm进行安装
npm install vue-i18n
(2)项目中配置使用
import Vue from 'vue'
import VueI18n from 'vue-i18n'//引入对应的组件
Vue.use(VueI18n);//挂再使用对应的插件
3.基本使用方法
(1)根据本地语言来挂在不同的信息(变量)
const messages = {
//基本常见,多语言网页,使用this.$i18n.locale="zh";可以修改对应的语言模式,其处理一般放在一个lang文件下
//封装处理多个语言
locale:'zh',
en: {
message: {
hello: 'hello'
},
zh: {
message: {
hello: '你好'
}
}
}
// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
locale: 'zh-cn', // 设置地区
messages, // 设置地区信息
})
// 通过 `i18n` 选项创建 Vue 实例
new Vue({ i18n }).$mount('#app')
//App.vue组件中的使用举例了(由于挂载到了app上面,因此可以在任意组件中使用该地区信息,即:messages)
//使用形式如下:
<div>{{ $t("message.hello") }}</div><!--你好-->
(2)vue-i18n的基本变量形式:
const messages = {
en: {
message: {
hello: '{msg} world'
}
}
}
//实例化使用方式:
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
const messages = {
en: {
message: {
hello: '{1} world'
}
}
}
//实例化使用方式:
<p>{{ $t('message.hello', ['test1','test2']) }}</p><!--对应的数据:test2 world-->
//或者:
<p>{{ $t('message.hello', { '1': 'test2' }) }}</p><!--对应数据:test2 world->
//i8n处理复数
const messages = {
en: {
massage:{
car: 'car | cars',
}
}
}
//使用方式:
<p>{{ $tc('message.car',3)}}</p><!--对应的数据:cars-->
至于其他的方法看的不是很懂,遇到了再去查吧。