基于vue3+koa2+qiankun2的微前端后台管理系统项目实战.zip

# wl-mfe 基于 vue3.0-beta 及 qiankun2.0 极速尝鲜！微前端进阶实战项目。 项目地址：[wl-mfe]() 微前端实战详细入门教程及解放方案请转至我另一篇文章：[微前端实战看这篇就够了 - Vue项目篇](https://juejin.im/post/5e1824296fb9a02fde20fec9)。 项目地址：[wl-micro-frontends [wl-qiankun]](hql7/wl-micro-frontends) && [在线访问](http://mfe.wlui.com.cn/) 部署教程：[使用各种姿势舒服的部署微前端项目](https://juejin.cn/post/6921649095610204173/) ### 最终效果  ## 项目启动 ```js npm run yinit // 使用yarn下载依赖，推荐 npm run cinit // 使用cnpm下载依赖 npm run init // 或 使用npm下载依赖 npm run serve // 运行全部项目 yarn serve y // yarn运行全部项目 npm run build // 打包全部项目 yarn build y // 打包全部项目 npm run publish // 执行发布脚本 ``` 注意：如果下载报错，报 bin/sh 找不到start命令，那你可能是mac or linux，那就进入目录一个一个下载运行吧。 另：执行批量服务耗时较久，请耐心等待，init与build成功会在控制台提示，serve稍加等待或刷新浏览器即可。 ## 实战详解todo - [x] 主应用基座构建 - [x] 子应用构建 - [x] 微应用间通信 - [x] 跨应用通信与vuex结合 - [x] 发布上线 ## 主应用基座构建 主应用需要用到elementui，暂时使用vue2.0+qiankun2.0版本。vue3.0beta体验在下面【子应用构建】章节 主应用项目主要在5个文件：`utils`文件夹，`app.vue`，`appRegister.js`，`main.js`，`render.js` ### 前提条件 ```js cnpm i qiankun -S ``` 在主应用下载qiankun，注意使用2.0以上版本 ### 改造主应用app.vue ```js <template> <div class="main-container-view"> <el-scrollbar class="wl-scroll"> <!-- qiankun2.0 container 模式--> <div id="subapp-viewport" class="app-view-box"></div> <!-- qiankun1.0 render 模式--> <div v-html="appContent" class="app-view-box"></div> <div v-if="loading" class="subapp-loading"></div> </el-scrollbar> </div> </template> <script> export default { name: "rootView", props: { loading: Boolean, appContent: String } }; </script> ``` 注意这里，qiankun2.0是根据 `container`字段对应的dom id来注册子应用盒子的，因此只用qiankun2.0的话不需要考虑render注测子应用盒子的情况，下面那两个dom和script里的`props`都可以不要！只留一个`<div id="subapp-viewport"></div>`即可！ 另外：注册子应用时每个子应用都可以指定一个不同的`container`，因此如果想做每个子应用的keep-alive，则可能需要每个子应用对应一个`<div id="subapp-viewport-ui"></div>`，`<div id="subapp-viewport-blog"></div>`盒子 ### 将实例化vue方法提取至render.js ```js import Vue from "vue" import router from './router' import store from './store' import App from './App.vue' /** * @name 提取vue示例化方法 */ export function vueRender() { Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount("#main-container"); } ``` 为什么要仅仅将这段代码从`main.js`摘出呢？一方面是尽量清洁main.js；另一方面，就是为了兼容qiankun1.0的render方法。 因为qiankun1.0需要在注册vue实例时显式的将`appContent`传入app.vue，如果你不用qiankun1.0版本,则完全不需要以下代码： ```js /** * @description 实例化vue，并提供子应用 render函数模式的装载能力 * @description 如果使用qiankun2.0 版本，只需正常实例化vue即可 不需要存在此render函数 * @param {Object} param0 * @description {String} appContent 子应用内容 * @description {Boolean} loading 是否显示加载动画（需手动实现loading效果） * @param {Boolean} notCompatible true则不兼容qiankun1.0 【此参数为示例添加，实际应用自酌】 */ export function vueRender({ appContent, loading }, notCompatible) { Vue.config.productionTip = false // 实际上本实例只用到此if内的代码 // 本文件其他代码只为做兼容qiankun1.0 render挂载子应用的参考 if (notCompatible) { new Vue({ router, store, render: h => h(App) }).$mount("#main-container"); return; } return new Vue({ router, store, data() { return { appContent, loading, }; }, render(h) { return h(App, { props: { appContent: this.content, loading: this.loading } }); } }).$mount('#main-container'); } let app = null; /** * @name 提供render装载子应用方法 * @param {Object} param0 * @description {String} appContent 子应用内容 * @description {Boolean} loading 是否显示加载动画（需手动实现loading效果） */ export default function render({ appContent, loading }) { if (!app) { app = vueRender({ appContent, loading }); } else { app.appContent = appContent; app.loading = loading; } } ``` 此处是给兼容qiankun1.0 registerMicroApps方法render字段一种方案，事实上升级到2.0完全无压力，因此建议不需要留下臃肿的render方法。 ### 将注册子应用的逻辑抽离到appRegister.js 下面用了一个方法将qiankun需要用到的方法全部包装起来，以便后续将注册子应用放到获取后端注册表数据后执行。 ```js /** * @name 启用qiankun微前端应用 * @param {*} list * @param {*} defaultApp */ const useQianKun = (list, defaultApp) => { /** * @name 注册子应用 * @param {Array} list subApps */ registerMicroApps( [ { name: 'subapp-ui', // 子应用app name 推荐与子应用的package的name一致 entry: '//localhost:6751', // 子应用的入口地址，就是你子应用运行起来的地址 container: '#yourContainer', // 挂载子应用内容的dom节点 `# + dom id`【见上面app.vue】 activeRule: '/ui', // 子应用的路由前缀 }, ], { beforeLoad: [ app => { console.log('[LifeCycle] before load %c%s', 'color: green;', app.name); }, ], beforeMount: [ app => { console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name); }, ], afterUnmount: [ app => { console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name); }, ], }, ) /** * @name 设置默认进入的子应用 * @param {String} 需要进入的子应用路由前缀 */ setDefaultMountApp('ui'); /** * @name 启动微前端 */ start(); /** * @name 微前端启动进入第一个子应用后回调函数 */ runAfterFirstMounted(() => { console.log('[MainApp] first app mounted'); }); } ``` 结合请求后端注册表，并给子应用分发路由及数据改造后的完整代码： ```js import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start, initGlobalState } from "qiankun"; import store from "./store"; /** * @name 导入render函数兼容qiakun1.0装载子应用方法，如果使用2.0container装载则不需要此方法,此处留着注释代码提供兼容qiankun1.0的示例 * @description 此处留下注释代码仅为提供兼容qiankun1.0示例 */ // import render from './render'; /** * @name 导入接口获取子应用注册表 */ import { getAppConfigsApi } from "./api/app-configs" /** * @name 导入消息组件 */ import { wlMessage } from './plugins/element'; /** * @name 导入想传递给子应用的方法，其他类型的数据皆可按此方式传递 * @description emit建议主要为提供子应用调用主应用方法的途径 */ import emits from "./utils/emit" /** * @name 导入qiankun应用间