微前端qiankun改造实例分析

本文小编为大家详细介绍“微前端qiankun改造实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“微前端qiankun改造实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。首先我先用vue2-admin-cli——我自己做的脚手架工具，创建两个vue-admin项目来演示，一个作为qiankun基座，另外一个就是我要引用的子应用。运行起来就是这样的现在我们开始分别改造基座qiankun-base和子应用qiankun-vue，我想达到的效果是主应用qiankun-base只保留header sider footer的一个基本layout的布局，content部分全部加载子应用在入口文件src/main.ts下注册微应用并启动：在你要放置子应用的位置增加一个容器用于加载子应用src/components/layout/index.vue将主应用之前的路由配置进行修改，不渲染自己的内容了，因为要改成去加载子应用的内容才是我们想要的,我的左侧菜单栏sider也是用路由配置这份文件生成的，所以我只需要注释这些路由要渲染的components就行，让他只充当一个生成sider菜单栏的作用，但是注意要保留容器所在的layout，因为我的子应免费云主机域名用加载容器在这里面，加载子应用之前你必须保证容器被加载了src/router/config.ts改完之后刷新看一看，这样基座项目就改造好了，保留了基本页面的框架，中间的内容到时候都由子应用来填充就行了修改package.json启动命令修改启动端口”serve”: “vue-cli-service serve –port 8080 –open”入口文件 src/main.ts 修改src/router/index.ts修改路由模式并增加base（和主应用设置的activeRule一致）打包配置修改（`vue.config.js`）基座和子应用都修改完以后刷新看看，控制台报错了立马查看官方文档，发现是因为我的子应用加载容器在基座的某个路由页面即我的layout里面，文档里指出必须保证微应用加载时主应用这个路由页面也加载了，就很喜欢这种文档????????，于是立马改一改注释之前qiankun-base注册子应用时的启动qiankun命令，改到路由页面layout里面启动
src/main.ts重新刷新看看，成功了????????，多少有点舒服了接下来要做的就是把子应用再改造一下，在qiankun中就只需要展示子应用content的内容，单独运行的时候为了方便调试我们就保留layout布局。看了这么久的官方文档，我当然知道用它就可以做出判断__POWERED_BY_QIANKUN__，思路很清晰，冲他????????qiankun-vuesrc/components/layout/index.vue看看效果基座正常展示子应用子应用单独运行也正常展示，并且丝毫不影响开发体验读到这里，这篇“微前端qiankun改造实例分析”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: vue怎么实现lodash的debounce防抖

这篇文章主要介绍“vue怎么实现lodash的debounce防抖”，在日常操作中，相信很多人在vue怎么实现lodash的debounce防抖问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现lodash的debou…