1.qiankun是什么？它解決了哪些問題？

qiankun 是一個基于?single-spa?的微前端實現(xiàn)庫，換句話說就是對single-spa進(jìn)行了封裝得到qiankun。

qiankun就是將一個大應(yīng)用拆分成好多小項目，qiankun解決了我們協(xié)同開發(fā)的一些問題，其次更方便于我們進(jìn)行更新代碼 。

2.qiankun的實現(xiàn)原理及過程。

（1）監(jiān)聽路由變化

（2）匹配子應(yīng)用

（3）加載子應(yīng)用

（4）渲染子應(yīng)用

我們可以簡單概括為當(dāng)匹配到activeRule的時候，請求獲取entry資源，渲染到container中。

3.大家可以結(jié)合spa應(yīng)用的父子組件對比的來理解qiankun

我們拿vue2的父子組件來簡單分析一下。

qiankun首先也是在他的基座（主應(yīng)用）注冊子應(yīng)用

子應(yīng)用名稱：父組件中子組件的名稱

其次規(guī)定他的地址端口號（父子組件沒有）:獲取entry的html資源

渲染子應(yīng)用的容器container:父組件中子組件的占位符

觸發(fā)加載子應(yīng)用的路徑activeRule：相當(dāng)于子路由

子應(yīng)用需要配置跨域：因為你這個端口號發(fā)生了變化

這個就是對小白來說方便理解這個qiankun，目前在微前端框架領(lǐng)域里，qiankun算是用的最好最多的。

4.qiankun實戰(zhàn)配置。

1.首先創(chuàng)建主應(yīng)用項目、微應(yīng)用項目

2.主應(yīng)用安裝qiankun? ?npm i qiankun -S

我這次以react項目作為主應(yīng)用、子應(yīng)用是一個vue項目 一個react項目

第一步，在主應(yīng)用里面注冊子應(yīng)用（在主應(yīng)用的入口文件里）

import { registerMicroApps, start } from 'qiankun'; // 底層是基于single-spa

const loader = (loading) => {
    console.log(loading)
}
registerMicroApps([{
        name: 'm-vue',  // 子應(yīng)用的名稱
        entry: '//localhost:20000',  // 子應(yīng)用的入口地址
        container: '#container',  // 渲染的容器
        activeRule: '/vue',  // 觸發(fā)渲染的路徑
        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
    }
});

第二步，在主應(yīng)用的出口文件添加觸發(fā)子應(yīng)用的路徑

import {BrowserRouter as Router,Link} from 'react-router-dom'
function App() {
  return (
    <div className="App">
        <Router>
          <Link to="/vue">vue應(yīng)用</Link>
          <Link to="/react">react應(yīng)用</Link>
        </Router>
         {/* 切換導(dǎo)航， 將微應(yīng)用渲染container容器中 */}

        <div id="container"></div>
    </div>
  );
}



export default App;

第三步，子應(yīng)用里面的配置vue.config.js

module.exports = {
    publicPath: '//localhost:20000', //保證子應(yīng)用靜態(tài)資源都是像20000端口上發(fā)送的
    devServer: {
        port: 20000, // fetch
        headers:{
            'Access-Control-Allow-Origin': '*'
        }
    },
    configureWebpack: { // 需要獲取我打包的內(nèi)容  systemjs=》 umd格式
        output: {
            libraryTarget: 'umd',
            library: 'm-vue'// window['m-vue']
        }
    }
}

第四步，子應(yīng)用里面的main.js

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue'
import routes from './router'

// 不能直接掛載 需要切換的時候 調(diào)用mount方法時候再去掛載
let history;
let router;
let app;
function render(props = {}){
    history =  createWebHistory('/vue');
    router = createRouter({
        history,
        routes
    });
    app = createApp(App);
    let {container} = props; // 默認(rèn)他會拿20000端口的html插入到容器中，
    app.use(router).mount(container ? container.querySelector('#app'):'#app')
}

// 乾坤在渲染前 給我提供了一個變量 window.__POWERED_BY_QIANKUN__

if(!window.__POWERED_BY_QIANKUN__){ // 獨立運行自己
render();
   
}

// 需要暴露接入?yún)f(xié)議
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;
}

這是一個簡單的實戰(zhàn)配置，關(guān)注我，下一篇文章整理qiankun的源碼，更加徹底的掌握qiankun,大家有啥建議或者觀點歡迎評論區(qū)留言。文章來源地址http://www.zghlxwxcb.cn/news/detail-654207.html

到了這里，關(guān)于微前端----qiankun的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！