Vue2.0 + ElementUI 手写权限管理系统后台模板（四）——组件结尾
系列文章
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
Vue2.0 + ElementUI 手写权限管理系统后台模板（二）——权限管理
Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建
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
<!-- 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">English</el-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)
new Vue({
el: "#app",
router,
store,
i18n,
render: h => h(App),
components: {App},
template: "<App/>"
})
使用:
<!-- 翻译使用 -->
<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
项目地址：
vue3+Pinia+ts 版本
- github：https://github.com/xuxuxu-ni/vue3-elementPlus-admin
- 码云：https://gitee.com/nirongxu/vue3-elementPlus-admin
vue2版本
系列文章
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
Vue2.0 + ElementUI 手写权限管理系统后台模板（二）——权限管理
