作为一个前端小白,刚刚接触学习Vue.js框架结合Element-ui组件开发项目。由于最近需要实现国际化功能,在看element-ui的开发文档时,只有简单的引入没有应用实例,对于我这种小白不能get到,无从下手。在网上也查了很多次,发现资料极其少,可能是两者恰好是近年新兴起来的,成熟的参考资料不是那么多。于是自己在参考相关文档后,多次尝试后,终于成功了。写下这部分的总结便于自己以后参考,也希望有可能帮到有需要的人。
一、Vuei18n的安装(这个是基于已经安装了Vue的前提下哦)
命令行:npm install vue-i18n –save
二、使用(参考于网上现有的资料)
也是先在main.js入口文件中进行引入配置。分如下两种情况:
1. 直接在main.js中写入语言的对应,根据自己实际情况来选择所需要的语言,这里以中文和英语为例尝试:
(1)main.js
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'Chinese', // 语言标识
messages:{
Chinese : {
message: {
hello: '你好世界!',
do:'搜一下',
center:'处理中心',
work:'我的工作台',
choose1:'选择1',
choose2:'选择2',
choose3:'选择3',
dan:'订单管理'
}
},
English : {
message: {
hello: 'hello world',
do:'search',
center:'processing center',
work:'my Workbench',
choose1:'option1',