VueI18n插件的简单应用于国际化
作为一个前端小白,刚刚接触学习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',
choose2:'option2',
choose3:'option3',
dan:'Order management'
}
}
}
})
/*还需要将VueI18n挂载到Vue实例上,可全局使用*/
new Vue({
el: '#app',
i18n,
render: h => h(App)
})
(2).vue文件
语言下拉选择框的下面是一个简单的导航栏和form表单的一个输入框,使用element-ui插件中的,用来简单试验是否可以配套element-ui使用。因此简单的设置,下拉列表默认值为中文,表单数据也在数据中定义一下。
!!然后elment-ui相关要显示的,写法有些不一样:
v-bind 属性名 = "$t('message.xx')"
或 :属性名 = "$t('message.xx')"
最后还需要将调用watch函数,对我们的语言变量进行监听,实时监测所选的语言,按key进行匹配。
2 .也可以将翻译文件单独写在assets,在main.js文件中引用即可。如下图所示:我在assets目录下新建了一个translate文件夹,分别存放了中文和英文翻译,便于后面的修改和添加。
Chinese.js代码如下:
export const Ch =
{
message: {
hello: '你好世界!',
do:'搜一下',
center:'处理中心',
work:'我的工作台',
choose1:'选择1',
choose2:'选择2',
choose3:'选择3',
dan:'订单管理',
activityname:'活动名称'
}
同理English.js也一样,下面在main.js中就修改为:
const i18n = new VueI18n({
locale: 'Chinese', // 语言标识
messages:{
Chinese : Ch,
English : En
}
})
最后说下自己犯的两个错误:
1.一定要用es6语法将需要引用的文件export出去,刚开始我就没有这样,直接在main.js里引用没有作用T T;
2.在main.js里import时,一定要加{ },没有加的后果也是……
!!!!!!!可能自己在这方面比较欠缺,在后来第二次项目中使用时,又忘记了加{},找了好久的原因,事不过三,需要自己谨记。
三.最终实现效果如下:
选择要设置的语言,默认为中文显示,如下图所示:
当切换为英文时,效果如下:
有什么不对的地方,希望大家能帮忙指正,一起进步。还有关于element-ui中的国际化的使用,自己也一直没有弄明白,如果大佬们知道能分享给我^_^
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
又过了一周的时间,自己在项目中重新使用时,又遇到了很多新的问题。例如:
(1)虽然在main.js里使用了全局挂载,在各个子组件中使用时,我又分别调用了watch函数去监听locale变量的值变化,,,这样其实是没有必要的。因为我的导航菜单项的路由跳转控制在Home.vue中,在Home.vue中进行监听时即使子路由跳转也会知道locale的值,从而改变语言状态显示。
(2)国际化的模板语言是$t(),而不是{{}},因此在路由跳转时,原本就是通过遍历显示菜单项,然后每个菜单项匹配router.js中的name,原本的未国际化之前,代码实现如下:
修改为:
只要把route.js中定义路由项的地方,路由的name改为key就可以了,在i18n中$t指令是先通过找到item.name中对应的key,再通过key去匹配翻译文件中的语言状态。
暂且遇到的坑都记在这里了……^_^ 接下来的日子,希望自己能继续保持学习和记录的热情,一步一步地成长,♪(^∇^*)
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 、、、、、、、 后来的后来,在vue中的js部分,包括data里的数据及methods里的方法都不可避免的使用到了国际化标签。需要在调用处通过this关键词调用国际化指令t,即this.t(’key’),确实一般实现上都没有问题。
但后来发现,在elment-ui表单处必然涉及到表单验证,如果是直接在data里写简单的不为空的提示信息验证,如下所示:
验证信息不能被识别,提示信息仍是原样输出,时间紧迫我只能通过在函数语句中调用实现:
通过callback语句调用,使用this.$t(‘key’)又能匹配识别。目前还没有找到原因,希望有知道的小伙伴务必分享给我,非常感谢咯。
声明:本博文由博主Bonjourjw(http://blog.csdn.net/bonjourjw)原创编辑,我经其同意后转载过来供大家交流学习,未经其同意禁止转载!
VueI18n插件的简单应用于国际化的更多相关文章
- vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用
vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...
- Xcode7使用插件的简单方法&&以及怎样下载到更早版本的Xcode
Xcode7自2015年9上架以来也有段时间了, 使用Xcode7以及Xcode7.1\Xcode7.2的小伙伴会发现像VVDocumenter-Xcode\KSImageNamed-Xcode\HO ...
- 移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage
https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...
- 数据统计表插件,highcharts插件的简单应用
highcharts插件的简单应用,非常全能好用的一个数据统计表插件. $(function () { $('#container').highcharts({ chart:{ type:" ...
- ASP.NET MVC5 插件机制中插件的简单实现
Autofac 依赖注入 ASP.NET MVC5 插件机制中插件的简单实现 一.前言 由于项目业务复杂,创建了多个插件并把他们放在了不同的项目中,项目使用AutoFac做的IOC:但是主项目可以注入 ...
- swiper插件的简单使用,实现图片轮播
移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...
- nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端进行),但设置前端表单校验也是至关重要的,自己写逻辑 ...
- 用react的ReactCSSTransitionGroup插件实现简单的弹幕动画
1,开始的思路 公司想做直播方面的项目,并想加入弹幕的功能,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上.所以技术老大让我研究下如何用react实现弹幕的功能.下面我就 ...
- 【UI插件】简单的日历插件(下)—— 学习MVC思想
前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...
随机推荐
- python作用域与命名空间
什么是命名空间 比如有一个学校,有10个班级,在7班和8班中都有一个叫“小王”的同学,如果在学校的广播中呼叫“小王”时,7班和8班中的这2个人就纳闷了,你是喊谁呢!!!如果是“7班的小王”的话,那么就 ...
- Asp.Net Web API(一)
什么是Web API HTTP不仅仅服务于Web Pages.他也是一个创建展示服务和数据的API的强大平台.HTTP是简单的,灵活的,无处不在的.你能够想象到几乎任何的平台都会有HTTP服务库.HT ...
- 小白的Python之路 if __name__ == '__main__' 解析
if __name__ == '__main__' 参考文献: http://www.cnblogs.com/xuxm2007/archive/2010/08/04/1792463.html http ...
- 【python】集合set
- xCode8以及iOS10 的新特性
其他:ios10中 适配问题(1.系统判断方法失效:2.隐私数据的访问问题:3.UIColor 问题4.真彩色的显示5.ATS问题6.UIStatusBar问题7.UITextField8.UserN ...
- Visual Studio Code 通过 Chrome插件Type Script断点调试Angular 2
1. 下载Visual Studio Code (https://code.visualstudio.com/) 2. 安装插件Debugger for chrome 3. 确定tsconfig.js ...
- express整合webpack的打包文件dist
对于我来说,第一次接触前后端整合问题的小白,刚开始是一脸懵逼,这个问题整整坑了我一个晚上加一个早上,现在写出来总结: 前端开发:vue-cli+webpack: 后台开发:nodejs框架expres ...
- Java后端程序员都做些什么?
这个问题来自于QQ网友,一句两句说不清楚,索性写个文章. 我刚开始做Web开发的时候,根本没有前端,后端之说. 原因很简单,那个时候服务器端的代码就是一切:接受浏览器的请求,实现业务逻辑,访问数据库, ...
- js基础:对DOM进行操作,删除、添加元素
<body> <div id="div1"> <p id="p1">第一段</p> <p id=" ...
- 人工智能一:Al学习路线
想要跨入AI的大门,如何跨?终于找到了一套学习方法 努力向你靠近 2017-12-03 07:14:51 当下人工智能领域的发展已经有了燎原之势,麦肯锡全球研究院就认为人工智能促进对社会的转变速度将比 ...