vue项目中vue-i18n和element-ui国际化开发实现过程


Posted in Javascript onApril 25, 2018

在vue构建的项目中,我们常用element-ui插件,在我的博客前面有讲述,具体怎么用vue-i18n插件进行国际化开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行。element-ui插件自身也提供了语言包。具体的配置和使用方法参考如下:

默认你已构建好了一个vue项目,在vue项目中安装vue-i18n以及element-ui插件

cnpm i vue-i18n --save-dev 
cnpm i element-ui --save-dev

在项目文件中如下图,创建语言包文件夹i18n文件夹

vue项目中vue-i18n和element-ui国际化开发实现过程

在main.js用引入i18n.js,以及引入element-ui插件

import Vue from 'vue' 
import App from './App' 
import router from './router' 
// element-ui 
import Element from 'element-ui' 
import 'element-ui/lib/theme-chalk/index.css' 
Vue.use(Element) 
// vuei18n 
import i18n from './i18n/i18n' 
Vue.config.productionTip = false 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 router, 
 i18n, 
 components: { 
 App 
 }, 
 template: '<App/>' 
})

在i18n.js中

import Vue from 'vue' 
import locale from 'element-ui/lib/locale' 
import VueI18n from 'vue-i18n' 
import messages from './langs' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
 locale: localStorage.lang || 'cn', 
 messages, 
}) 
locale.i18n((key, value) => i18n.t(key, value)) 
export default i18n

文件夹langs中

index.js

import en from './en'; 
import cn from './cn'; 
export default { 
 en: en, 
 cn: cn 
}

en.js

import enLocale from 'element-ui/lib/locale/lang/en' 
const en = { 
 message: { 
 'mes': 'hello', 
 }, 
 ...enLocale 
} 
export default en;

cn.js

import enLocale from 'element-ui/lib/locale/lang/zh-CN' 
const cn = { 
 message: { 
 'mes': '你好', 
 }, 
 ...enLocale 
} 
export default cn;

通过上述方式的设置,就能完成vue-i18n和element-ui的国际化开发。

总结

以上所述是小编给大家介绍的vue项目中vue-i18n和element-ui国际化开发实现过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
原生js编写2048小游戏
Mar 17 Javascript
详解React中的组件通信问题
Jul 31 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
javascript canvas API内容整理
Feb 16 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 #Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 #Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
You might like
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP print类函数使用总结
2010/06/25 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php图片裁剪函数
2018/10/31 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
vue2中使用less简易教程
2018/03/27 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
用C++封装MySQL的API的教程
2015/05/06 Python
python简单实现刷新智联简历
2016/03/30 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
写好求职信第一句话的技巧
2013/10/26 职场文书
自荐信不宜过于夸大
2013/11/06 职场文书
总经理岗位职责
2013/11/09 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
工作个人的自我评价
2014/01/14 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
艺术节开幕词
2015/01/28 职场文书
文明旅游倡议书
2015/04/28 职场文书