vue-i18n的使用

1. 安装vue-i18n

   npm install vue-i18n --save-dev

2. 将i18n引入vue实例(main.js)中，在项目中实现调用API和模板语法。

    import VueI18n from 'vue-i18n'        //引入vue-i18n
     Vue.use(VueI18n);    //通过插件的形式挂载
     /*基本使用：创建i8n对象，方便全局调用*/
     const i18n = new VueI18n({
      locale: 'CN',    // 语言标识
      messages : {
        en: {
          message: {
            hello: 'hello world'
          }
        },
        cn: {
          message: {
            hello: '你好、世界'
          }
        }
      }
     })

3. 新建三个文件,lang(index.js,en.js,cn.js）

        en.js和cn.js作为语言包，index.js作为语言模块，方便引入。通过 this.$i18n.locale 来进行语言的切换

         en.js:

const messages = {
  home: {
    title: 'Book Store',
    hint: 'Computer Science And Software Engineering',
    guessYouLike: 'Guess You Like'}
}

     cn.js:

const messages = {
  home: {
    title: '书城',
    hint: '计算机科学和软件工程',
    guessYouLike: '猜你喜欢',}
}

   index.js

import Vue from 'vue'
import VueI18N from 'vue-i18n'
import en from './en'
import cn from './cn'

Vue.use(VueI18N)
const messages={
    en,
    cn
}

const  i18n=new VueI18N({
    en,//默认为英文
    messages
})
export default i18n

4.模板语法渲染

//模板组件中直接使用
<span>{{$t('book.selectFont')}}</span>
//模板数据绑定使用
<input :placeholder="$t('message.zh')"></input>
//vue组件data中赋值的使用
data:{
   msg:this.$t('message.zh');
}