VueI18n介绍

vue-i18n是一个vue组件,主要功能是提供国际化多语言的支持。例如项目中打印收费单功能,需要支持中英文打印,使用该组件就很容易的实现,而不必写两份打印单页面。

使用方法

  1. 安装 npm install --save vue-i18n
  2. 在vue中引入该组件
  1. import Vue from 'vue';
  2. import VueI18n from 'vue-i18n';
  3. Vue.use(VueI18n);
  1. 创建vue-i18n实例
  1. import Vue from 'vue';
  2. import VueI18n from 'vue-i18n';
  3. Vue.use(VueI18n);
  4. const messages = {
  5. en: {
  6. message: {
  7. hello: 'hello world'
  8. }
  9. },
  10. ja: {
  11. message: {
  12. hello: 'こんにちは、世界'
  13. }
  14. }
  15. }
  16. // Create VueI18n instance with options
  17. const i18n = new VueI18n({
  18. locale: 'ja', // set locale
  19. messages, // set locale messages
  20. })
  1. 创建vue实例时,将i18n对象以参数方式传过去
  1. new Vue({ i18n }).$mount('#app')
  1. 页面上使用i18n中的资源
  1. <div id="app">
  2. <p>{{ $t("message.hello") }}</p>
  3. </div>

输出:

  1. <div id="#app">
  2. <p>こんにちは、世界</p>
  3. </div>

详细查看 官网

VueI18n - 多语言国际化支持插件的更多相关文章

  1. Spring Boot + Freemarker多语言国际化的实现

    最近在写一些Web的东西,技术上采用了Spring Boot + Bootstrap + jQuery + Freemarker.过程中查了大量的资料,也感受到了前端技术的分裂,每种东西都有N种实现, ...

  2. VUE实现Studio管理后台(三):支持多语言国际化(vue-i18n)

    RXEditor的第一版本是英文版,有些朋友看起来觉得不习惯,后来因为惰性,不愿意再修改旧代码加入中文版,这次提前就把这个问题解决了,克服惰性最好的方式,就是想到就尽快去做,避免拖延. 本来计划在界面 ...

  3. GJM :用JIRA管理你的项目(二)JIRA语言包支持及插件支持 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  4. 自定义JSP标签实现语言国际化(类似struts text标签),并同时支持图片、JS文件国际化

    源代码及样例下载地址: http://download.csdn.net/detail/u014569459/7169385 一.功能说明: 1. 支持语言国际化 2. 支持图片文件.JS文件国际化 ...

  5. 使用 PySide2 开发 Maya 插件系列三:qt语言国际化(internationalization)

    使用 PySide2 开发 Maya 插件系列三:qt语言国际化(internationalization) 前言: 这是 qt for python 的语言国际化,基于 UI 的,python 也有 ...

  6. 用JIRA管理你的项目——(二)JIRA语言包支持及插件支持

    昨天兴奋地把JIRA环境搭好,瞅了一眼管理界面--全英文,真是汗! 尚且不说全中文版管理界面让人操作起来多少会有困难,更别说是全英文! 昨天赞叹JIRA语言包支持丰富,今天终于找到了号称100%的语言 ...

  7. jquery/vue/react前端多语言国际化翻译方案指南

    ❝ 本文章共3470字,预计阅读时间5-10分钟. ❞ 国际化-前言 每个开发者能希望编写的程序可以让全世界的用户使用,它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素.换种说法,「应用程序 ...

  8. 【Android Studio安装部署系列】二十九、Android Studio安装本地插件(以国际化方法插件AndroidLocalizationer为例)

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 实际开发中,需要用到插件,用来提高效率,这里就以生成国际化strings.xml的插件AndroidLocalizationer为例 ...

  9. 使用JSP的fmt标签实现国际化支持 - smart-framework ; smart-plugin-i18n

    使用JSP的fmt标签实现国际化支持   Smart-framework框架使用smart-plugin-i18n插件来完成国际化处理,原理相同,使用过滤器进行参数设置. ============== ...

随机推荐

  1. 计算机视觉(二)-opencv之createTrackbar()详解

    摘要: 我学习openCV3看的是<学习openCV3>这本书,很厚的一本,不知道是不是因为自己看的还不是很多,个人觉得里面的有些重要函数讲的不是很详细,比如createTrackbar( ...

  2. 深入理解SpringCloud之Gateway

    虽然在服务网关有了zuul(在这里是zuul1),其本身还是基于servlet实现的,换言之还是同步阻塞方式的实现.就其本身来讲它的最根本弊端也是再此.而非阻塞带来的好处不言而喻,高效利用线程资源进而 ...

  3. 关于jQery中$.Callbacks()的理解

    $.Callbacks()主要使用了回调,而说到回调又不得不说javascript的事件循环机制了. 所以想了解回调最好先看看js运行机制. $.Callbacks()可以理解为创建一个回调队列 va ...

  4. AVL平衡二叉查找树

    二叉排序树: 定义 二叉排序树,又叫二叉查找树,它或者是一棵空树:或者是具有以下性质的二叉树: 1. 若它的左子树不空,则左子树上所有节点的值均小于它的根节点的值: 2. 若它的右子树不空,则右子树上 ...

  5. 从零学习基于Python的RobotFramework自动化

    从零学习基于Python的RobotFramework自动化 一.        Python基础 1)      版本差异 版本 编码 语法 其他 2.X ASCII try: raise Type ...

  6. Python3_基础

    目录 数据类型 变量 数据类型的转换 算术操作符 输入 字符串常用方法 数据类型 我们先来看看三种常见的数据类型 字符串 str 在Python中,字符串一般都用引号引起来,不管是用单引号还是双引号都 ...

  7. JSON:JSON对象和JSON数组混排的复杂字符串

    在java中的一个好用的JSON工具包:net.sf.json.JSONObject 和 net.sf.json.JSONArray 一 解析JSON对象和JSON数组类型混排的复杂字符串 举个例子: ...

  8. jmeter打印变量的三种方式

    1.使用Debug Sampler 2.使用log打印到jemter日志 3.使用System.out.println打印到cmd命令行

  9. 手动部署 Docker+Grafana+Prometheus系统监控之Redis

    监控规划图 使用Docker 创建两台Redis docker run -d --name redis1 redis docker run -d --name redis2 redis 查看redis ...

  10. 【阿里云IoT+YF3300】7.物联网设备表达式运算

    很多时候从设备采集的数据并不能直接使用,还需要进行处理一下.如果采用脚本处理,有点太复杂了,而采用表达式运算,则很方便地解决了此类问题. 一.  设备连接 运行环境搭建:Win7系统请下载相关的设备驱 ...