老张跟着老许学前端之----自己研究出来的element-ui国际化

前言：国际化实例-页面中英文切换

两天前，老许给我布置了一个任务，就是让我研究element-ui国际化，说白了就是页面的中英文切换，我以为是个很简单的东西，就是点击一个按钮，然后切换语言就是了，他页面不是有自动翻译功能吗，等我开始看文档的时候，直接懵逼了，这是啥，为啥还得安装包，i18n他到底是个什么东西，于是我就开始试验，把element-ui里面的每一句代码都写在我的代码页中，根本完全实现不了，反正老许刚开始给我上课的时候就说了，别想，别看，去试，去写，写不出来就打印，这次的国际化，真的是一步一步试出来的，下面我就把整个过程写在文档里面，供后面使用的时候参考。

试错的过程太艰辛，我下载了无数个包，又卸载了无数个包，写了无数行代码，创建了十几个文件夹，创建了几十个文档，又删除了几十个文档，失败的过程就不说了，

直接把成功的代码一步一步写下来！！！！！！！

国际化代码步骤：

1、安装i18n

因为我们用的是vue2，所以要找到适合vue2的i18n版本，我找到的是vue-i18n的8.27.0版本：

yarn add vue-i18n@8.27.0 --save

安装好包后去package.json中检查安装版本和安装情况：

2、构造所需文件夹和文档：

在src文件夹下，新建一个文件夹叫language，在这个文件夹下新建两个json文件，分别叫en-US.json和zh-CH.json供后面使用：

3、在建好的文档中写入自己需要的内容：

en-US.json:

 

zh-CH.json:

 

en-US.json:
{
	"langName": "english",
	"menuList": {
		"home": "Home",
		"user": "User management",
		"roles": "Role management",
		"notice": "Notice Announcement",
		"logs": "log management"
	}
}

zh-CH.json:
{
	"langName": "中文",
	"menuList": {
		"home": "主页",
		"user": "用户管理",
		"roles": "角色管理",
		"notice": "通知公告",
		"logs": "日志管理"
	}
}

4、在main.js中去定义他们：

import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
	locale: "zh-CN", // 这里是开始的默认语言，我这里默认是中文
	messages: {
		"zh-CN": require("./language/zh-CH.json"), // 这里是在找语言所在的文件位置
		"en-US": require("./language/en-US.json"),
	},
});

new Vue({
	i18n, //把 i18n 挂载到 vue 根实例上components
	render: (h) => h(App),
}).$mount("#app");

 5、在组件中使用（通过$t(‘xxx’)）的方式中使用：

<template>
  <div class="menuWrap">
    {{ $t("langName") }}  <!--这li的langName就是你的文件中定义的属性名字-->
    <div class="langWrap">
      <!--这里定义两个按钮，点击切换中英文-->
      <button class="langInner" @click="handleCh" v-if="china">中文</button>
      <button class="langInner" @click="handleEn" v-if="eng">英文</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      china: false,
      eng: true,
    };
  },
  methods: {
    handleCh() {
      // 这里我在页面中只显示一个按钮，所以点击的时候切换按钮的v-if
      this.china = false;
      this.eng = true;
      this.$i18n.locale = "zh-CN"; 
      // 中文按钮点击将main.js中定义的初始值locale转换为中文
    },
    handleEn() {
      this.china = true;
      this.eng = false;
      this.$i18n.locale = "en-US";
      // 英文按钮点击将main.js中定义的初始值locale转换为英文
    },
  },
};
</script>

6、成品展示：

初始值： 字体初始值为中文，按钮显示是切换成英文

点击英文按钮后：字体显示为英文，按钮显示切换成中文

结束！！！！！！！！！！整整两天的努力，太有成就感了！