elementUi+Vue+i18n+Vue-cli 实现前端国际化10bet

来源:http://www.chinese-glasses.com 作者:Web前端 人气:108 发布时间:2020-04-29
摘要:时间: 2019-09-17阅读: 113标签: 国际化首先安装vue-i18n github代码同步网址 算了,这个不多讲,看官网:-i18n/zh/ 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML元素,封装可重

时间: 2019-09-17阅读: 113标签: 国际化首先安装vue-i18n

github代码同步网址

算了,这个不多讲,看官网:-i18n/zh/

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。

main.js 中引入并注册

组件是vue中比较重要的一个概念,网页结构的构成都要依赖组件,页面的某个组成部分都才可以写成一个组件,然后在其他的页面中调用该组件,组件一般都写在components文件夹中。下面举一些具体的例子进行详细讲述:

1、网页首先进入index.html入口文件,当dom渲染到<div id="app"></div>部分的时候,vue默认机制就跳转到src文件夹中main.js文件,在main.js里面寻找到一个全局组件App.vue,进而跳转到App.vue中进行dom渲染

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2、组件都写在<template>标签内,当dom渲染到<router-view/>时,就自动跳转到router中的index.js路由文件中,路由文件定义相应的url进入相应的组件,路由的定义分下面4步
router中的index.js文件

import Vue from 'vue'![微信截图_20180314103850.png](https://upload-images.jianshu.io/upload_images/3810529-fe7323678a38f5a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

import Router from 'vue-router'
//1、 定义组件,从其他文件import进来
import layout from '../components/layout'

Vue.use(Router)

//2、定义路由对象,每个路由应该映射一个组件
const routes =[
  {
    path:'/',
    component:layout
  }
]

//3、创建 router 实例,然后转 `routes` 配置
const router = new Router({
  mode: 'history',
  routes
})

//4、创建和挂载路由,从而让整个应用都有路由功能
export default router

PS:第三步中的mode:'history'是为了去除url中的"#"


3、编写layout.vue组件,这里推荐使用一个前端框架,element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架

  • 安装(推荐使用npm的方式安装,它能更好的和webpack打包工具配合使用)
    cnpm install --seve element-ui
    加上--save命令,在package.json里就会自动加入,下次拉取项目直接install就可以直接安装
    10bet 110bet 2
  • 引入element-ui(element-ui可以完整引入,也可以按需引入,http://element.eleme.io/#/zh-CN/component/quickstart),为了达到减少项目体积的目的,建议按需引入,比如要用element-ui中的菜单组件,就在main.js文件中:
import {
  Menu,
  MenuItem,
} from 'element-ui'
Vue.use(Menu)
Vue.use(MenuItem)
  • 编写layout文件,顾名思义,layout可以作为一个布局文件,在整个layout里面会有标题、菜单等子组件,为了使结构更加清晰,可以将标题栏、菜单等部分都写成组件的形式,然后在layout中调用
<template>
  <div>
    <side-bar></side-bar>
  </div>
</template>
<script>
import sideBar from "./wigdets/side-bar.vue";
export default {
  components: {
    sideBar
  }
}
</script>

4、编写side-bar.vue组件

  • element-ui的组件语法都可以在官网上找到相应的例子,只要按照官网的例子进行编写就可以了
    PS:样式文件安装sass语法cnpm install sass-loader node-sass --save-dev安装这两个依赖包之后就可以用sass语法写样式文件,这种语法的好处是可以定义变量,方便在后面的样式定义可以避免编写重复的变量
    10bet 3
<template>
  <div id="navBar">
    <el-menu  class="el-menu-vertical-demo" text-color="#fff" unique-opened router>
      <el-menu-item index="1-1">
        User
      </el-menu-item>
      <el-menu-item index="1-2">
        Service
      </el-menu-item>
      <el-menu-item index="1-3">
        Source
      </el-menu-item>
      <el-menu-item index="1-4">
        App
      </el-menu-item>
      <el-menu-item index="1-5">
        Key
      </el-menu-item>
    </el-menu>
  </div>
</template>
<style lang="scss" scoped>
  $sideWidth: 260px;
  #navBar {
    z-index: 2;
    width: $sideWidth;
    height: 100%;
    background: #3E3E3E;
    flex-shrink: 0;
    color:#B8B8B8;
    span{
      color:#B8B8B8;
    }
    i {
      font-size: 20px !important;
      padding: 0 10px 0 40px;
      display: inline-block;
      width: 75px;
      color:#B8B8B8;
    }
  }
  $menuHeight:70px;
  .el-menu{
    border-right: 0;
    background: #3E3E3E;
  }
  .el-menu-item{
    height: $menuHeight;
    line-height: $menuHeight;
    font-size: 16px;
    border-bottom: 1px solid rgba(107, 108, 109, 0.19);
    padding: 0 10px;
  }
  #navBar .el-menu-item:hover{
    background: #575757 !important;
    cursor: pointer;
    span{
      color: #F36A5A;
    }
  }
  #navBar .el-menu-item.is-active{
    background: #f5f5f5 !important;
    span{
      color: #F36A5A;
    }
    i{
      color: #F36A5A;
    }
  }
</style>

10bet 4

import i18n from './lang';// 设置国际化Vue.use(ElementUI, { i18n: (key, value) = i18n.t(key, value)});new Vue({ el: '#app', i18n, render: h = h(App)});

src目录中建立语言包文件夹 lang/index.js

//index.js文件import Vue from 'vue';import VueI18n from 'vue-i18n';import enLocale from 'element-ui/lib/locale/lang/en';import zhLocale from 'element-ui/lib/locale/lang/zh-CN';Vue.use(VueI18n);const messages = { en: { message: { hello: '{msg} world' }, ...enLocale }, zh: { message: { hello: '{msg} 世界' }, ...zhLocale }};const i18n = new VueI18n({ locale: 'zh', // set locale messages // set locale messages});export default i18n;

10bet,效果初探,随便找个页面试试,此时页面会显示 hello 世界

p{{ $t('message.hello', { msg: 'hello' }) }}/pp v-html="$t('message.hello')" /

Look,是不是很简单,已经有了雏形,开始精加工一般来讲,要翻译的文字比较多,所以最好为每门语言建立独立文件管理. 新建文件 lang/zh.js、 lang/en.js, 写入一些测试数据

//zh.jsexport default { app: { LanguageChage: '语言切换', editPassword: '修改密码', signOut: '登出' }};

//en.jsexport default { app: { LanguageChage: 'Language switching', editPassword: 'Change Password', signOut: 'Sign out' }};

下面去封装一个组件,用来切换语言,并将语言状态保存到cookie和Vuex中。在封装组件之前,咱们先去封装一个方法,保存语言状态值, 更新之前的 lang/index.js 文件,主要是 getLanguage 方法

import Vue from 'vue';import VueI18n from 'vue-i18n';import Cookies from 'js-cookie';import enLocaleElement from 'element-ui/lib/locale/lang/en';import zhLocaleElement from 'element-ui/lib/locale/lang/zh-CN';import zhLocale from './zh';import enLocale from './en';Vue.use(VueI18n);// 语言环境信息const messages = { en: { ...enLocale, ...enLocaleElement }, zh: { ...zhLocale, ...zhLocaleElement }};// 获取语言环境并保留状态export function getLanguage() { const cookieLanguage = Cookies.get('language'); if (cookieLanguage) return cookieLanguage; const browerLanguage = (navigator.language || navigator.browserLanguage).toLowerCase(); const locales = Object.keys(messages); for (const locale of locales) { if (browerLanguage.indexOf(locale)  -1) { return locale; } }}const i18n = new VueI18n({ locale: getLanguage(), messages, fallbackLocale: 'zh'});// 热更新if (module.hot) { module.hot.accept(['./en', './zh'], function() { i18n.setLocaleMessage('en', require('./en').default); i18n.setLocaleMessage('zh', require('./zh').default); });}export default i18n;

vuex仓库中增加language字段, 一般大家应该都是用vuex的吧,这里我用vuex的module模式来写, 其实随意,都可以。

本文由10bet发布于Web前端,转载请注明出处:elementUi+Vue+i18n+Vue-cli 实现前端国际化10bet

关键词:

最火资讯