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实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
原生js+ajax分页组件
Jan 30 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
利用javaScript处理常用事件详解
Apr 14 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
ThinkPHP中where()使用方法详解
2016/04/19 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Python时间的精准正则匹配方法分析
2017/08/17 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python中如何打包用户自定义模块
2020/09/23 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
shell程序中如何注释
2012/02/17 面试题
学习自我鉴定
2014/02/01 职场文书
运动会入场式解说词
2014/02/18 职场文书
物业总经理岗位职责
2014/02/28 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
班长演讲稿范文
2014/04/24 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
用电申请报告范文
2015/05/18 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android