Vue-i18n框架学习总结

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-->

至于其他的方法看的不是很懂，遇到了再去查吧。