VueI18n介绍

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

使用方法

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

输出:

<div id="#app">
<p>こんにちは、世界</p>
</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. 第三方登录之GitHub篇

    第一步,准备工作.获取Client ID和Client Secret 1.自行登陆GitHub官网,点击Setting,如下图: 2.继续,点击Developer settings,如下图: 3.继续 ...

  2. 总结下var、let 和 const 的区别

    一.var变量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. nginx搭建web服务器

    现在有如此众多web服务器,我觉得nginx服务器一个很重要的优势就是它能在支持高并发请求的同时保持高效的服务,接下来我将搭建一个简单的web服务器. 1.编写自己的网页 在nginx目录下新建文件夹 ...

  4. Python 爬虫 爬取 煎蛋网 图片

    今天, 试着爬取了煎蛋网的图片. 用到的包: urllib.request os 分别使用几个函数,来控制下载的图片的页数,获取图片的网页,获取网页页数以及保存图片到本地.过程简单清晰明了 直接上源代 ...

  5. git操作指令,以及常规git代码操作

    安装git后操作指令如下:可以查阅git安装使用操作指南详情git安装使用操作图示详情.note 线上可参考指南:http://www.bootcss.com/p/git-guide/   所有操作在 ...

  6. Vue-CLI项目路由案例汇总

    0901自我总结 Vue-CLI项目路由案例汇总 router.js import Vue from 'vue' import Router from 'vue-router' import Cour ...

  7. 关于CSS Grid Layout的代码解释

    .wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1 ...

  8. 关于JavaScript if...else & if 判断简写

    <script type="text/javascript"> 如果你想写 if (!false){ alert('false'); } 不妨考虑写成: false | ...

  9. python学习-正则表达式(十)

    1.查看re模块的全部属性和函数 >>>import re,pprint >>>pprint.pprint(re.__all__) ['match', 'fullm ...

  10. 压敏电阻的保护作用—NDF达孚电子科技

    压敏电阻是常见的电子元器件之一,它的保护作用被大家熟知和运用.压敏电阻的主要用于在电路承受过压时进行电压钳位,吸收多余的电流以保护灵敏器件.压敏电阻的导电特性随着施加电压的变化呈非线性变化,它能保护电 ...