【微前端】国际化中后台系统系列-1

245 阅读2分钟

大家好,我是五老星,项目要出海,国际化的支持就必不可少,本篇介绍的项目是个人业余时间写的关于【微前端】国际化中后台系统的demo,麻雀虽小,五脏俱全。

技术栈

  • 采用vue3 + typescript作为项目的框架基石
  • UI组件库选择ElementPlus
  • 微前端选择开源的无界(wujie)
  • 仓库采用pnpm + monorepo管理

特性

  • 采用微前端无界搭建的基座应用嵌入子应用的模式,如果基座应用挂了,可以单独对子应用访问,显示的效果一致
  • 支持多语言切换
  • 针对不同语言体系,支持展示不同的排版和阅读方式,如拉丁语系,中文则是LTR,阿拉伯语系则是RTL
  • 支持暗黑模式动态切换
  • 支持主题色动态切换
  • 支持时区切换
  • 支持货币单位处理
  • 支持语言包的采集,翻译,在开发时,可以采用中文,英文等任何语言
  • 采用grid area搭建的布局,支持针对不同应用,不同页面选择不同的框架布局

展示环节

以封装好的通用型列表页为例

  • 搜索区域基于grid实现,支持响应式
  • 表格区域基于el-table做的二次封装,
    • 支持表单编辑,校验。
    • 支持根据业务场景选择表格固定高度或者不固定高度

image.png

仓库目录结构展示

该仓库基于monorepo搭建,集成了中后台,小程序,h5,桌面端,网站类,文档类等项目

image.png

最后

本篇内容先做个介绍,如果感兴趣的小伙伴多的话,后续则会开源出来,我目前在厦门就职,6年工作经验,如果有合适的工作机会,帮我内推内推哈,小弟在此感谢了