qiankun

【架构篇】微前端架构设计与qiankun实战

【架构篇】微前端架构设计与qiankun实战阅前必看：本文是《前端开发完全指南》系列的第十七篇，包含15个核心代码示例、8张系统架构图解、2个企业级落地案例。
全息架构师·2025-06-28 02:57

【Vue】微前端架构与Vue（qiankun、Micro-App）

个人主页：Guiat归属专栏：Vue文章目录1.微前端架构概述1.1什么是微前端1.2微前端的核心价值1.3微前端的实现方式2.qiankun框架详解2.1qiankun简介2.2qiankun的核心特性
Guiat·2025-06-27 10:44

基于qiankun搭建ng-alain15微前端项目入门实践

基础环境实践日期：2023-02-22ngversionAngularCLI:15.1.6Node:18.14.2PackageManager:npm9.5.0OS:win32x64设置npm镜像源npmconfigsetregistryhttps://registry.npmmirror.com/安装yarn并设置yarn镜像源，实践版本：[email protected]
TodayCoding·2025-06-11 19:02

vue3+qiankun+vite搭建微前端服务

因业务需要搭建一套微前端服务,阅读文档时发现qiankun与vite无法一起使用,需要引入额外插件才可以一起使用,在这里记录下qiankun基座配置1.修改index.html中div的id,并在main.js
LD喂！·2025-06-07 12:28

qiankun.js配置流程及使用过程中遇到的问题分享

#为什么使用qiankun框架？我们项目使用的初衷是为了解决一个后台项目的重构问题，因为项目太过庞大，vue2升级vue3选择了重构，希望可以两个项目并行操作，这也就是我们使用qiankun的理由吧。
写代码的小王吧·2025-06-07 11:26

解决qiankun项目与子应用样式混乱问题

背景qiankun项目用的是Vue2+Antdesign2，但其中一个子应用用的是Vue3+Antdesign4。集成之后发现子应用的样式混乱，渲染的是Antdesign2的样式。
web小奶精·2025-06-07 11:54

qiankun微前端vue3+ts+vite（配置示例）

//主应用main.ts//注册子应用registerMicroApps([{name:'sub_ANALYTICS_APM_SEARCH',entry:'http://localhost:7101/',//子应用地址container:'#sub-container',//子应用挂载容器activeRule:'/controller/#/location=ANALYTICS_APM_SEARCH
湖边看客·2025-06-07 11:54

基于 qiankun + vite + vue3 构建微前端应用实践

核心内容摘要技术栈组合采用Vite+Vue3+Qiankun构建微前端架构主应用和子应用独立开发部署，通过Qiankun集成2.主应用关键配置通过registerMicroApps注册子应用，配置路由匹配规则
MINO吖·2025-06-07 11:53

qiankun在vue3 vue2 为主应用 ，vue3+vite为子应用 使用

https://gitee.com/qiaoyongli/qiankun.git1.vue2的主应用（1）引入乾坤包npminstallqiankun-S（2）main.js代码如下importVuefrom"vue
！执行·2025-06-05 01:40

使用 Vue3 + Webpack 和 Vue3 + Vite 实现微前端架构（基于 Qiankun）

本文将详细介绍如何使用Vue3+Webpack作为主项目，Vue3+Vite作为子项目，并通过Qiankun实现微前端架构。主项目配置（Vue3+Webpack）主项目是整个微前端架构的核心，它负
指尖上的 Web·2025-06-05 01:40

vue3+ts+vite+qiankun项目配置及部署

#微前端##应用间资源共享##敏捷开发#qiankun部署项目描述主应用:vue3+ts+vite+qiankun微应用:vue3+ts+vite+qiankun路由模式都是History乾坤插件:主应用
法海站如来·2025-06-05 01:40

qiankun微前端——接入子应用Vue3+vite实现

qiankun：乾坤微前端框架什么是微前端Techniques,strategiesandrecipesforbuildingamodernwebappwithmultipleteamsthatcanshipfeaturesindependently
三行代码解决·2025-06-05 01:09

React 微应用接入：qiankun 深度集成实战

以下是用React实现的微前端接入方案，延续前文的工程化架构设计体系：1.React微应用接入核心逻辑//packages/micro-app-react/src/entry.jsimportReactfrom'react';importReactDOMfrom'react-dom/client';importAppfrom'./App';letroot=null;exportasyncfunct
咔咔库奇·2025-05-30 14:19

【微前端】qiankun v2.10.16（流程图）源码解析

整体核心流程源码分析single-spa存在以下主要的缺点路由状态管理不足：无法保持路由状态，页面刷新后路由状态丢失父子应用间的路由交互以来postMessage等方式，开发体验差未提供原生的CSS和JS沙箱隔离，可能导致样式污染或者全局变量冲突默认以来webpack的构建配置，其他构建工具需要改造后才能兼容版本兼容性差，如果使用不同的Vue版本，可能引发冲突仅提供路由核心能力，缺乏多实例并行等微
·2025-05-20 17:05

微前端框架 qiankun

qiankun是什么？qiankun是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
郭宝·2025-05-17 02:32

vue3微前端qiankun子应用作为主应用对接wujie子应用 iframe报错null：子应用加载被主应用中断

vue3微前端qiankun子应用作为主应用对接wujie子应用iframe报错null：子应用加载被主应用中断wujie-vue3版本解决方案：1.wujie降级处理degrade设为true2.attrs
给韭菜姑娘个涨停板吧·2025-05-07 08:10

2025.3.29-2025.8.29前端学习计划

详细学习计划（4月-8月，每周安排）目标：在5个月内掌握Vue3源码、TypeScript高级用法、微前端（qiankun）、Node.js、前端性能优化、地图&WebGL。
jjjjjjjjj¢·2025-04-30 19:12

流行的微前端框架有哪些，适应场景是什么

GitHub地址：Single-SPAStar数量：约6.8k2.qiankun适用场景：基于Single-SPA，提供了更简单的API和开箱即用的功能。
程序员大侠·2025-04-30 17:55

主流微前端框架比较

主流微前端框架比较以下表格列出了当前主流微前端框架的核心对比信息，包括基本介绍、核心特性、适用场景、技术栈兼容性、优缺点、社区维护情况和典型应用案例等：框架基本介绍核心特性与机制适用场景技术栈兼容性优缺点社区维护情况典型应用案例qiankun
youmatech·2025-04-30 17:53

【javascript】-【qiankun搭建微前端项目】

微前端实战什么是微前端微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。一般呢，微前端多应用于企业中的中后台项目中，因为企业内部的中后台项目存活时间都比较长，动辄三五年或者
CaraYQ·2025-04-30 03:22

阿里qiankun微服务搭建

主服务chatvue3tsvite子服务pptreact18vite子服务agent主服务npmivite-plugin-qiankunmian.tsimport'./style/base.scss'import'virtual:svg-icons-register'import{createApp}from'vue'import{createPinia}from'pinia'importAppf
接着奏乐接着舞·2025-04-30 03:22

使用 Qiankun 微前端框架搭建 Vue3 项目实践指南

本文基于qiankun@2.10和Vue3，分享如何从零搭建一个微前端项目。一、微前端核心概念主应用（BaseApp）：负责全局路由、状态管理和子应用调度。
前端_刘阿三·2025-04-12 02:40

vite项目使用qiankun构建hash路由微前端

主应用中注册微应用3、主应用中设置路由和挂载子应用的组件二、创建react@18+react-router-dom@6子应用1、项目安装2、修改子应用vite.config.ts3、修改子应用main.tsx,区分qiankun
幽冥雪羽·2025-04-12 02:10

微前端的不断探索之路—— qiankun 实战与思考！

先从“前端痛点”说起微前端的优势‍♀️qiankun简介与核心概念为什么选择qiankun？
喵手·2025-04-11 13:11

knowledge-微前端(多个前端应用聚合的一个应用架构体系，每个小的应用可独立运行，独立开发，独立部署上线)

2.实现微前端利用现有的微前端框架来进行实现2.1蚂蚁金服-微前端乾坤(qiankun)乾坤继承single-spa:微应用独立部署延迟加载技术无关乾坤提供:HTML入口访问模式样式隔离JS沙箱Um
岂不闻·2025-03-27 04:09

微前端 qiankun vite vue3

文章目录简介主应用qiankun-mainvue3vite子应用qiankun-app-vue2webpack5子应用qiankun-reactwebpack5子应用quankun-vue3vite遇到的问题简介主要介绍以
可缺不可滥·2025-03-20 11:16

Vite+微前端Qinkun的基本部署

一、前言Qiankun是一个基于Single-SPA的微前端框架，由阿里巴巴团队开发并开源。它旨在帮助开发者将大型前端应用拆分为多个独立的子应用，从而实现更高效的开发、维护和部署。
前端程序员_花姐夫Jun·2025-03-12 10:23

Qiankun 微前端框架全面解析：架构、原理与最佳实践

Qiankun微前端框架全面解析：架构、原理与最佳实践随着前端应用的不断发展，单体前端项目在复杂度、维护成本和团队协作上面临越来越多的挑战。
赵大仁·2025-03-05 05:02

✨《微前端落地实战：qiankun从入门到精通！3小时搞定Vue+React多应用架构》

微前端落地实践指南（qiankun框架）微前端核心架构图graphTDA[主应用]-->B[vue子应用]A-->C[react子应用]A-->D[angular子应用]B-->E{通信机制}C-->ED
庸俗今天不摸鱼·2025-02-15 22:48

微前端框架qiankun剖析

一、single-spa简介要了解qiankun的实现机制，那我们不得不从其底层依赖的single-spa说起。
浮游本尊·2025-02-03 00:00

微前端应用(qiankun+umi+antd)

目录1.微前端介绍以应用选型1.1什么是微前端?1.2技术选择2.开始使用2.1配置父应用2.2配置子应用2.3引入子应用2.3.1路由绑定引入子应用2.3.2组件引入子应用2.3.3组件引入子应用2.4子应用之间跳转3.子应用生命周期3.1父应用配置生命周期钩子3.2子应用配置生命周期钩子4.父子应用通信4.1基于useModel()的通信4.1.1主应用透传数据4.1.2子应用消费数据1.微前
他夏了夏天吖·2025-02-01 23:12

微前端架构 qiankun

微前端微前端qiankun：基于single-spa实现的微前端框架，允许多个子应用在一个主应用中独立运行且互不干扰，适用于大型应用或多
qq_36437172·2025-01-22 06:30

系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机

一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
rabbit_it·2024-09-15 17:12

qiankun 结合 vue3， 小白快速上手体验

一、主应用改造首先需要维护一份微应用列表，里面包含了微应用的名称、入口和生效规则，若需要给子应用传递内容，可以在props传入对应的内容//app.jsconstapps=[{name:'micro-vue-app3',entry:'//localhost:3013',container:'#micro-vue-app3',activeRule:'/micro-vue3-app3',props:{
陈y_d·2024-09-14 19:30

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

本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。一、多页签是什么？
JavaMonsterr·2024-09-10 01:25

【面试题】2024前端面试真题_中国电信前端面试(1)

reactmemo效果，react.meno第二个参数是什么pureComponent手写代码实现一个有状态的倒计时浏览器强缓存，cacle-control有哪些字段浏览器缓存原理微信原生小程序性能指标有没有看过qiankun
2401_84437604·2024-08-30 12:05

项目搭建使用qiankun（乾坤），入门篇，以及遇到的坑与解决

微前端架构具备以下几个核心价值：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略独立运行时每个微应用之间状态隔离，运行时状态不共享第一步：一个系统里面分主应用和子应用在
喂！大掌柜·2024-08-30 11:02

qiankun项目填坑：隐藏菜单和header

最近接了一个项目，架构是qiankun，需要在这基础上进行修改；找到对应的项目后，运行该项目就消耗了很多精力；好不容易运行起来了，单纯的运行子项目是能将菜单和header隐藏:layout中设置{headerRender
撒库拉-琳琳·2024-03-20 19:00

【NextJS】nextjs+qiankun遇ReferenceError: window is not defined

实验环境：qiankun:^2.10.16next:14.1.0react:^18.2.0根据官方手册快速上手教程(链接)构建主程序实验代码：qiankun部分：//file:micro-base/plugins
陀螺蚁·2024-02-20 13:29

微前端qiankun从头写一个demo，包含主微应用、微微应用通信用例

文章目录qiankun微前端demo说明1.路由说明：1.1hash路由：1.2history路由：路由切换2.LifeCycles:3.父子通讯3.1主应用与微应用的通信3.2微应用之间的通信4.手动加载微应用
Yoyo_Yan·2024-02-20 02:58

基于 qiankun 的微前端最佳实践（图文并茂） - 应用部署篇

micro-app写在开头微前端系列文章：基于qiankun的微前端最佳实践（万字长文）-从0到1篇基于qiankun的微前端最佳实践（图文并茂）-应用部署篇基于qiankun的微前端最佳实践（图文并茂
明源云链前端团队·2024-02-15 05:44

qiankun 微前端 介绍、安装

文章目录一、介绍什么是微前端微前端架构具备以下几个核心价值：qiankun的核心设计理念它是如何工作的为什么不是iframe特性二、快速上手主应用1.安装qiankun2.在主应用中注册微应用微应用1.
南乔几经秋_·2024-02-06 00:07

nuxt.config.js 配合微前端qiankun打包配置

constCompressionPlugin=require('compression-webpack-plugin')consttimeStamp=newDate().getTime();exportdefault{/***Nuxtrenderingmode**Seehttps://nuxtjs.org/api/configuration-mode*/mode:'spa',ssr:false,/
小贵子的博客·2024-02-03 12:02

第九章（应用场景篇）Qiankun微前端深度解析与实践教程

文章目录Qiankun微前端深度解析与实践教程引言一、微前端概述二、Qiankun简介三、Qiankun核心原理四、Qiankun实践1.创建主应用2.注册子应用3.路由配置4.子应用开发5.应用通信五
球球不吃虾·2024-01-31 08:49

微前端（qiankun）使用手册

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

vue+qiankun微前端项目（搭建,路由跳转，父子之间相互通信）

话不多说，直接上货首先创建两个项目，一个作为项目基座（vue-qiankun-base），一个作为子应用（vue-qiankun-app1）搭建基座及配置安装qiankun依赖到基座npmiqiankun-S
养樂多_566c·2024-01-25 19:57

阿里乾坤qiankun

阿里确实为咱们的IT做了很多有益的事情，贡献很大，真的值得表扬一下，特别是对于我们这些程序员来说，前端大家经常用到的antd等很不错的框架，作用非常大。今天为阿里打打广告，点赞！（应该不算是为阿里打广告，说不定是阿里为我打广告呢，如果阿里要是能为我的的赞扬而点赞，那绝对是为我打广告，哈哈）今天为什么拿出来说，最深刻的几个例子，说一下。第一个，github。这两年，特别担心github被封，因为个人
ygwelcome·2024-01-24 20:18

qiankun用到的沙箱方案小记

1.对rawWindow操作的沙箱方案该方案可在沙箱active期间操作window，但是在deactive阶段必须提供机制确保window还原，期间产生的diff会被记录下来供下一次active使用。关于还原，有两种方案，一种是使用快照，一种是记录update(需要用到proxy)。1.1快照沙箱最简单的一种沙箱。在active时将window打一个windwSnapshot，deactive时
radation·2024-01-22 14:37

微前端小记

步骤将普通的项目改造成qiankun主应用基座，需要进行三步操作：1.创建微应用容器-用于承载微应用，渲染显示微应用；a.设置路由routeb.主应用的布局包括：主应用菜单，用于渲染菜单主应用渲染区域，
零零历险记·2024-01-22 14:03

微前端框架篇一，了解qiankun

微前端框架篇一，了解qiankun①前置知识补充Ⅰ什么是微前端？Ⅱ什么是JSCSS沙箱？Ⅲ什么是spa单页面应用？
Dormiveglia-flx·2024-01-22 07:56
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他