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. tp5中使用中间控制器代理路由,以避免创建过多的无用控制器方法

    在写项目的时候偶尔会加载一些不需要传递参数的静态视图,例如 class Index extends Common { public function index() { return $this-&g ...

  2. PS 2018安装教程

    写在前面:简单的PS是每一个前端开发者必备的技能,官方的PS安装包是需要购买的,但是可以免费的体验7天. 01 下载安装包,根据自己电脑的系统 Photoshop CC2018/64位下载地址:链接: ...

  3. ABAP实现Blowfish加密算法

    看到SAP社区中有人问是否存在ABAP实现的Blowfish加密算法,无人回答.于是动手实现了一个blowfish-abap.通过blowfish-abap可以在SAP系统中使用Blowfish对数据 ...

  4. Flask源码分析一:服务启动

    前言: Flask是目前为止我最喜欢的一个Python Web框架了,为了更好的掌握其内部实现机制,这两天准备学习下Flask的源码,将由浅入深跟大家分享下,其中Flask版本为1.1.1. Flas ...

  5. msf各种弱口令爆破

    Msf: 写的很乱 记录下msf各个爆破弱口令的模块 run post/windows/gather/arp_scanner RHOSTS=10.10.10.0/24 使用arp_scanner模块 ...

  6. PHP 哈夫曼的实现

    <?php namespace Test; use Iterator; use ArrayAccess; use Exception; // 叶子结点或者连接结点的基类 class Huffma ...

  7. python编程系列---可迭代对象,迭代器和生成器详解

    一.三者在代码上的特征 1.有__iter__方法的对象就是可迭代类(对象) 2.有__iter__方法,__next()方法的对象就是迭代器3.生成器 == 函数+yield 生成器属于迭代器, 迭 ...

  8. 程序员修神之路--为什么有了SOA,我们还用微服务?

    菜菜哥,我最近需要做一个项目,老大让我用微服务的方式来做 那挺好呀,微服务现在的确很流行 我以前在别的公司都是以SOA的方式,SOA也是面向服务的方式呀 的确,微服务和SOA有相同之处 面向服务的架构 ...

  9. dapper之连接数据库(Oracle,SQL Server,MySql)

    因为项目需求,需要项目同时可以访问三个数据库,因此本人经过一番研究,得出以下代码. 1.建立公共连接抽象类(DataBase) public abstract class DataBase { /// ...

  10. 树莓派上搭建arduino命令行开发环境

    -------------还是博客园上面的格式看这舒服,不去新浪了------------- 为什么要在树莓派上开发arduino呢?总要把树莓派用起来嘛,不然老吃灰. 树莓派使用SSH时没有图形界面 ...