【】qiankun - 基座 vue2 + 子应用1 vue2

已于 2023-06-20 09:35:52 修改
阅读量213 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端
于 2022-11-23 10:56:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49210760/article/details/127996253
版权

在这里插入图片描述

1.使用的挂载方法是手动挂载
在这里插入图片描述

下面是子应用vue2的配置
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

沁染流年
关注
专栏目录
以vue.js为基座，搭建前端微应用（实现简单的通过基座访问子应用）
m0_56751787的博客
03-28 615
在同级目录中创建两个或多个vue项目，区分开哪个是基座，哪些是子应用；我这里只创建一个子应用，大家可以根据自己的掌握情况，后续创建多个子应用；3.把父级应用跑起来，通过父级应用的 localhost:xxxx/app1,进行访问，验证是否可以加载子应用内容,内容变换代表，搭建成功。打开qiankun官网，结合我整理的教程与官网对照着学习，因为官网教程不够详细，下面我会手把手教大家如果搭建一个前端微应用~注:环境不要装错，如果想不起来怎么新建vue项目，就去vue.js官网查看。注：注释掉的内容后面。
【qiankun微前端】基座主应用（vue2）+多个微应用(任意框架)
最新发布
Li_Ning21的博客
08-03 880
前段时间对我们已有的工程进行了微前端改造，后来思考一下微前端的本质，查询了不少资料，从qiankun微前端示例中学到了不少。
记录第一次用微前端qiankun 基座是vue2 子应用也是vue2
qq_15236153的博客
06-21 318
qiankun 微前端 vue2
vue + qiankun全局变量配置（组件，指令，函数）
Todo_MrWu的博客
07-16 247
/ 注册全局指令})// 注册全局组件})// 注册全局函数})}, true)
qiankun应用级缓存-多页签缓存
qq_38935512的博客
04-23 3481
应用间切换需要保存页面缓存（多页签缓存），通过vue keep-alive只能实现页面级缓存，在单独打开的应用里能实现缓存，但是子应用切换到主应用，那子应用的缓存失效。第一种qiankun自动检测路有的变化来控制子应用的卸载和加载，我们无法监听到，也就无法去替换vnode，所以采用第二种，手动加载应用（通过路由的变化去监听下就行了）采用子应用切换时，将子应用作为一个vue实例，再次加载时使用保存的实例上的vnode替换vue实例化的时候的render函数。这里要区分是否是首次进入。
vue+qiankun -- 多tab标签页切换缓存
m0_59930878的博客
04-09 990
组件开启keep-alive，由于keep-alive只能支持二级及以下路由，对于三级及以上路由，keep-alive失效，所以需要对keep-alive重新封装，并且在qiankun提供的生命周期钩子update里调用子应用删除缓存的方法 用于清除子应用组件keep-alive缓存。删除tab时是子应用并且在tablist中是否还有子应用菜单，如果没有，则unmount方法卸载子应用，如果有子应用菜单，则执行update方法清除该子应用的组件缓存。主子应用都使用vue，路由统一使用history模式。
使用vue的module基座&多模块工程，上传到环境上样式不生效
weixin_45121510的博客
07-22 156
路由出入口文件page-router样式不生效： 解决： 在router.js文件中： // import pageRouter from '@/views/page-router' （这样写有问题） export default { path: , name: , //component: pageRouter component: () => import('@/views/page-router'), // 这里直接引入 …… } ...
基于qiankun+vue-elment-admin打造微服务使用说明v.1.01
08-03
基座路由配置应该能够识别并转发到对应的子应用，确保用户可以在不同的微服务之间平滑切换。 3. 微应用注入说明 3.1 注入应用说明 每个微应用都需要在基座中注册，提供其启动和卸载的逻辑。 3.2 注入依赖方式 通过...
基于vue3+koa2+qiankun2的微前端后台管理系统项目实战.zip
03-03
vue3.0beta体验在下面【子应用构建】章节 主应用项目主要在5个文件：utils文件夹，app.vue，appRegister.js，main.js，render.js 前提条件 cnpm i qiankun -S 在主应用下载qiankun，注意使用2.0以上版本
基于qiankun+vue-element-admin实现微前端工程改造
tamil2021的博客
08-02 4983
废话不多说，先上源码：https://gitee.com/tmvc/tmvc
vue3+qiankun框架初体验
lbchenxy的博客
08-04 2953
项目框架基座和子项目都为vue3 qiankun官网 首先我们需要了解什么是微前端，他是做什么的。 1.什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。简单来说就是就是可以把多个不同框架的项目部署在不同环境，但又可以在一个项目中访问。 2.他是做什么的 他可以将不同框架的多个项目组成统一项目，而组成项目的子项目又可以单独部署单独访问。可以说他们的关系是互相关联而又互不关联。 说明：由于项目还并没有进行上线测试，此代码还不能保证上线没有问题，如有问题
JeecgBoot框架qiankun微服务vue2子应用配置
m0_49385985的博客
10-30 659
在子应用src目录下新建qiankun文件夹下创建qiankun-actions.js文件内容如下。修改main.js文件 $mount('#jeecg-app-1') 需要主应用中的一致。在子应用src目录下新建qiankun文件夹下创建public-path.js文件内容如下。子应用vue.config.js完整配置参考如下内容。
基于qiankun的微前端最佳实践 -（同时加载多个微应用）
qq_39398332的博客
08-15 8576
介绍 qiankun 在正式介绍 qiankun 之前，我们需要知道，qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 微前端的概念借鉴自后端的微服务，主要是为了解决大型工程在变更、维护、扩展等方面的困难而提出的。目前主流的微前端方案包括以下几个： iframe 基座模式，主要基于路由分发，qiankun 和 single-spa 就是基于这种模式 组合式集成，即单独构建组件，按需加载，类似 npm 包的形式 EMP，主
vue2使用qiankun微前端（跟着步骤走可实现）
请叫我欧皇！的博客
01-16 3851
比如现在的vue项目，是一个整体之后包含了多个模块（路由），之后多人开发的时候合并代码可能会造成代码冲突，打包也是全部代码一起打包。微前端解决了这个问题，由一个主应用程序（也就是基座）之后连接多个单独的子应用程序，每个子应用程序都是单独的，你用vue写商品管理，他用react写物流管理等都可以，不同的模块可以由不同的技术栈写。打包也是单独打包。比较方便。
qinakun实现全局状态管理
weixin_43845137的博客
03-24 437
【代码】qinakun实现全局状态管理。
微前端qiankun手动加载子应用
weixin_44186986的博客
08-05 5041
使用qiankun的手动加载API，使用场景：加载某一子应用的某一页面
【微前端】手把手带你从零开始搭建一个qiankun+vue微前端应用
lixiaosenlin的专栏
11-04 4318
前言 小伙伴们大家好。上一篇文章中我们分享了qiankun的一些概念和特性，以及基于qiankun实现有一个微前端应用的大概步骤，最后以qiankun加vue2.0为例给出了快速搭建qiankun微前端的一些核心代码。那么接下来将基于前面文章的操作步骤及核心代码，从零开始实现一个简单而又完整的qiankun微前端项目。此项目中仍以vue2.0为主进行项目构建。话不多说，我们马上开始。 主应用 利用vue脚手架创建一个vue2.0项目：qiankun-main（vue create qiankun-m
关于qiankun的使用与部署过程，全详细记录
我的Object Lift
12-22 6782
1.安装qiankun qiankun的官网qiankun - qiankun 安装过程 $ yarn add qiankun # or npm i qiankun -S 主应用安装，子应用不需要安装； 2.主应用qiankun配置内容； vue -template -admin作为本次记录的主体； 新建micro.js 在一下代码段中，将按照qiankun的配置模式，为主应用配置加载的主应用内容； /** * qiankun 模式 * 子系统构建主控文件 ...
vue3 + qiankun
05-10
Vue3和qiankun都是目前前端领域非常流行的技术，它们可以在许多不同的场景下被应用。其中，Vue3是Vue框架的最新版本，它在设计之初就注重了性能和开发体验的优化，同时也增加了许多新功能，让开发者可以更加方便地构建高性能的web应用。而qiankun则是一款微前端框架，它可以让不同的团队开发自己的应用，并将它们集成到一个统一的页面中，以提高开发效率和应用的可维护性。 Vue3借助新的响应式数据结构可以大幅度提升渲染性能，同时也改进了一些语法和 API，更加符合现代开发的规范，易于上手和使用。Vue3在开发途中使用了编译时优化，还引入了定制化渲染器，使得开发者可以更加轻松地根据不同的业务需求进行个性化开发，而不影响整体性能。 qiankun则将多个微前端应用组装成一个整体，使用起来非常简单方便，并且具有高可扩展性和灵活性。它提供了诸如应用间通信、共享状态、应用隔离等功能，便于管理和维护多个应用之间的依赖关系和协作。此外，qiankun还支持热更新，可以在应用代码发生变更时，不影响整体部署的运行，提高了开发迭代速度。 综上所述，Vue3和qiankun分别从不同的角度出发，为前端开发者提供了高效、易用的开发工具。在实际应用中，可以根据业务场景的需要，将两者结合起来，构建出更具扩展性、可维护性和性能的web应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值