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. javascript----放大模式

    放大模式 1.介绍:放大模式降低模块之间直接的联系,降低耦合,当一个模块出现错误,不会影响另一个模块的功能

  2. XCode Interface Builder开发——1

    XCode Interface Builder开发--1 创建Xcode项目 选择第二个选项 选择Single View App,点击Next 设置完后点击Next Xcode基本面板 导航面板 工具 ...

  3. yum命令无效

    无论执行任何yum命令都无效,弄了两个小时.主要的方案有: 方案1:yum clean all 并查询repo中是否有enabled=0: https://unix.stackexchange.com ...

  4. babel转码时generator的regeneratorRuntime

    今天写generator函数时发现出错:regeneratorRuntime. 在stackoverflow网友说需是本地babel软件包没有安装完全. package.json: "dev ...

  5. HTML新特性--canvas绘图-文本

    一.html5新特性--canvas绘图-文本(重点) #常用方法与属性 -ctx.strokeText(str,x,y);   绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文 ...

  6. 转义URL 含有中文和特殊符号

    方法1: //这个方法被废弃了 NSString *urlString = @"https://www.cnblogs.com/huaida/#/程序员"; NSString* e ...

  7. 杂谈WebApiClient的性能优化

    前言 WebApiClient的netcoreapp版本的开发已接近尾声,最后的进攻方向是性能的压榨,我把我所做性能优化的过程介绍给大家,大家可以依葫芦画瓢,应用到自己的实际项目中,提高程序的性能. ...

  8. eatwhatApp开发实战（一）

    开发背景: 当你想用抛硬币来决定事情的时候,那么硬币抛起的瞬间,你就有答案了.一样的,吃啥?eatwhat点开,按钮一点,你就可以知道你中午要吃啥. 话不多说,项目开发走起 ADT点开,New==&g ...

  9. mysql去重复关键字distinct的用法

    distinct的去重复的提前是表中所有列的数据完成相同时,才能把相同的数据只保留一条,并不是 distinct 列名,除去某一列相同的数据,并且 distinct要放在第一个列前面.案例如下:一个学 ...

  10. bypass disable_function的方法及蚁剑插件bypass-php-function使用

    bypass disable_function的方法及蚁剑插件bypass-php-function使用 在学习php时,发现有许多函数会对网站或系统造成很大危险隐患,常见的危险函数有: phpinf ...