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. ql的python学习之路-day1

    写在前面的话:万事开头难,算是系统学习python的一个月了吧,总该写点什么来记录一下,之前看老男孩day1的视频没有开通博客,这次给补上,对于学python还是要好好努力,不能半途而废,还是那句老话 ...

  2. python字符串str

    字符串str常用操作方法(都会产生新的数据) 1.取值: (1)索引:s[0] (2)切片:s[起始索引:结束索引:步长] 起始索引为0,可以省略 s最后一个索引可以取-1 结束索引省略,默认取到最后 ...

  3. env虚拟环境配置（两种）

    virtualenv(依赖关系难以解决) windows项目虚拟环境创建 # WINDOWS 环境使用虚拟环境# 在当前项目下# 安装 pip3 install virtualenv# 创建虚拟环境 ...

  4. Django之forms.Form

    django中的form组件提供了普通表单提交及验证数据的主要功能: 1.    生成页面可用的HTML标签 2.    对用户提交的数据进行验证 3.    可保留用户上次提交的数据 django中 ...

  5. Ext.tree.TreePanel 属性详解

    Ext.tree.TreePanel 属性详解 2013-06-09 11:02:47|  分类: ExtJs|举报|字号 订阅  原文地址:http://blog.163.com/zzf_fly/b ...

  6. 王艳 201771010127《面向对象程序设计（java）》第十一周学习总结

    一:理论部分. 1.数据结构:分为a.线性数据结构,如线性表.栈.队列.串.数组和文件. b.非线性数据结构,如树和图. 1)所有数据元素在同一个线性表中必须是相同的数据类型. 线性表按其存储结构可分 ...

  7. Spring 自动装配 byType

    自动装配 byType,这种模式由属性类型指定自动装配. Spring 容器看作 beans,在 XML 配置文件中 beans 的 autowire 属性设置为 byType.然后,如果它的 typ ...

  8. 树形DP 2415HDU

    Bribing FIPA Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  9. POJ2758 Checking the Text

    题目链接:https://vjudge.net/problem/POJ-2758 题目大意: 先给出一串原始字符串,在此基础上执行两种操作: 1.在第 p 个字符前添加字符 ch,如果 p 比现字符串 ...

  10. iOS 的尾调用优化原理

    背景: 今天聊代码规范的问题的时候说了一下尾调用的问题. 一:概念: 什么是尾调用? 尾调用(Tail Call):某个函数的最后一步仅仅只是调用了一个函数(可以是自身,可以是另一个函数). 注意 “ ...