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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Python高级用法总结
2018/05/26 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
详解Anaconda 的安装教程
2020/09/23 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
会计专业的自荐信
2013/12/12 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
写给老师的保证书
2015/05/09 职场文书
辞职信格式范文
2015/05/13 职场文书