Vue2.0 + ElementUI 手写权限管理系统后台模板（四）——组件结尾

i18n国际化多语言翻译使用

框架采用vue-i18n版本 8.4.0，

使用npm安装

新建文件夹src/i18n,目录如下

i18n.js

//i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './lang'

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages
})
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

i18n/lang/index.js

//index.js
import en from './en'
import cn from './cn'
export default {
  en,
  cn
}

i18n/lang/cn.js

cn.js和en.js 需要要翻译的内容要一一对照，我这里这是参考示例只写了一部分

//cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
  home: '主页',
  routeNmae: {
    home: '主页',
    article: '文章管理',
    'menu2-2': '二级-2',
    'menu2-3': '二级-3',
  },
  rightMenu: {
    close: '关闭',
    closeOther: '关闭其他',
    closeAll: '全部关闭'
  }

  ...zhLocale   //  合并element-ui内置翻译
}

export default cn

i18n/lang/en.js

//en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  home: 'home',
  routeNmae: {
    home: 'home',
    article: 'article',
    'menu2-2': 'menu2-2',
    'menu2-3': 'menu2-3'
  },
  rightMenu: {
    close: 'close',
    closeOther: 'closeOther',
    closeAll: 'closeAll'
  }
  ...enLocale   //  合并element-ui内置翻译
}

export default en

多语言切换组件

新建src/components/lang/langSelect.vue

<template>
  <el-dropdown class='international' @command="handleSetLanguage">
    <div>
      <span class="el-dropdown-link"><i class="fa fa-language fa-lg">i> {{language}}<i class="el-icon-arrow-down el-icon--right">i>
    span>
    div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="cn">中文el-dropdown-item>
      <el-dropdown-item command="en">Englishel-dropdown-item>
    el-dropdown-menu>
  el-dropdown>
template>

main.js

import Vue from "vue"
import ElementUI from "element-ui"
import App from "./App.vue"
import router from "./router"
import store from "./vuex"
import i18n from "./i18n/i18n"
import globalPlugin from "./utils/global"
import permission from "./directive/permission/button"

import "element-ui/lib/theme-chalk/index.css"
import "@/assets/iconfont/iconfont.css"
import "font-awesome/css/font-awesome.css"
import "@/router/permission"

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(globalPlugin)
Vue.use(permission)

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  store,
  i18n,
  render: h => h(App),
  components: {App},
  template: ""
})

使用:

<p>message: {{ $t('home') }}p>
<p>message: {{ $t('routeNmae.article') }}p>

<langSelect>langSelect>

vue中使用ECharts

具体使用方法可以查看ECharts官网，需要注意的地方就是响应屏幕大小

代码如下，在调用组件的页面

  mounted () {
    this.selfAdaption()
  },
  methods: {
    // echart自适应
    selfAdaption () {
      let that = this
      setTimeout(() => {
        window.onresize = function () {
          if (that.$refs.echarts) {
            that.$refs.echarts.chart.resize()
          }
        }
      }, 10)
    }
  }

编辑器-markdown

实时获取markdown,html,text三种格式文本，支持内容回填，默认初始值，可以编辑已发布的文章或者草稿

引用的Editor.md,点击查看插件更多的使用方法

编辑器-wangeditor

实时获取json,html,text三种格式文本，支持内容回填，默认初始值，可以编辑已发布的文章或者草稿

引用的wangeditor,点击查看插件更多的使用方法

结束

vue-xuAdmin 只注重框架基础功能，这几个组件是我最近用到的，更多的组件内容根据项目需求可以自己去封装。

如果你感觉这个框架或者这几篇文章对你有所帮助，请去项目git上给个星点个star，感谢！orz

项目地址：

• github：https://github.com/Nirongxu/vue-xuAdmin
• 码云：https://gitee.com/nirongxu/vue-xuAdmin

系列文章

Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

Vue2.0 + ElementUI 手写权限管理系统后台模板（二）——权限管理

Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建

Vue2.0 + ElementUI 手写权限管理系统后台模板（四）——组件结尾