vue + element-ui 国际化实现
1. 安装组件和插件
cnpm i element-ui -S // 安装element
cnpm i vue-i18n -S //安装i18n
2.将国际化资源放在assets目录下
3.在src下新建i18n目录,创建一个 index.js;路径src\i18n\index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n' import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' import langZh from "@/assets/languages/zh.js"
import langEN from "@/assets/languages/en.js" Vue.use(VueI18n) const i18n = new VueI18n({
locale: 'zh',
messages: {
'zh': {...langZh,...zhLocale},
'en': {...langEN,...enLocale}
}
})
ElementLocale.i18n((key, value) => i18n.t(key, value)) export default i18n
4.在main.js引用
import i18n from './i18n/index'
import locale from 'element-ui/lib/locale/lang/en' Vue.use(ElementUI, { locale }) new Vue({
el: '#app',
i18n,
router,
components: { App },
template: '<App/>'
})
5.页面中使用$t引用
<el-radio v-model="theme" label="1">{{$t('common.risk')}}</el-radio>
6.切换语言
switchLang(val){
this.$i18n.locale=val; //此处val为 zh 或者 en
}
vue + element-ui 国际化实现的更多相关文章
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
随机推荐
- xss绕过姿势
#未完待续... 00x1.绕过 magic_quotes_gpc magic_quotes_gpc=ON 是php中的安全设置,开启后会把一些特殊字符进行轮换, 比如: ' 会被转换为 \' 再比如 ...
- JV默认是如何处理异常
main函数收到这个问题时,有两种处理方式: a:自己将该问题处理,然后继续运行 b:自己没有针对的处理方式,只有交给调用main的jvm来处理 jvm有一个默认的异常处理机制,就将该异常进行处理. ...
- lvs,nginx,haproxy的优缺点,适合场景
Nginx/LVS/HAProxy的基于Linux的开源免费的负载均衡软件. LVS:使用集群技术和Linux操作系统实现一个高性能.高可用的服务器,它具有很好的可伸缩性.可靠性和可管理性,是一款强大 ...
- Ubuntu + Apache2 环境下用C编写 一个简单的cgi脚本
我只学习过c语言,没有学习过prel,网上很多教程都是针对prel的,很少有针对c的.自己在Ubuntu下鼓捣了一下午,也总算是用c成功编写了一个helloworld的cgi,算是cgi入门的第一步. ...
- Laravel 别名Redis 与 Redis 扩展冲突
use Redis; //通过别名引用会报错 今天尝试使用了 Laravel 的 redis 结果报了如下错误. Non-static method Redis::xxx() cannot be ca ...
- C# 后台POST和GET 获取数据
C# 后台POST和GET 获取数据 , data.Length); newStream.Close(); HttpWebResponse myResponse = (HttpWebR ...
- mybatis传入map任意表增删改查,分页过滤字段
<!--根据实体参数查询 --> <select id="selectBaseList" resultType="java.util.HashMap&q ...
- 三节课MINI计划第五周
一.任务及干货 二.作品 (一)小组分工 (二)社群运营方案
- 【VS开发】【C++开发】正确使用auto_ptr智能指针
1, auto_ptr类 auto_ptr是一个模板类,定义如下: template <typename Type>class auto_ptr {...}: 它存储的是一个指向Type的 ...
- 【VS开发】fatal error C1853: "Debug\sift.pch"预编译头文件来自编译器的早期版本
fatal error C1853: "Debug\sift.pch"预编译头文件来自编译器的早期版本 <pre id="best-content-12991040 ...