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. node的http模块

    node中的几个常用核心模块的api返回的都是eventEmitter的实例,也就是说都继承了on和emit方法,用以监听事件并触发回调来处理事件. http模块处理网络请求通常是创建一个server ...

  2. Navicat for MySQL数据库管理工具安装和破解

    Navicat for MySQL官方下载地址:https://www.navicat.com/en/download/navicat-for-mysql 1.下载后安装 navicat110_mys ...

  3. Linux内存屏障浅析

    根据该文章整理 https://blog.csdn.net/myxmu/article/details/8035025 1 解决的问题 内存屏障主要解决了单处理器下的乱序问题和多处理器下的内存同步问题 ...

  4. Python 字符串内置函数(四)

    # 4.类型判断# isalnum()函数检测字符串是否只由字母和数字组成.s = "this2009"; # 字符中没有空格print(s.isalnum()) # 结果:Tru ...

  5. Spring 中的事件处理

    Spring 中的事件处理 Spring 的核心是 ApplicationContext,它负责管理 beans 的完整生命周期.当加载 beans 时,ApplicationContext 发布某些 ...

  6. Ubuntu 18.04上交叉编译华硕路由器RT-AC88U的梅林384.15版本

    研究了半天官方wiki上的文档,最后却找到这个一键脚本.手动试了一下,丝般顺滑,成功编译出RT-AC88U的梅林固件384.15版本.也可以编译其他路由器型号的固件. 不过这个脚本比较暴力,上来就把/ ...

  7. css3新选择

    官方解释: [attribute^=value],a[src^="https"],选择其 src 属性值以 "https" 开头的每个 <a> 元素 ...

  8. linux 权限笔记

    权限模型 linux权限模型,指的是对文件.文件夹同的读写权限,同用户之间的权限管理模型 三种角色 user 文件.文件夹的创建者,所有人 group 一个group对应多个user,user自动具有 ...

  9. CopyOnWriteArrayList(写入并复制) & CountDownLatch(闭锁)

    ConcurrentHashMap: ①Java 5.0 在 java.util.concurrent 包中提供了多种并发容器类来改进同步容器 的性能.② ConcurrentHashMap 同步容器 ...

  10. 06 . Nginx静态资源缓存

    Nginx静态资源 Nginx可以处理静态资源 非Web服务器可以运行处理而生成的文件,即服务器只需要从硬盘或者缓存中读取然后直接给客户端响应即可. 常见的静态资源 # 浏览器渲染: html文件,样 ...