前言

一个WEB端管理系统包含好几个单独的模块，相互之间没有耦合，如果放到同一个项目里，同时好几个人去维护，不利于管理，单独子模块的上线会对整个项目全量上线风险比较大，并且容易代码冲突

一、为什么使用微前端

1. 技术栈无关 主框架不限制接入应用的技术栈，微应用具备完全自主权
2. 独立开发、独立部署 微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
3. 增量升级 在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
4. 独立运行时 每个微应用之间状态隔离，运行时状态不共享

我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib 。当路径切换 时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题。

二、qiankun 的概述

qiankun 是一个基于 Single-SPA 的微前端解决方案，它是由阿里巴巴前端团队开发的。qiankun 提供了一套完整的微前端解决方案，包括了路由管理、状态管理等功能。

通过使用 Qiankun，我们可以将多个前端应用组合成一个整体，每个应用可以独立开发、构建、部署和运行，从而提高了前端开发的效率。

三、Qiankun 集成 React 和 Vue

1. 创建 React 应用

首先，我们需要创建一个 React 应用，这里以 create-react-app 的方式为例：

npx create-react-app react-app

2. 创建 Vue 应用

接着，我们需要创建一个 Vue 应用，这里以 vue-cli 的方式为例：

npm install -g vue-cli  
vue create vue-app

3. 安装 qiankun

安装 qiankun：

npm install qiankun

4. 在 React 应用中注册子应用

在 React 应用中注册 Vue 应用作为子应用，通过调用 qiankun 的 registerMicroApps 方法实现：

// jsx
import { registerMicroApps, start } from "qiankun";
import VueApp from "./VueApp";

const subApps = [
  {
    name: "vue-app",
    entry: "//localhost:8081",
    container: "#subapp-viewport",
    activeRule: "/vue"
  }
];

registerMicroApps(subApps);

start();

其中，subApps 数组中包含了要注册的子应用的信息。其中，name 是应用的名称，entry 是应用的入口 URL，container 是子应用渲染的挂载节点，activeRule 是子应用激活的路由规则。

5. 在 Vue 应用中注册子应用

在 Vue 应用中注册 React 应用作为子应用，通过调用 qiankun 的 registerMicroApps 方法实现:

//js
import { registerMicroApps, start } from "qiankun";
import ReactApp from "./ReactApp";

const subApps = [
  {
    name: "react-app",
    entry: "//localhost:8080",
    container: "#subapp-viewport",
    activeRule: "/react"
  }
];

registerMicroApps(subApps);

start();

其中，subApps 数组中包含了要注册的子应用的信息。其中，name 是应用的名称，entry 是应用的入口 URL，container 是子应用渲染的挂载节点，activeRule 是子应用激活的路由规则。

6. 修改子应用的入口代码

修改 React 应用的入口代码，将应用打包成 library 的方式：

//js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

function render(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector("#root") : document.getElementById("root"));
}

if (process.env.NODE_ENV === "development") {
  render({});
}

export { render };

修改 Vue 应用的入口代码，将应用打包成 library 的方式：

//js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

let instance = null;

function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector("#app") : "#app");
}

if (process.env.NODE_ENV === "development") {
  render();
}

export { instance, render };

7. 启动应用

分别在 React 和 Vue 应用的根目录下执行以下命令启动应用：

npm start 可以访问 http://localhost:8080/react 和 http://localhost:8081/vue 来访问 React 和 Vue 子应用了。

至此一个简单的微前端服务搭建完毕，有不对的地方欢迎大家指正！