vue.js国际化 vue-i18n插件的使用详解


Posted in Javascript onJuly 07, 2017

安装方法

1.使用CDN直接引用

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2.NPM

$ npm install vue-i18n

3.Yarn

$ yarn add vue-i18n

使用方法

在这里只介绍vue的使用方法

<script>
/* 国际化使用规则 */
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
 en: {
  message: {
   hello: 'world hello'
  }
 },
 zh: {
  message: {
   hello: '世界'
  }
 }
}

const i18n = new VueI18n({
 locale: 'zh',
 messages
})

export default {
 data () {
  return {
   hello: this.$t('message.hello')
  }
 },
 i18n
}

</script>

HTML

<div id="#app">
 <p>{{ $t("message.hello") }}</p>
</div>

vue-i18n插件使用参考文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.post用法关于type设置问题补充
Jan 03 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
vue中的scope使用详解
Oct 29 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
angularjs模态框的使用代码实例
Dec 20 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 #Javascript
微信小程序之绑定点击事件实例详解
Jul 07 #Javascript
分享19个JavaScript 有用的简写写法
Jul 07 #Javascript
Vue.js数据绑定之data属性
Jul 07 #Javascript
js实现从左向右滑动式轮播图效果
Jul 07 #Javascript
JavaScript实现图片无缝滚动效果
Jul 07 #Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
Move.js入门
2017/02/08 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
VUE实现吸底按钮
2021/03/04 Vue.js
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
Python实现完整的事务操作示例
2017/06/20 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
linux面试题参考答案(7)
2014/07/24 面试题
大学生四个方面的自我评价
2013/09/19 职场文书
大学毕业的自我鉴定
2013/10/08 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
责任心演讲稿
2014/05/14 职场文书
招标承诺书
2014/08/30 职场文书
归途列车观后感
2015/06/17 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
springboot入门 之profile设置方式
2022/04/04 Java/Android
MySQL的存储过程和相关函数
2022/04/26 MySQL
Python中的 No Module named ***问题及解决
2022/07/23 Python