微前端实战看这篇就够了 - Vue项目篇

wl-micro-frontends [wl-qiankun]

本项目采用 vue + qiankun 实践微前端落地。
同时qiankun是一个开放式微前端架构，支持当前三大前端框架甚至jq等其他项目无缝接入。
此项目为了尽可能的简单易上手，以及方便文章讲解，大部分逻辑都在主应用和子应用的main.js来回施展，
实际项目应用可不要如此粗暴，要有优雅的架构设计。

在线地址

项目启动

npm run cinit
npm run init
下载依赖，因为是批量下载所有应用下的依赖，推荐cinit节省下载时间

npm run serve 
运行项目，同样，批量运行所有应用会耗时较久，浏览器页面自动打开后请稍家等待，然后刷新即可

npm run build
打包项目，打包所有应用

微前端 qiankun

微前端是什么、为什么要做微前端、qiankun是什么这些笔者将不再叙述。（文末有彩蛋~）
传送门：可能是你见过最完善的微前端解决方案 & qiankun
下面直接进入实战教程。

实战教程目录详解

鉴于qiankun文档只有寥寥十几行，这里做一个尽量详细的实战示例描述:

• 微前端主应用与子应用如何构建
• 主应用与子应用通信(静态，无法监测到值变化)
• 主、子，各应用间动态通信(动态，各应用间实时监听，同步数据)
• 主应用资源下发至子应用
• 微前端鉴权方案
  • 一：异步注册(主应用异步获取子应用注册表并将子应用对应的路由下发至子应用)
  • 二：异步路由(使用应用间通信，通知子应用路由数据，子应用在内部addRoutes异步插入路由)
• 各应用间路由基础管理
• 公共资源处理

微前端主应用与子应用如何构建

构建主应用

1. 创建一个主项目工程目录
2. npm install qiankun 下载微前端方案依赖
3. 改造主项目：

在main.js中

    // 导入qiankun内置函数
    import {
        registerMicroApps, // 注册子应用
        runAfterFirstMounted, // 第一个子应用装载完毕
        setDefaultMountApp, // 设置默认装载子应用
        start // 启动
    } from "qiankun";
    
    let app = null;
    /**
     * 渲染函数
     * appContent 子应用html
     * loading 如果主应用设置loading效果，可不要
     */
    function render({ appContent, loading } = {}) {
        if (!app) {
            app = new Vue({
                el: "#container",
                router,
                store,
                data() {
                    return {
                        content: appContent,
                        loading
                    };
                },
                render(h) {
                    return h(App, {
                        props: {
                        content: this.content,
                        loading: this.loading
                        }
                    });
                }
            });
        } else {
            app.content = appContent;
            app.loading = loading;
        }
    }; 
    
    /**
    * 路由监听
    * @param {*} routerPrefix 前缀
    */
    function genActiveRule(routerPrefix) {
        return location => location.pathname.startsWith(routerPrefix);
    }
    
    // 调用渲染主应用
    render();
    
    // 注册子应用
    registerMicroApps(
        [
            {
                name: "vue-aaa"
                entry: "//localhost:7771",
                render,
                activeRule: genActiveRule("/aaa")
            },
            {
                name: "vue-bbb"
                entry: "//localhost:7772",
                render,
                activeRule: genActiveRule("/bbb")
            },
        ],
        {
            beforeLoad: [ 
                app => {
                    console.log("before load", app);
                }
            ], // 挂载前回调
            beforeMount: [
                app => {
                    console.log("before mount", app);
                }
            ], // 挂载后回调
            afterUnmount: [
                app => {
                    console.log("after unload", app);
                }
            ] // 卸载后回调
        }
     )
     
     // 设置默认子应用,参数与注册子应用时genActiveRule("/aaa")函数内的参数一致
    setDefaultMountApp("/aaa");
    
    // 第一个子应用加载完毕回调
    runAfterFirstMounted(()=>{});
    
    // 启动微服务
    start();

注意, 主应用的el绑定dom为#container，因此你也需要修改一下index.hrml模板中的id

在app.vue中，增加一个渲染子应用的盒子

    <template>
        <div id="root" class="main-container">
            <div class="main-container-menu">
                
            </div>
        <!-- 子应用盒子 -->
        <div id="root-view" class="app-view-box" v-html="content"></div>
    </div>
    </template>

    <script>
    export default {
        name: "root-view",