共计 2477 个字符，预计需要花费 7 分钟才能阅读完成。
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 ‘./btnPermission’
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
import ‘font-awesome/css/font-awesome.css’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./vuex’
import i18n from ‘./i18n/i18n’
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，实时获取 markdown,html,text 三种格式文本，支持内容回填，默认初始值，可以编辑已发布的文章或者草稿
引用的 Editor.md, 点击查看插件更多的使用方法
结束
vue-xuAdmin 只注重框架基础功能，这几个组件是我最近用到的，更多的组件内容根据项目需求可以自己去封装。
如果你感觉这个框架或者这几篇文章对你有所帮助，请去项目 git 上给个星点个 star，感谢！orz
项目地址：
github：https://github.com/Nirongxu/v…
码云：https://gitee.com/nirongxu/xu…
