微前端micro-app

什么是微前端？

微前端是一种架构风格，旨在通过将前端应用程序拆分为更小、更可管理的部分，使多个团队能够独立开发、部署和维护这些部分，从而实现前端的可扩展性和可维护性。

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

微前端特点，为什么使用微前端？

它主要解决了两个问题：

• 1、随着项目迭代应用越来越庞大，难以维护。

• 2、跨团队或跨部门协作开发项目导致效率低下的问题

1. 轻量级：框架本身体积小，加载速度快，不会给应用程序带来额外的负担。

2. 插件化：支持插件机制，可以根据需要灵活添加和扩展功能。

3. 组件化：采用组件化的开发模式，方便开发者进行模块化开发和复用。

4. 独立部署：每个MicroApp都可以独立部署和运行，支持单独开发和测试。

5. 路由管理：提供路由管理功能，支持子应用之间的路由跳转和通信。

6. 状态管理：提供状态管理机制，允许不同子应用之间共享数据和状态。

7. 样式隔离：采用样式隔离的方式，确保每个子应用之间的样式不会相互干扰。

官网地址：‘MicroApp’

微前端使用步骤：

主应用

1、安装依赖

npm i @micro-zoe/micro-app --save

2、初始化micro-app

// index.js
import microApp from '@micro-zoe/micro-app'
​
microApp.start()
​

3、嵌入子应用

<template>
  <div>
    <h1>子应用👇</h1>
    <!-- name：应用名称, url：应用地址 -->
    <micro-app name='my-app' url='http://localhost:3000/'></micro-app>
  </div>
</template>
​

子应用

1、在webpack-dev-server的headers中设置跨域支持。

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
},

注意：1、name：必传参数，必须以字母开头，且不可以带特殊符号(中划线、下划线除外)

2、url：必传参数，必须指向子应用的index.html，如：http://localhost:3000/ 或 http://localhost:3000/index.html

3、子应用必须支持跨域，跨域配置参考这里