浅谈前端微服务背景及Micro-app的使用_micro-app from runscript-CSDN博客

本文介绍了如何利用微服务架构在Angular主应用中集成Vue子应用，包括安装依赖、配置主应用与子应用的交互、数据传递以及事件监听。通过Micro-App库，实现了前端模块的独立开发和部署，提升了开发效率。

背景

首先，前端技术日新月异，从最初的jQuery，Ext.js,Ajax等技术，到近几年AngularJS，Angular，Vue，React等热门框架的出现，技术框架层出不穷，为了解决遗留系统迁移的问题，我们不得不考虑微服务架构，不重写原有系统，同时可以开发新的业务，是一个相当有吸引力的特性，而且对技术人员来说，也是一件相当不错的事情。人生苦短，请尽量不重写。

其次，随着业务发展，开发变得越来越复杂。新增，修改某个功能等操作，都需要重新部署整个系统，任意一个模块的问题，都有可能引起整个系统的崩溃等问题。庞大的系统采用微服务架构，将单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用可以实现独立开发、独立部署，减少部署时间，以及引起系统崩溃的原因。同时它们也可以进行并行开发——这些组件可以通过NPM、Git TagGit来进行管理。

最后，对大部分公司和团队来说，如果我们前期选定Angular，大概率我们将继续使用原有的框架，毕竟已经拥有大量成熟的基础设施。但是随着市场的变化，我们不得不考虑增加技术栈，更好的迎合市场，即微服务架构。微服务架构并不只是为了在架构上好看，还可以提升开发效率，尤其是庞大的应用系统，由单一应用拆分为多个小型前端应用，每个应用可以实现独立开发和独立部署，项目维护起来也会变得容易很多。

Micro-app使用说明

下面是以Angular为基座,默认基座的路由为history模式，Vue为子应用的使用：

基座应用，也叫主应用

1.安装依赖

npm install  @micro-zoe/micro-app -S

2.main.ts文件引入

import microApp from '@micro-zoe/micro-app';

microApp.start({
  disableScopecss: true // 禁用样式隔离可以提升页面渲染速度，在此之前，请确保各应用之间样式不会相互污染
});

3. 创建主应用入口文件夹,在src文件中，新建practice文件夹，在页面中嵌入子应用

index.component.html