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 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
angular将html代码输出为内容的实例
Sep 30 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桌面中心(二) 数据库写入
2007/03/11 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
Ajax 数据请求的简单分析
2011/04/05 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python中sys.argv函数精简概括
2018/07/08 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
python字典与json转换的方法总结
2020/12/28 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
重阳节活动总结
2014/08/27 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
药房管理制度范本
2015/08/06 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
Java字符串逆序方法详情
2022/03/21 Java/Android