1.qiankun是什么？它解决了哪些问题？
qiankun 是一个基于 single-spa 的微前端实现库，换句话说就是对single-spa进行了封装得到qiankun。
qiankun就是将一个大应用拆分成好多小项目，qiankun解决了我们协同开发的一些问题，其次更方便于我们进行更新代码 。
2.qiankun的实现原理及过程。
（1）监听路由变化
（2）匹配子应用
（3）加载子应用
（4）渲染子应用
我们可以简单概括为当匹配到activeRule的时候，请求获取entry资源，渲染到container中。
3.大家可以结合spa应用的父子组件对比的来理解qiankun
我们拿vue2的父子组件来简单分析一下。
qiankun首先也是在他的基座（主应用）注册子应用
子应用名称：父组件中子组件的名称
其次规定他的地址端口号（父子组件没有）:获取entry的html资源
渲染子应用的容器container:父组件中子组件的占位符
触发加载子应用的路径activeRule：相当于子路由
子应用需要配置跨域：因为你这个端口号发生了变化
这个就是对小白来说方便理解这个qiankun，目前在微前端框架领域里，qiankun算是用的最好最多的。
4.qiankun实战配置。
1.首先创建主应用项目、微应用项目
2.主应用安装qiankun npm i qiankun -S
我这次以react项目作为主应用、子应用是一个vue项目 一个react项目
第一步，在主应用里面注册子应用（在主应用的入口文件里）
import { registerMicroApps, start } from 'qiankun'; // 底层是基于single-spa const loader = (loading) => { console.log(loading) } registerMicroApps([{ name: 'm-vue', // 子应用的名称 entry: '//localhost:20000', // 子应用的入口地址 container: '#container', // 渲染的容器 activeRule: '/vue', // 触发渲染的路径 loader, }, { name: 'm-react', entry: '//localhost:30000', container: '#container', activeRule: '/react', loader } ], { beforeLoad: () => { console.log('加载前') }, beforeMount: () => { console.log('挂在前') }, afterMount: () => { console.log('挂载后') }, beforeUnmount: () => { console.log('销毁前') }, afterUnmount: () => { console.log('销毁后') }, }) start({ sandbox:{ // experimentalStyleIsolation:true strictStyleIsolation:true } });
第二步，在主应用的出口文件添加触发子应用的路径
import {BrowserRouter as Router,Link} from 'react-router-dom' function App() { return ( <div className="App"> <Router> <Link to="/vue">vue应用</Link> <Link to="/react">react应用</Link> </Router> {/* 切换导航， 将微应用渲染container容器中 */} <div id="container"></div> </div> ); } export default App;
第三步，子应用里面的配置vue.config.js
module.exports = { publicPath: '//localhost:20000', //保证子应用静态资源都是像20000端口上发送的 devServer: { port: 20000, // fetch headers:{ 'Access-Control-Allow-Origin': '*' } }, configureWebpack: { // 需要获取我打包的内容 systemjs=》 umd格式 output: { libraryTarget: 'umd', library: 'm-vue'// window['m-vue'] } } }
第四步，子应用里面的main.js
import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue' import routes from './router' // 不能直接挂载 需要切换的时候 调用mount方法时候再去挂载 let history; let router; let app; function render(props = {}){ history = createWebHistory('/vue'); router = createRouter({ history, routes }); app = createApp(App); let {container} = props; // 默认他会拿20000端口的html插入到容器中， app.use(router).mount(container ? container.querySelector('#app'):'#app') } // 乾坤在渲染前 给我提供了一个变量 window.__POWERED_BY_QIANKUN__ if(!window.__POWERED_BY_QIANKUN__){ // 独立运行自己 render(); } // 需要暴露接入协议 export async function bootstrap(){ console.log('vue3 app bootstraped'); } export async function mount(props){ console.log('vue3 app mount',); render(props) } export async function unmount(){ console.log('vue3 app unmount'); history = null; app = null; router = null; }
这是一个简单的实战配置，关注我，下一篇文章整理qiankun的源码，更加彻底的掌握qiankun,大家有啥建议或者观点欢迎评论区留言。
