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学习之路-day11

    前言:本节主要学习python内置的方法 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:qinjiaxi from collections ...

  2. 1.3Go环境搭建之Windows

    1.1.2. Golang SDK SDK 的全称(Software Development Kit 软件开发工具包) 2) SDK是提供给开发人员使用的,其中包含了对应开发语言的工具包 1.1.3. ...

  3. Django之钩子Hook方法

    局部钩子: 在Fom类中定义 clean_字段名() 方法,就能够实现对特定字段进行校验.(校验函数正常必须返回当前字段值)  def clean_name(self): pass         n ...

  4. ThreadLocal必知必会

    前言 自从被各大互联网公司的"造火箭"级面试难度吊打之后,痛定思痛,遂收拾心神,从基础的知识点开始展开地毯式学习.每一个非天才程序猿都有一个对35岁的恐惧,而消除恐惧最好的方式就是 ...

  5. 201771010128王玉兰《面向对象程序设计（Java）》第十二周学习总结

    第一部分:理论知识 1.AWT与Swing简介 (1)Swing用户界面库是非基于对等体的GUI工具箱. Swing具有更丰富并且更方便的用户界面元素集合. Swing对底层平台的依赖很少,因此与 ...

  6. F. Dominant Indices

    题意:求每个点的子树中哪一层节点数最多,如果有节点数最多不唯一,取层数最小的. 题解:dus on tree 基本想法是对每一个节点都构建一个deep数组,然后从底向上更新过来,但是这样空间复杂度和时 ...

  7. 【常用工具】vagrant的box哪里下？镜像在哪儿找？教你在vagrant官网下载各种最新.box资源

    进入vagrant官网 : https://www.vagrantup.com/ 点击findbox[寻找box],进入有很多box的列表 : https://app.vagrantup.com/bo ...

  8. ShoneSharp语言(S#)的设计和使用介绍系列（7）— 布尔Bool及对象Object

    ShoneSharp语言(S#)的设计和使用介绍 系列(7)— 布尔Bool及对象Object 作者:Shone 声明:原创文章欢迎转载,但请注明出处,https://www.cnblogs.com/ ...

  9. 【谎言大揭秘】Modin真的比pandas运行更快吗？

    最近看了某公众号文章,推荐了所谓的神器,据说读取速度吊打pandas,可谓牛逼,事实真是这样吗? 来一起揭秘真相. 首先安装包. # pip install ray # pip install das ...

  10. ExtJS定时和JS定时

    ExtJS定时 //定时刷新待办事宜状态 var task={ run:function(){ //执行的方法或方法体 }, interval:5*60*1000 //5分钟 } //定时启动 Ext ...