qiankun

2022 你还不会微前端吗 (下) — 揭秘微前端核心原理

微前端核心原理当然在正式开始自己实现之前，有且非常有必要先了解一下已有的微前端框架是如何实现其核心功能的，这里我们以qiankun来作为目标来了解一下其中的核心点：路由劫持加载子应用独立运行时，即沙
·2022-11-16 23:46

qiankun子应用图片资源加载404 解决方案

方案一：配置webpackurl-loader小文件转为base64大文件配置publicPath为子应用地址缺点：打包前需要区分不同环境，配置publicPath方案二：资源引用地址根据环境env写死主应用为window绑定环境变量，window._env子应用根据window._env,设置引用地址方案三：子应用地址加'/xxx'前缀，主应用nginx将'/xxx'代理到子应用地址
·2022-10-16 21:45

Qiankun原理详解JS沙箱是如何做隔离

目录前言复习一下沙箱SanpshotSandboxLegacySandboxProxySandbox隔离原理XXXisundefined总结前言相信大家也知道qiankun有SnapshotSandbox
·2022-10-01 05:34

前端跨域问题解决办法, Nginx配置为例

前端微服务Tips：可以将多个系统融合成一个系统，无技术壁垒，可以像iframe一样实现功能组合●qiankun（阿里支持）●micro-app（京东支持）●wujie（腾讯支持）本人推荐使用微服务会导致跨域问题
·2022-09-19 10:46

Vue qiankun微前端实现详解

目录引言What：微前端是什么Why：为什么选择微前端微前端能做到什么为什么不使用iFrameHow：微前端实践在主应用中注册微应用在子应用导出相应的生命周期钩子结尾引言前端时间有个契机，让我们团队开始进行微前端的相关实践。最近正好有些成果了，来一个阶段性的总结，也方便后续进一步的开发。可能第一次听说微前端的同学都会不明觉厉，那么ta到底是个啥？本章会从以下3个角度阐述我的理解：What：微前端是
·2022-09-14 18:01

qiankun 样式隔离

如果用strictStyleIsolation:true，会用shadowDom的方式进行隔离。以及加上实验性的样式隔离特性experimentalStyleIsolation:true后，后续可能出现dialog等挂载到全局中时，某些同名样式(特别是同框架的情况下，样式名经常冲突)样式冲突。而且会导致以下问题。例如如果子应用用react18进行开发，挂载到id为root的dom上。(vue3的子
TouchMe丶·2022-09-14 16:41

微前端qiankun框架的底层实现原理

qiankun框架的底层原理现在我们手写一个简易的qiankun框架，实现基础的父应用中切换路径跳转子应用、沙箱隔离等qiankun框架的功能。
veggie_a_h·2022-09-07 20:58

微前端（Micro-Frontends）qiankun框架原理与实现

文章目录微前端（Micro-Frontends）qiankun框架原理与实现1.qiankun简介2.qiankun核心设计理念3.为什么不用iframe4.qiankun的特性5.实现原理（1）应用加载
qq_39670012·2022-09-07 20:16

微前端——qiankun（乾坤）实例

一、什么是微前端微前端就是将不同的功能按照不同的未读拆分成多个子应用，通过主应用来加载这些子应用，微前端的核心在于拆，拆完后再合二、为什么使用微前端不同团队间开发一个应用技术栈不同希望每个团队都可以独立开发，独立部署项目中还需要老的应用代码我们可以将一个应用划分成若干哥子应用，将子应用打包成一个个的lib，当路径切换时加载不同的子应用，这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端
菜鸟咸鱼一锅端·2022-09-02 19:30

基于微前端qiankun的多页签缓存方案实践

1.1单页面应用实现多页签1.2使用qiankun进行微前端改造后，多页签缓存有什么不同二、方案选择2.1方案一：多个子应用同时存在2.2方案二：同一时间仅加载一个子应用，同时保存其他应用的状态2.3最终选择三
·2022-08-30 17:59

qiankun 找不到入口问题彻底解决

有一阵子没写文章了，今天来更一期关于qiankun找不到生命周期的问题。
·2022-08-30 16:54

彻底解决 qiankun 找不到入口的问题

有一阵子没写文章了，今天来更一期关于qiankun找不到生命周期的问题。
写代码的海怪·2022-08-30 11:20

基于微前端qiankun的多页签缓存方案实践

本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。
vivo互联网技术·2022-08-02 09:00

基于微前端qiankun的多页签缓存方案实践

作者：vivo互联网前端团队-TangXiao本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，
·2022-08-02 08:53

2022/07/29 入职健海JustFE团队，我学到了高效开发（年中总结）

主要成就：运动库（qiankun子应用，嵌入于其他管理台）运动组件（演示
Xaivor·2022-07-31 11:14

qiankun - 微前端应用搭建

qiankun是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
ZionHH·2022-07-29 19:31

微前端解决方案-qiankun实战及部署

先来张图片压压惊image.png在线demo：wzs.bengdada.com/单独访问在线子应用：subapp/micro-reactsubapp/micro-vue2subapp/micro-vue3一.导读1.什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。微前端架构具备以下几个核心价值：技术栈无关:主框架不限制接入应用的技术栈，微应用
e只咸鱼·2022-07-26 21:16

webpack项目中使用vite加速的兼容模式详解

vite到现在生态也起来了，就有了把项目改造成vite的想法，但是项目后面可能要依赖qiankun改造成微前端项目，现在qiankun对vite还没有好的解决方法，我就想采取一个折中的办法，保留w
·2022-07-26 16:29

JS利用 React.lazy 优化页面初次渲染

目录一、需求背景二、代码分析三、技术实现1.路由懒加载2.Prefetch预获取一、需求背景主站采用qiankun微前端方式嵌入新项目，qiankun会阻塞子应用资源加载，这导致应用白屏时间增加，希望在子应用端进行优化以减少白屏时间
·2022-07-26 09:04

JS递归遍历查询是否有权限示例详解

目录前言需求分析设计思路代码声明查找模板如下js版本ts版本后记前言最近参与了一个基于qiankun构建的微前端大型项目，涉及到十几个子应用，基于基座独立开发了一个完善的权限中心模块。
·2022-07-25 12:05

微前端之 qiankun 入门、上手、实战（构建大型 web 应用）

目录前言正文一、介绍微前端qiankun二、快速上手☛主应用①安装qiankun②在主应用中注册微应用☛微应用①导出相应的生命周期钩子②配置微应用的打包工具三、项目实战☛主应用①安装qiankun②注册微应用并启动
前端不释卷leo·2022-07-22 10:43

除了 Qiankun， 这些微前端框架或许更适合你「建议收藏」

前言大家好，我是易师傅，上篇文章给大家主要讲解到了《微前端的入门》，这篇文章给大家收集归纳了微前端常用的框架，以及他们优缺点；如果你正在做微前端，但是苦于不知使用哪一个微前端框架而苦恼时，我相信这篇文章能够给到你答案。如果您对微前端感兴趣可以关注我的专栏《微前端从入门到进阶》；微前端带来的问题细想一下：通过微前端常见的解决方案，其实我们是可以归纳一些微前端存在的问题，比如样式冲突、消息通信、脚本互
易师傅·2022-07-19 09:00

【源码】微前端qiankun源码阅读(2)：加载子应用与沙箱隔离

前言在上一篇文章了解了qiankun的整体运行。下面继续看：1.qiankun如何根据entry字段去加载子应用的资源。2.qiankun提供的沙箱隔离。
ceido·2022-07-16 16:48

【源码】微前端qiankun源码阅读(1)：Demo与single-spa流程

在自研方案中也有许多的框架，如Single-Spa，Qiankun。而qiankun也是基于single-spa开发的，现使用qiankun进行项目的搭建学习。
ceido·2022-07-16 16:43

【源码】微前端qiankun源码阅读(3)：预加载、缓存和通信

前言【微前端】qiankun源码阅读(1)：Demo与single-spa流程【微前端】qiankun源码阅读(2)：加载子应用与沙箱隔离正文（1）预加载通过前面的两篇可以大概了解qiankun的运行，
ceido·2022-07-16 16:41

qiankun项目中子框架在window中挂载事件本地生效，但是运行在主应用下不生效解决办法

项目中使用了qiankun微前端框架，但是有个问题，子项目本地单独运行的时候，window上挂载的事件，是可以触发的window.test()可以直接触发test事件，但是在主应用下运行的时候却不能够触发
·2022-07-07 19:58

记一次qiankun落地遇到的问题

微前端系列之：一、记一次微前端技术选型二、清晰简单易懂的qiankun主流程分析三、记一次qiankun落地遇到的问题本文是系列之三。项目背景app下架需要把所有页面都迁移到企业微信h5，作为主应用。
·2022-07-03 21:33

清晰简单易懂的qiankun主流程分析

微前端系列之：一、记一次微前端技术选型二、清晰简单易懂的qiankun主流程分析三、记一次落地qiankun本文是系列之二。综述qiankun是在single-spa基础上进行二次开发的。
·2022-07-03 17:28

qianKun + VUE 实现微前端架构 (基于vue2实现)

创建两个项目作为实现demo，一个为主应用，一个为子应用主应用安装qiankun:yarnaddqiankun或者npmiqiankun-S使用qiankun：在utils内创建微应用文件夹microApp
Rising_life·2022-06-21 13:23

微前端qiankun沙箱实现源码解读

接下来我们通过源码详细分析下qiankun沙箱实现，我们clone下qiankun代码，代码主要在sandbox文件夹下，目录结构为├──common.ts├──index.ts//入口文件
·2022-06-16 16:55

ant-design-pro使用qiankun微服务配置动态主题色的问题

使用微服务后,遇到一个问题,主应用和子应用的主题色不一致.希望可以通过主应用的颜色动态变换子应用的主题色ant-design-pro可以通过config.ts配置全局主题色所有最优的方法是可以通过改变主题色,来动态配置.官方最新版本的https://github.com/ant-design/ant-design-pro/releases/tag/v5.2.0已经支持了,通过设置之前的版本不支持直
·2022-06-16 16:54

详解ant-design-pro使用qiankun微服务

优点也很明显如果有多个应用都有相同页面时,就可以使用微服务,可以避免重复写代码在网上搜了下,很多例子都是基于官方文档的例子,官方文档:https://umijs.org/zh-CN/plugins/plugin-qiankun
·2022-06-16 16:53

微前端qiankun改造日渐庞大的项目教程

项目背景很多小伙伴在工作中都碰到过和我一样的场景，手上的某个项目越来越大，眼看着每次build时间越来越长，吐了。在杭州某独角兽我碰到了这样的一个项目，他叫运营后台，听名字就知道，他的主要用户是运营人员。问题就是随着公司业务的越来越多，这个运营后台承担的已经不是某一块业务了，而是所有业务的运营操作的中后台都在这上面。你可以这样理解，这个系统的每个一级菜单都是一块独立的业务，相互之间没有任何瓜葛；按
·2022-06-16 16:51

微前端（qiankun）主应用共享React组件

方案我们知道qiankun,可以通过props通信传递数据，把组件通过props传递过去不就行了。来开始改造我们的代码
快乐的开发者·2022-06-08 16:00

微前端-qiankun

微前端提供通过不同技术栈、能够以单独发布的方式将多个子应用构建成一个主应用的技术方案。所以结构分为主框架，和任意多个子应用。核心价值和技术栈无关，每个子应用可以选择不同的技术栈子应用可以单独开发、部署，部署完后主框架自动完成同步更新。每个子应用可以独立运行使用场景一般适用于较大型的项目，需要将项目拆分成多个子应用并合并，不同的业务模块之间相对独立，可单独开发部署的项目。Dome建三个项目，包括一个
Mr无愧于心·2022-06-01 00:40

基于qiankun的微服务落地实践

前言  近些年,前端发展火热,百家争鸣,各种技术层出不穷,如今的前端已经不再像以前一样就是简单的写页面、调样式、处理DOM等，现在的前端工作内容越来越复杂，技术点也越来越丰富。  当前，基于Vue、React、Angular的单页应用开发模式已经成为业界主流,基本上成为近几年前端项目必备技术,其前端生态也逐渐完善,我们可以利用这些技术与生态快速构建一个新的应用,这也大大缩短了项目的研发周期.  但
·2022-05-26 11:57

微应用：乾坤（qiankun2.0）搭建Vue应用

微页面配置文档官方文档：https://qiankun.umijs.org/参考Demo：https://github.com/wl-ui/wl-mfe注：所有文件的相关代码在文档末尾附件提供，将文件类型有
小酥锅·2022-05-25 17:21

Umi + qiankun 实现动态加载子应用路由

前言  最近在做项目重构的事情，原来的一个Vue项目有几十个菜单，项目大的令人发指，所以准备重构，使用了umi+qiankun的方式，子应用使用了vue和react两个类型的框架。
·2022-05-10 15:46

如何实现快速高效开发？低代码平台jeecgboot完美解决—jeecgboot3.1新特性

jeecgboot3.1版本新增了很多重要的新特性，这些新特性会帮助我们实现更高效的开发；例如集成微前端qiankun、代码生成器增加uniapp移动端代码生成等等，下面就让我们来看看吧。
·2022-04-16 15:03

react hooks/vue2/vue3 + qiankun微服务踩坑记

预览效果一、开始前来点前奏话说iframe是最好的微服务解决方案，不过它有一些无法解决的致命弱点，即使可以解决的问题体验上也不是很好，所以今天这篇文章就来学习一下使用蚂蚁开源的qiankun来解决一些场景的问题
eks·2022-04-12 09:23

微前端应用及基于qiankun的微前端实践

示例代码仓库：yl-qiankun-base:https://gitee.com/dongche/yl-qiankun-base.gityl-qiankun-child-vue:https://gitee.com
东扯葫芦西扯瓜·2022-04-08 19:19

微前端-qiankun配置

基座配置1.添加一个跳转到子应用的router-link的标签，也可以使用qiankun跳转方法去跳转页面2.需要给你的子项目添加挂载的容器，比如我把vue子项目挂载到3.给基座（父级项目）安装qiankun
lar_slw·2022-04-06 16:25

qiankun 子应用keep-alive实现方案

一、核心设计理念简单由于主应用微应用都能做到技术栈无关，qiankun对于用户而言只是一个类似jQuery的库，你需要调用几个qiankun的API即可完成应用的微前端改造。
Sun____·2022-03-21 17:04

微前端

微前端微前端如何解决业务场景的痛点，并以qiankun为例微前端的核心实现原理，并手把手实现简单微前端背景微前端最早于2016年在Micro-Frontends被提出，并建⽴了早期的微前端模型。
·2022-03-20 20:57

手把手教你写一个简易的微前端框架

最近看了几个微前端框架的源码（single-spa、qiankun、micro-app），感觉收获良多。所以打算造一个迷你版的轮子，来加深自己对所学知识的了解。
·2022-02-28 10:55

手把手教你写一个简易的微前端框架

最近看了几个微前端框架的源码（single-spa、qiankun、micro-app），感觉收获良多。所以打算造一个迷你版的轮子，来加深自己对所学知识的了解。
·2022-02-27 16:42

qiankun + Vue实现微前端服务

本文介绍如何使用qiankun+Vue搭建一个前端微服务一、什么是微前端Techniques,strategiesandrecipesforbuildingamodernwebappwithmultipleteamsthatcanshipfeaturesindependently
超人s·2022-02-19 13:03

「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证

10月份换了新的工作，参与完一个月的需求迭代后，接到了项目重构的任务。简单来说，需要在短时间内提出方案设想，同时进行本地验证，最终需要拿出一套技术替换方案来。于是，埋头苦干了一个月，总算干了点成绩出来，今天把当时的思考和实践做个简单总结，就当是个复盘吧。一、老项目现状最初接触到的老项目，使用到的前端技术栈主要是（jQuery1.8+layui-v2.5.4+ExtJS4.2.1.883），当时拿到
yinmochunCoder·2022-02-18 14:00

Vue3.0 + qiankun.js 实现多tab标签页路由切换

Vue3.0+qiankun.js实现多tab标签页路由切换Github地址原理是通过监听主应用的vue-router的router.beforeEach方法来动态加载(loadMicroApp)微应用页面用
·2022-02-17 14:35

乾坤-qiankun 微前端 从0-1开始使用

首先先描述下使用场景公司业务逐渐的多了起来对应业务的后台也就越来越多，有公司的ERP系统，有商家后台系统，有老版APP后台管理系统和新版APP管理系统，解释下这个新老APP后台管理。老版本是混合式开发由后端同学维护，但是遇到复杂的交互场景及大量的前端校验时后端同学写起来很吃力，所以有了新版后台管理系统，逐渐的新需求会在新版来做，原有的后台功能由老版本维护，所以新老后台联动性十分强，运营人员往往需要
前端劝退师_ty·2022-02-14 10:07
上一页 3 4 5 6 7 8 9 10 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他