feat: 微前端简述

MicroApp.md

@@ -0,0 +1,74 @@
+
+## 剑鱼微前端状况简述
+
+### 微前端简述
+目前主流的微前端框架技术思想，都是基于WebComponent的思路，通过js沙箱、样式隔离、元素隔离、路由隔离模拟实现了ShadowDom的隔离特性，并结合CustomElement将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。
+
+![img.png](./img.png)
+
+### 技术选择
+
+在2022年前期工作台搭建时，调研了当时主流的微前端技术框架 `qiankun`、`无界`、`mirco-app`。
+
+结合当时技术状况，以及生成环境的稳定性，选择使用社区成熟度、热度较高的 `qiankun`。
+
+### 集成流程
+
+#### 基座（工作台）
+
+仅仅需要注册子应用，
+
+配置示例：
+```
+ qiankun: {
+  name: 'testSubApp',
+  entry: '/page_test/index.html',
+  rule: '/test'
+},
+```
+
+![img_1.png](./img_1.png)
+
+#### 子应用集成
+1. 配置子应用生命周期
+
+vue项目，`main.js`入口文件示例
+```
+import { easySubAppRegister } from '@jianyu/easy-inject-qiankun'
+export const { bootstrap, mount, unmount } = easySubAppRegister({
+    Vue,
+    router,
+    store,
+    App,
+    el: '#app'
+})
+```
+2. 导出模块
+
+历史项目，基于 `vue@cli` 配置 webpack 示例
+```
+configureWebpack: {
+    ...,
+    output: {
+      library: 'testSubApp',
+      libraryTarget: 'umd',
+      jsonpFunction: `webpackJsonp_${packageName}`
+    },
+}
+```
+
+新项目，基于 `vite` 配置示例
+```
+import { legacyQiankun } from 'vite-plugin-legacy-qiankun'
+
+...
+
+plugins: [
+    ...,
+     legacyQiankun({
+      name: 'testSubApp',
+      devSandbox: false
+    }) 
+]
+
+```