请选择 进入手机版 | 继续访问电脑版

在吗?手把手教vue-cli4+elementUI搭建通用后台管理系统---(二)vue-i18n中

[复制链接]

文章目次



  提示:以下是本篇文章正文内容,下面案例可供参考
一、vue-i18n是什么?

一款针对Vue.js 的国际化插件。把网站的所有需要中英转换的数据设置成中英文json文件,需要编写大量中英文对照表,适合于少量的固定翻译。
二、使用步调

1.安装vue-i18n

npm安装下令
  1. npm install vue-i18n
复制代码
安装乐成如图(示例):

2.添加当地翻译信息

当地翻译信息有两个,zh.js中文和en.js英文,这两个js的内容是一一对照的。
在src文件夹下创建lang文件夹,并添加两个zh.js和en.js文件。
如下图所示:

  en.js—英文
zh.js—中文
index.js----处理默认语言与导出i18n对象,方便在main.js中use
en.js代码如下(示例):
  1. import enLocale from 'element-ui/lib/locale/lang/en'const en = {    //全局设置    add : 'add',    welcome : 'welcome',    //局部    status : {        disabled : 'disabled',  //不可用        abled : 'abled'         //可用    },    //elementUI    ...enLocale}export default en;
复制代码
注意:
  1. import zhLocale from 'element-ui/lib/locale/lang/zh-CN'import enLocale from 'element-ui/lib/locale/lang/en'
复制代码
这是elementUI组件国际化。elementUI组件如何使用国际化中英文切换?
  因为创建vue-i18n插件对象时,要传入须要的选项,如locale语言标识,messages中英翻译信息 index.js的功能主要是设置默认语言标识和use到Vue对象,创建vue-i18n对象,并导出这个它,然后在main.js中挂载到vue实例对象。 index.js代码如下(示例):
  1. import Vue from 'vue'import VueI18n from 'vue-i18n'import en from './en.js'import zh from './zh.js'Vue.use(VueI18n)const messages = {    en:en,    zh:zh}export function getLanguage(){    const chooseLanguage = window.localStorage.getItem("language");    if(chooseLanguage)        return chooseLanguage        //如果没有选择语言,默认为zh    const language = (navigator.language || navigator.browserLanguage).toLowerCase();    const locales = Object.keys(messages);    for(const locale of locales){        if(language.indexOf(locale) > -1){            console.log("locale===",locale)            return locale;        }    }    return 'zh'}const i18n = new VueI18n({    locale: getLanguage(),    messages})export default i18n
复制代码
4.处理公共头部的语言切换事件

我们的头部,如图:

头部传送门
TheHeader.vue代码如下(示例):
  1.                   [img]https://www.jianchenwangluo.com/../../public/img/logo.png[/img]   
  2.                                           
  3.                                             
  4.                                     {{$t("welcome")}}: {{user}}                                个人中心            账号设置            螺蛳粉            双皮奶            蚵仔煎                        
  5.                                     
  6.    
  7.   
  8. .header{    background-color: #242f42;    position: relative;    width: 100%;    height: 70px;}.logo{    width: 70px;    height: 70px;    float: left;    margin-left: 30px;}.header-right{    float: right;    width: 300px;    height: 70px;    display: flex;    justify-content: space-around;    align-items: center;}.iconfont{    color: white;    font-size: 22px;}.logo img{    width:auto;    height:auto;    max-width:100%;    max-height:100%;}.btn-changelan>span{    color: white;    font-size: 18px;}.w-text{    font-size: 14px;    color: white;}.el-dropdown-link {    cursor: pointer;    color: white;  }  .el-icon-arrow-down {    font-size: 12px;}
复制代码
6.最终效果

英文:

中文:

总结

以上就是本日要讲的内容,本文仅仅简单先容了vue+elementUI+vue-i18n的使用。
来源:https://blog.csdn.net/qq_36818931/article/details/111941832
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )