概述
在现代Web开发中，随着业务复杂度的不断提高，单一的巨型应用逐渐难以满足高效开发和维护的需求。微前端架构作为一种解决方案，允许将一个大型应用拆分成多个独立的小型应用，这些小型应用可以单独开发、部署，并且能够灵活地集成在一起形成一个完整的系统。这种模式提高了开发效率，降低了维护成本，并且可以支持多种前端框架共存。
微前端架构的优点
- 可扩展性：每个微前端都可以独立开发、部署，易于扩展。
- 灵活性：可以根据业务需求选择最合适的前端框架和技术栈。
- 隔离性：各个微前端之间相互隔离，降低了互相影响的风险。
- 可维护性：每个微前端都是一个小的、可管理的模块，更容易维护。
微前端架构的实现方式
qiankun
qiankun 是一个轻量级的微前端解决方案，它基于单页应用 (SPA) 的理念，使用代理的方式实现了子应用的加载和卸载。
示例：使用qiankun实现多框架微前端
假设我们有一个主应用（使用React），以及两个子应用（一个使用Vue，另一个使用Angular）。
1. 主应用（使用React）
安装依赖
bash
深色版本
1npm install react react-dom @umijs/qiankun
创建主应用
jsx
深色版本
1// src/index.js
2import React from 'react';
3import ReactDOM from 'react-dom';
4import { registerMicroApps, start } from 'qiankun';
5
6const container = document.getElementById('root');
7
8ReactDOM.render(
9 <div>
10 <h1>主应用 - React</h1>
11 <div id="sub-vue"></div>
12 <div id="sub-angular"></div>
13 </div>,
14 container
15);
16
17registerMicroApps([
18 {
19 name: 'sub-vue',
20 entry: '//localhost:8081',
21 container: '#sub-vue',
22 activeRule: '/sub-vue',
23 },
24 {
25 name: 'sub-angular',
26 entry: '//localhost:4200',
27 container: '#sub-angular',
28 activeRule: '/sub-angular',
29 },
30]);
31
32start();
2. Vue 子应用
安装依赖
bash
深色版本
1npm install vue
创建Vue子应用
vue
深色版本
1// src/main.js
2import Vue from 'vue';
3import App from './App.vue';
4
5new Vue({
6 render: h => h(App),
7}).$mount('#app');
8
9if (module.hot) {
10 module.hot.accept();
11}
html
深色版本
1<!-- public/index.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Vue Sub Application</title>
8</head>
9<body>
10 <div id="app"></div>
11 <script src="/dist/runtime.js"></script>
12 <script src="/dist/polyfills.js"></script>
13 <script src="/dist/vendor.js"></script>
14 <script src="/dist/main.js"></script>
15</body>
16</html>
vue
深色版本
1<!-- src/App.vue -->
2<template>
3 <div>
4 <h1>子应用 - Vue</h1>
5 </div>
6</template>
7
8<script>
9export default {
10 name: 'App',
11};
12</script>
3. Angular 子应用
安装依赖
bash
深色版本
1ng new angular-sub-app
2cd angular-sub-app
3ng build --prod
修改Angular子应用
typescript
深色版本
1// src/app/app.component.ts
2import { Component } from '@angular/core';
3
4@Component({
5 selector: 'app-root',
6 template: `
7 <div>
8 <h1>子应用 - Angular</h1>
9 </div>
10 `,
11})
12export class AppComponent {}
4. 启动服务器
对于Vue和Angular子应用，你可以使用本地开发服务器启动它们。例如，Vue可以用vue-cli启动，Angular可以用ng serve启动。
5. 测试
在浏览器中访问主应用的地址（比如 http://localhost:3000/），然后导航到 /sub-vue 和 /sub-angular，你会看到Vue和Angular子应用被正确加载和渲染。
以上是一个简单的示例，展示了如何使用qiankun实现基于不同前端框架的微前端架构。在实际项目中，你还需要考虑更多因素，比如状态管理、路由同步等问题。希望这个例子能够帮助你理解微前端的基本概念和实现方法。
以下是根据微前端架构下的主应用和两个子应用（一个Vue，一个Angular）设计的架构图：
此图展示了一个使用React作为主应用的场景，其中包含了两个子应用，分别是使用Vue和Angular构建的。主应用使用了qiankun来管理和调度子应用的加载与卸载。每个子应用都有自己的开发和构建流程，并且可以独立部署，最终通过主应用集成在一起。
希望这个架构图能够帮助你更好地理解微前端的工作原理和组件之间的交互方式。如果有任何疑问或需要进一步的帮助，请随时提问。