vue-i18n国际化的使用

（一）vue-i18n国际化的使用

1. 安装 vue-i18n

npm install vue-i18n

2. 注入 vue 实例中，项目中实现调用 api 和 模板语法

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  
  store,
  router,
  template: '<App/>',
  components: { App }
})

上面的代码正式将 vue-i18n 引入 vue 项目中，创建一个 i18n 实例对象，方便全局调用。我们通过 this.$i18n.locale 来进行语言的切换

3. 需要两个 js 文件，通过 require 的形式引入到 入口文件main.js
   
   en.js 英文语言包：

export const m = { 
  friend: 'FRIEND',//朋友
  music: 'MUSIC',//音乐
  download: 'DOWNLOAD'
}

zh.js中文语言包：

export const m = {
  friend: '朋友',
  music: '音乐',
  download: '下载'
}

Vue-i18n 数据渲染的模板语法：{{$t(‘m.music’)}}

（二）element UI 中this. m e s s a g e 和 t h i s . message 和 this. message和this.confirm
this. m e s s a g e : E l e m e n t 注 册 了 一 个 message:Element 注册了一个 message:Element注册了一个message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

this.$message({
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        });

this.$confirm：可以做异步操作来调用接口

this.$confirm('将删除该用户, 是否确定?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(111);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

在confirm确认框中，在点击确定时，若是需要请求接口从数据库中删除，直接在then中写对应的请求就好。