目标：实现前端多语言
经过前面三章，想必大家对于使用vue和element已经有了极大的信心，这很好
本章我们演示下如何实现中日英三种语言的切换
老规矩，我们还是先看官网，找找思路
可以看到，实现多语言，是用了vue-i18n这个插件
并且我们注意到，这个i18n有5.x 和其他的版本，处理方式有区别
我们先安装vue-i18n这个库，方法和安装element很相似
先打开一个新的Terminal窗口
输入安装命令 npm install vue-i18n -save,回车
很快安装好了。打开package.json文件，确认下版本。
（如安装时有怪问题，可尝试将整个项目目录的权限，对所有用户设置为“完全控制”,
安装包出现混乱时，可关闭idea，删除node_modules目录下所有文件，打开项目，执行cnpm install）
第一步，先在src目录下创建一个langs目录，里面放我们自定义的多语言资源文件
先创建简体中文的，命名为zh-CN.js
注意这个名字不是乱写的，参考文档https://element.eleme.cn/#/zh-CN/component/i18n ，最底下有
同样的，我们创建en.js和ja.js两个文件，内容是英文和日文
然后我们在langs下添加index.js文件，内容如下
import Vuefrom 'vue'
import VueI18nfrom 'vue-i18n'
import elementEnLocalefrom 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocalefrom 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementJaLocalefrom 'element-ui/lib/locale/lang/ja'// element-ui lang
import enLocalefrom './en'
import zhLocalefrom './zh-CN'
import jaLocalefrom './ja'
Vue.use(VueI18n)
let lang ='zh-CN' //默认中文
Vue.config.lang =lang
// vue-i18n 6.x+写法
Vue.locale = () => {}
const messages = {
'zh-CN':Object.assign(elementZhLocale, zhLocale),
'en':Object.assign(elementEnLocale, enLocale),
'ja':Object.assign(elementJaLocale, jaLocale)
}
const i18n =new VueI18n({
locale:lang,
messages
})
export default i18n
这个代码先不要花太多时间看，复制过去，先把功能实现，不要迷失在细节里
然后我们在main.js里引用这个index.js，如下图
把MyComponent.vue里面，之前写死的中文改成多语言的写法
好了，查看一下浏览器页面，发现，并没有什么变化。
（因为正常显示了资源文件里的中文，和以前写死的内容一致）
现在把langs/index.js里的let lang ='zh-CN'，改成let lang ='en'，好了，看到英文了
把en改成ja试试，日文也出来了，符合预期！
非常好，我们已经实现了多语言，现在可以喝杯咖啡了！
不过，现在多语言还没有流畅的切换，还不够高级!
歇口气，我们继续
为了实现自由切换，我们需要一个下拉框
在components目录下新建文件LangSelect.vue
从这里复制个下拉框的代码进去 https://element.eleme.cn/#/zh-CN/component/select
稍微改改，变成这样
多语言控件做好了，我们把它添加到App.vue里面
页面布局有点丑，先不要管这些细节
切换一下下拉框试试
可以了，中日英三种语言流畅的切换！
不过，还没完，前面讲了多语言在template部分的写法有两种
控件里面的，是:label="$t('myComponent.date')" 这样
控件外面的，是<el-button type="primary" @click="onSubmit">{{$t('myComponent.add')}}</el-button>这样
还有一种，在js代码里，如果我们要弹出一个多语言的消息，写法是这样
效果如下
ok，多语言我们已经搞定了，顺便还学习了 watch的用法、下拉框、弹出消息
是时候放松一下了，本章完
