项目背景
负责开发物联网公共安全管控云平台，旨在通过实验室气体设备和传感器的数据收集与监测，实现设备状态的实时监控和异常预警，从而确保实验室安全。

技术栈
架构：采用 Monorepo 加 MicroApp 微前端架构，实现模块化管理和灵活部署。
前端技术：基于 Rush 搭建高效的开发框架，使用 Vue2 进行界面开发，Vuex 进行状态管理，SCSS 与Element UI 进行界面样式设计，TypeScript 进行类型检查，确保代码质量。
角色和职责
作为项目的前端主要开发人员，我主导了以下关键工作：

模块开发与重构：根据设计原型完成高质量的模块开发，并重构既有代码提高可维护性。
组件化与代码优化：提取并封装了多个业务组件和容器，使用 vue-class-component 优化代码结构。
项目架构设计：基于微前端架构对项目进行了全面重构，提升了项目的可扩展性和维护性。
技术难点与解决方案
业务组件
难点：
原项目中存在大量冗余的业务组件，影响了开发效率和代码的可维护性

解决方案：

提取业务组件（设备筛选、设备类型筛选、角色、城市等组件）
封装容器组件（表格、弹窗、卡片、底部导航栏等容器）
提取业务代码封装成 Mixin（基础页面、弹出组件）
封装权限指令
所有代码提取为公共代码，并建立项目代码片段
结果：
通过提取通用业务组件、封装容器组件和Mixin，实现了代码的复用和模块化，显著提升了开发效率和后期维护的便利性。

单体应用重构
难点：
单体应用的模块过多，影响开发和部署效率。

解决方案：

根据后端微服务架构的模块分类，前端使用微前端(MicroApp)重构项目
用户中心、设备管理、安全管理、运维管理、系统管理等

封装基座应用和微应用（子应用）
根据功能模块或业务逻辑将原有的后台管理项目拆分为多个微应用和一个基座应用，每个微应用都独立运行，可以单独开发、测试和部署。

统一管理项目依赖：
由于每个微应用都是独立运行的，统一管理项目依赖。使用 Rush 工具来管理项目依赖，避免重复安装和冲突。

统一路由管理：
微前端项目中，每个微应用都有自己的路由配置，需要一个中心化的路由管理器来管理所有微应用的路由。基座应用控制所有子应用路由初始化，子引用路由各自维护。

统一状态管理：
不同的微应用之间需要共享数据，需要一个中心化的状态管理工具来管理所有微应用的状态。使用 Vuex 和微前端框架提供的状态管理器函数来管理状态。

基座应用

负责获取所有数据(用户信息等)

负责发送全局 stroe 数据

通过 micro-app setGlobalData() 方法给微应用发送数据

子应用

负责 stroe 数据存储，只能在微应用里修改/获取

通过 micro-app getGlobalData() 方法给微应用获取数据

统一样式管理：
不同的微应用之间需要共享样式，需要一个中心化的样式管理工具来管理所有微应用的样式。使用 SASS 和微前端框架提供的样式管理器工具来管理样式。

统一打包部署：
所有应用独自打包，并自动上传部署到服务器上。也可以使用 Rush 命令统一打包。

结果：
采用微前端架构，将项目拆分为多个独立运行的微应用，通过统一的路由管理、状态管理和样式管理，实现了模块的独立开发、测试和部署，极大地提升了项目的灵活性和可维护性。