1. 先创建一个lang 文件夹,创建两个js文件en.js(英文), zh.js(中文), 另外创建一个index.js文件(用于)

en.js zh.js (两者必须保持一致)

2. 在index.js 中引入vue和vue-i18n, 并注册vue-i18n 然后 引入en.js和zh.js两个文件

(1) elementEnLocale 和elementZhLocale 是element-ui国际化需要的,如果没有使用element-ui,则不需要引入

(2) locale : 设置的默认的语言

3. 将i18n引入main.js, 并在初始化注册       (中间圈住的是element-ui 为了兼容vue-i18n@6.x)

4. 使用方式

(1)  双括号 {{$t('xxx.yyy')}}

(2)  绑定到属性上: :prop="$t('xxx.yyy')"

(3) 在js语句中使用`${this.$t('xxx.yyy')}`

5. 改变语言 将你定义的语言名字赋值给this.$i18n.locale

elementUI+国际化的更多相关文章

  1. element-ui国际化探索（大型项目适用）

    配置好了,自己感觉是比较简单的,就是有一点点繁琐,加油吧. 由于保密,无法拿出项目,故写了一个小demo,记录一下,适用于大型项目: 项目中需要自定义切换中/英文(国际化),基于vue.js,结合vu ...

  2. vue + element-ui 国际化实现

    1. 安装组件和插件 cnpm i element-ui -S // 安装elementcnpm i vue-i18n -S //安装i18n 2.将国际化资源放在assets目录下 3.在src下新 ...

  3. vue+element-ui国际化（i18n）

    1. 下载element-ui和vue-i18n: npm i element-ui --save   npm i vue-i18n –save 2.  创建一个  i18n 文件夹, 在main.j ...

  4. vue-i18n和ElementUI国际化使用

    在main.js同级建i18n文件夹,并里面建i18n.js.langs文件夹,langs文件夹下建en.js.cn.js目录如下: 展示效果地址: http://www.cenweixin.cn/w ...

  5. vue+elementUI+vue-i18n 实现国际化

    在main.js同级建i18n文件夹,并里面建i18n.js.langs文件夹,langs文件夹下建en.js.cn.js目录如下: . ├── App.vue ├── assets │   └── ...

  6. Vue国际化处理 vue-i18n 以及项目自动切换中英文

    1. 环境搭建 命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n npm install vue-i18n --save 2. 项目增加国际化翻译文件 在项目的src下添加lang ...

  7. vue国际化

    插件:vue-i18n main.js引入i18n.js:+2行 新建文件(i18n.js),引入VueI18n.locale.语言包 新建语言包,包括index/zh/en(名字随意,引用正确就好) ...

  8. 使用vue国际化中出现内置的组件无法切换语言的问题(element-ui、ivew)

    在main.js中引入对应组件的语言包 eg: import VueI18n from 'vue-i18n'; // 引入国际化 import elementEn from 'element-ui/l ...

  9. Vue中vue-i18n结合element-ui实现国际化

    (一)添加依赖模块 在package.json文件中添加vant模块的依赖,如: // package.json { "dependencies": { "element ...

随机推荐

  1. Bootstrap组件的使用

    五.常用组件 总结: boot中事件,关注两件事 1.事件是如何触发的.自定义属性触发,触发方式是这个属性的值 2.事件触发的目标 button绑定目标 data-target="#id&q ...

  2. jquery 根据 option 的 text 定位选中 option

    $('#test option[text="b"]').attr("selected",true); 上面的方法在 jquery 低于 1.4.2 的版本(含) ...

  3. CSS实现漂亮的小水球效果

    先看效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  4. MSC添加shard节点

    1.MSC添加shard节点 mkdir -p /mongodb/38027/conf  /mongodb/38027/log  /mongodb/38027/datamkdir -p /mongod ...

  5. linux 去除^M 换行符

    一般,在windows下写的shell脚本,都会去linux执行,都会有^M 符号,那么怎么去除呢? 第一种方法:cat -A filename 就可以看到windows下的断元字符 ^M要去除他,最 ...

  6. 由一次安全扫描引发的思考：如何保障 API 接口的安全性？

    引言 前段时间,公司对运行的系统进行了一次安全扫描,使用的工具是 IBM 公司提供的 AppScan . 这个正所谓不扫不要紧,一扫吓一跳,结果就扫出来这么个问题. 我们的一个年老失修的内部系统,在登 ...

  7. 中国电信中兴F412光猫——IPTV与网络单线复用

    标题: 中国电信中兴F412光猫--IPTV与网络单线复用 作者: 梦幻之心星 347369787@QQ.com 标签: [光猫, IPTV] 目录: 路由器 日期: 2019-2-30 目录 第一步 ...

  8. Beta冲刺 —— 5.31

    这个作业属于哪个课程 软件工程 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.会议内容 1.讨论并解决每个人存在的问 ...

  9. 【SpringMVC】使用三层架构实现登录，注册。(上篇)

    构思 界面层 1.jsp [见名知义] failed.jsp-->失败页面,登录.注册失败就跳转至失败页面 index.jsp-->默认生成的界面,没什么用 login.jsp--> ...

  10. Java实现蓝桥杯第十一届校内模拟赛

    有不对的地方欢迎大佬们进行评论(ง •_•)ง 多交流才能进步,互相学习,互相进步 蓝桥杯交流群:99979568 欢迎加入 o(￣▽￣)ブ 有一道题我没写,感觉没有必要写上去就是给你多少MB然后求计 ...