series

Vue2.0 + ElementUI Handwriting Rights Management System Background template (1) — Brief introduction

Vue2.0 + ElementUI Handwriting Rights management system background template (2) — rights management

Vue2.0 + ElementUI Handwriting Rights management system background template (three) — page building

Vue2.0 + ElementUI Handwriting Rights Management system background template (4) — Component end

I18n international multi-language translation for use

The framework USES thevue-i18nVersion 8.4.0,

Install using NPM

New Foldersrc/i18n, the directory is as follows

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
Copy the code

i18n/lang/index.js

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

i18n/lang/cn.js

Cn. Js and en.js need to translate the content to be compared one by one, I here this is a reference example only part of the written

//cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
  home: 'home'.routeNmae: {
    home: 'home'.article: 'Article Management'.'menu2-2': Level 2-2 '.'menu2-3': Level 2-3 ',},rightMenu: {
    close: 'off'.closeOther: 'Close other'.closeAll: 'All closed'
  }

  ...zhLocale   // Incorporate element-UI built-in translation
}

export default cn

Copy the code

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   // Incorporate element-UI built-in translation
}

export default en

Copy the code

Multilanguage switching component

New SRC/components/lang/langSelect. Vue

<! -- langSelect.vue -->
<template>
  <el-dropdown class='international' @command="handleSetLanguage">
    <div>
      <span class="el-dropdown-link"><i class="fa fa-language fa-lg"></i>&nbsp;{{language}}<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="cn">Chinese</el-dropdown-item>
      <el-dropdown-item command="en">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
Copy the code

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)

new Vue({
  el: "#app",
  router,
  store,
  i18n,
  render: h= > h(App),
  components: {App},
  template: "<App/>"
})

Copy the code

Use:

<! -- Translation use -->
<p>message: {{ $t('home') }}</p>
<p>message: {{ $t('routeNmae.article') }}</p>
<! -- Multilingual toggle component call -->
<langSelect></langSelect>
Copy the code

ECharts is used in VUE

You can check out the ECharts website for details on how to use the response screen

The code is shown below on the page that calls the component

  mounted () {
    this.selfAdaption()
  },
  methods: {
    // Echart is adaptive
    selfAdaption () {
      let that = this
      setTimeout(() = > {
        window.onresize = function () {
          if (that.$refs.echarts) {
            that.$refs.echarts.chart.resize()
          }
        }
      }, 10)}}Copy the code

Editor – markdown

Real-time access to markdown, HTML,text three formats of text, support content backfill, default initial value, you can edit published articles or drafts

To reference editor. md, click to see more about how to use the plug-in

Editor – wangeditor

Real-time access to json, HTML,text three formats, support content backfill, default initial values, you can edit published articles or drafts

Referenced to wangEditor, click to see more usage of the plug-in

The end of the

Vue-xuadmin only pays attention to the basic functions of the framework. I have used these components recently, and more components can be packaged according to the requirements of the project.

If you find this framework or these articles helpful, please go to project Git and give it a star. Thank you! orz

Project Address:

• Github:github.com/xuxuxu-ni/v…
• Yards cloud: gitee.com/nirongxu/vu…

series

Vue2.0 + ElementUI Handwriting Rights Management System Background template (1) — Brief introduction

Vue2.0 + ElementUI Handwriting Rights management system background template (2) — rights management

Vue2.0 + ElementUI Handwriting Rights management system background template (three) — page building

Vue2.0 + ElementUI Handwriting Rights Management system background template (4) — Component end