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. Codeforces1183A(A题）Nearest Interesting Number

    Polycarp knows that if the sum of the digits of a number is divisible by 3, then the number itself i ...

  2. 【python(deap库)实现】GEAP 遗传算法/遗传编程 genetic programming +

    目录 前言 1.优化问题的定义 单目标优化 多目标优化 2.个体编码 实数编码 二进制编码 序列编码(Permutation encoding) 粒子(Particles) 3 初始种群建立 一般族群 ...

  3. 万字长文！一次性弄懂 Nginx 处理 HTTP 请求的 11 个阶段

    Nginx 处理一个 HTTP 请求的全过程 前面给大家讲了 Nginx 是如何处理 HTTP请求头部的,接下来就到了真正处理 HTTP 请求的阶段了.先看下面这张图,这张图是 Nginx 处理 HT ...

  4. kubernetes flannel pod CrashLoopBackoff解决

    背景 某环境客户部署了一个kubernetes集群,发现flannel的pod一直重启,始终处于CrashLoopBackOff状态. 排查 对于始终CrashLoopBackOff的pod,一般是应 ...

  5. 树点分治入门题poj1741

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 24253   Accepted: 8060 Description ...

  6. poj3648 2-SAT进阶 记录点拓扑

    Wedding Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10556   Accepted: 3220   Specia ...

  7. jdk编译java文件时出现：编码GBK的不可映射字符

    出现此问题的几种解决办法: 1.cmd下使用javac编译java文件 如: javac test.java 解决办法:编译时加上encoding选项 javac -encoding UTF-8 te ...

  8. java——引入第三方jar包

    第一步:项目->New->Folder:创建一个文件夹: 第二步:把要引入的jar包粘贴到新建的文件夹中: 第三步:选中引入的jar包->Build Path->Add to ...

  9. Istio ServiceEntry 引入外部服务

    概念及示例 使用服务入口Service Entry来添加一个入口到 Istio 内部维护的服务注册中心.添加了服务入口后,Envoy 代理可以向服务发送流量,就好像它是网格内部的服务一样.配置服务入口 ...

  10. HttpSession之表单的重复提交 & 验证码

    如果采用 HttpServletResponse.sendRedirct() 方法将客户端重定向到成功页面,将不会出现重复提交问题 1.表单的重复提交 1). 重复提交的情况: ①. 在表单提交到一个 ...