i18n国际化多语言翻译使用框架采用vue-i18n版本 8.4.0，使用npm安装新建文件夹src/i18n,目录如下i18n.js//i18n.jsimport 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 i18ni18n/lang/index.js//index.jsimport en from ‘./en’import cn from ‘./cn’export default { en, cn}i18n/lang/cn.jscn.js和en.js 需要要翻译的内容要一一对照，我这里这是参考示例只写了一部分//cn.jsimport 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 cni18n/lang/en.js//en.jsimport 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.jsimport 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…