前端架构介绍

JECloud前端架构介绍

JECloud前端整理采用微应用架构进行设计，采用最新的vue3，AntDesign vue3 作为底层支撑进行开发，确保整体技术保持业界领先，具备核心竞争力！

架构图

技术选型

技术架构

• 微前端（MicroApp）
• Monorepo：JECloud前端自有框架的管理方式。
  Monorepo(monolithic repository) 是管理项目代码的一个方式，指在一个项目仓库 (repo) 中管理多个模块/包 (package)，不同于常见的每个模块建一个 repo。

基础框架

• Vue 3：项目核心框架
• VueRouter 4：Vue路由框架
• Pinia 2：Vue状态管理框架
• VueI18n 9 ：Vue国际化框架
• less 3：CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
• MicroApp：微应用 https://micro-zoe.github.io/micro-app/
• Ant Design Vue 3：基于 Ant Design 设计体系的 Vue UI 组件库，主要用于研发企业级中后台产品

工程化

• VueCli 4.5：Vue脚手架
• Vite 2：前端构建工具，用于开发环境
• Gulp 4：基于流(stream)的自动化构建工具
• Webpack 4：代码编译工具
• Lerna 4：Lerna 是一个管理工具，用于管理包含多个软件包（package）的 JavaScript 项目
• Yalc：可以在本地模拟 npm package 发布环境的工具

编码规范

• ESLint：规范并校验 ECMAScript/JavaScript code的编写
• StyleLint：规范并校验css/scss/less code的编写
• Gitcommitlint：规范并校验Git commit msg是否符合规范
• Prettier：统一代码排版格式
• .editorconfig：统一项目基础配置
• Document This VSCode注释插件：统一代码注释规范

JECloud自有框架

• @jecloud/ui：基于AntDesignVue二次封装的组件库，重写和增加了许多特有组件
• @jecloud/utils：基于Lodash封装的工具类库，增加了许多特有工具类
• @jecloud/func：平台功能解析引擎库
• @jecloud/plugin：平台其他插件库，包含门户，图表，报表等…
• @jecloud/cli：微应用项目脚手架，后期开发

插件

• Lodash：工具类库

• VxeTable：表格组件

• MonacoEditor：代码编辑器

• Mxgraph：流程画图工具

• Tinymce：富文本编辑器

• Pickr：颜色选择器

• Sortablejs：拖拽类库

• Dayjs：日期类库

• Axios：http请求类库

微前端介绍

微前端的概念是由ThoughtWorks在2016年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。

它主要解决了两个问题：

1、随着项目迭代应用越来越庞大，难以维护。
2、跨团队或跨部门协作开发项目导致效率低下的问题。