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. Android实现apk插件方式换肤

    换肤思路: 1.什么时候换肤? xml加载前换肤,如果xml加载后换肤,用户将会看见换肤之前的色彩,用户体验不好. 2.皮肤是什么? 皮肤就是apk,是一个资源包,包含了颜色.图片等. 3.什么样的控 ...

  2. C# ManualResetEvent用法

    ManualResetEvent表示线程同步事件,可以对所有进行等待的线程进行统一管理(收到信号时必须手动重置该事件) 其构造函数为: public ManualResetEvent (bool in ...

  3. redis之spring应用

    前言 读本文之前,需要大家对redis有所了解,大家可以去看一下我之前分享的redis安装及简单使用这一随笔,而本文我将跟大家分享学习一下redis与spring的集成.当然,首先需要打开我们的red ...

  4. 学以致用,通过字节码理解:Java的内部类与外部类之私有域访问

    目录: 内部类的定义及用处 打开字节码理解内部类 一.内部类的定义及用处 内部类(inner class)是定义在另一个类中的类.使用内部类,我们可以: 访问该类定义所在的作用域中的数据,包括私有的数 ...

  5. .net core gRPC与IdentityServer4集成认证授权

    前言 随着.net core3.0的正式发布,gRPC服务被集成到了VS2019.本文主要演示如何对gRPC的服务进行认证授权. 分析 目前.net core使用最广的认证授权组件是基于OAuth2. ...

  6. Qt5教程: (8) 标准对话框和文件对话框

    1. about对话框 包含头文件 #include <QMessageBox> 添加菜单项 QAction *p3 = pDialog->addAction("关于&qu ...

  7. Cocos2d-x入门之旅[4]场景

    我们之前讲了场景图(Scene Graph) 的概念,继续之前你先要知道 场景图决定了场景内节点对象的渲染顺序 渲染时 z-order 值大的节点对象会后绘制,值小的节点对象先绘制 HelloWorl ...

  8. SpringBoot 2.0整合阿里云OSS,实现动静分离架构

    前言 相信大部分开发者对下面这张架构图并不陌生吧,现在很多网站/应用都采用了动静分离的架构进行部署.博主的博客也不例外,主机采用的是阿里云的 ECS,使用 CDN 做静态内容分发,不过静态文件还是存储 ...

  9. Flink Connector 深度解析

    作者介绍:董亭亭,快手大数据架构实时计算引擎团队负责人.目前负责 Flink 引擎在快手内的研发.应用以及周边子系统建设.2013 年毕业于大连理工大学,曾就职于奇虎 360.58 集团.主要研究领域 ...

  10. 学习笔记:flutter项目搭建(mac版)

    什么是flutter Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的 ...