微前端micro-app

微前端（single-spa和qiankun）

一、概念性东西：2018年single-spa诞生了，single-spa是一个用于前端微服务化的js前端解决方案（本身没有处理样式隔离，js执行隔离），实现了路由劫持和应用加载2019年qiankun基于single-spa，提供了更加开箱即用的API（single-spa+sandbox+import-html-entry）做到了与技术栈无关、并且接入简单总结：子应用可以独立构建，运行时动态加
麦子的小库存·2023-10-16 15:23

微前端学习分享1 通过single-spa 实现vue 微服务

single-spa文档https://zh-hans.single-spa.js.org/docs/getting-started-overviewsingle-spa实现技术特点1.项目独立部署2.兼容技术栈不同多语言vuereact3.新旧代码版本并行single-SPA实现原理：路有劫持和应用加载没有处理css样式和js会导致样式重叠和脏数据下一期会出qiankun的教程其实乾坤是基于si
做一条有新鲜度的咸鱼·2023-10-16 15:22

微前端架构 - single-spa

父应用加载子应用bootrapmountunmount框架一：single-spa/single-spa-vue下载npmisingle-spa-vuemain.js中引入importsingleSpaVuefrom'single-spa-vue'缺点：不够灵活不能动态加载JS样式不隔离没有js沙箱机制父应用子应用解决样式隔离问题shadowdom影子元素外界访问不到隔离样式
showMeizi·2023-10-16 15:52

微前端框架single-spa入门

回归初心~1.微前端如何实现多个应用间的资源共享？
Joyce的前端日常·2023-10-16 15:21

【微前端】single-spa 到底是个什么鬼

前言说起微前端框架，很多人第一反应就是single-spa。但是再问深入一点：它是干嘛的，它有什么用，可能就回答不出来了。一方面没多少人研究和使用微前端。
sanly_shi·2023-10-16 15:16

如何利用三大前端框架的动态创建组件方法实现微前端的组件嵌入

什么是动态创建组件在基于三大框架的前端项目中,我们要使用一个组件一般都是将组件作为一个标签写在html模板中。框架在解析模板时会为组件创建实例并挂载组件视图,这时候''创建组件实例和挂载组件视图''这个过程是由框架来完成的,而当这个过程是由我们开发者的业务代码来实现时,那便是动态创建组件。三大框架动态创建组件的方法vue2......importVuefrom'vue';importHelloWo
游民小龙虾·2023-10-15 19:52

如何在qiankun框架中父子传值

组件传值初入微前端—qiankun学习这一篇就够了无论是vue还是react中我们传值都是在父组件中调用子模块中传递一个props给子组件，子组件创建时就可以拿到这个值去渲染或者怎么这样，而子组件如何传递值给父组件呢
陈Joys·2023-10-15 07:19

[qiankun] Failed to fetch has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header

enviroment微前端框架qiankunerror控制台报错single-spa.min.js?
snowDreamzzz·2023-10-15 07:23

微前端设计理念与实践

微前端设计理念与实践本文节选自Web开发导论/微前端与大前端，着眼阐述了微服务与微前端的设计理念以及微服务的潜在可行方案，需要致敬的是，本文的很多考虑借鉴了Phodal关于微前端的系列讨论以及WebArchitectureLinks
Mokin_Zhao·2023-10-14 11:20

微前端的设计理念与实践初探

本文节选自Web开发导论/微前端与大前端，着眼阐述了微服务与微前端的设计理念以及微服务的潜在可行方案，需要致敬的是，本文的很多考虑借鉴了Phodal关于微前端的系列讨论以及WebArchitectureLinks
weixin_34354945·2023-10-14 10:14

下一代架构设计：云原生、容器和微前端的综合应用

文章目录云原生：构建可弹性扩展的应用1.微服务架构2.容器化3.自动化和自动扩展容器化和云原生的结合1.一致性和可移植性2.弹性和可伸缩性3.快速部署和更新4.资源利用率微前端：前端架构的演进1.微前端应用
IT·陈寒·2023-10-13 06:41

百度资深前端工程师，带你手写微前端框架

前言关注核心实现请直接跳至第四小节：执行流程。本文中的命令仅适用于支持shell的系统，如Mac、乌班图及其他linux发行版。不适用于windows，如果想在windows下执行文章中的命令请使用git命令窗口(需安装git)或linux子系统(win10以下不支持)。一、初始化工程1、初始化工程目录cd~&&mkdirmy-single-spa&&cd"$_"2、初始化npm环境#初始化pac
疯狂的程序猿丶·2023-10-12 22:15

实现微前端需要了解的 Vue Genesis 渲染器

我们的需求在Genesis中，核心的就是渲染器，它提供了最基础渲染能力，有了它，你可以实现微前端、微服务、远程组件、首屏渲染，甚至可以和React、EJS等配合使用。它可以和怎样的你协作？
狼族小狈·2023-10-12 15:49

微前端接入Sentry的不完美但已尽力的实践总结

前言这是一篇由浅入深地讲述如何对用qiankun实现的微前端项目接入Sentry的文章。在这篇文章中，我会列举描述两个接入方案，然后再细致地分析方案中涉及到的原理。
徐小夕@趣谈前端·2023-10-12 09:15

当被问到你使用过iframe吗？有哪些优点和缺点？

前言之前做需求遇到过这样的场景，两个不同的平台，其中一个平台需要使用另一个平台的某个页面，在没有用微前端和独立封装组件库的时候。就想到了使用iframe，直接将另一个页面嵌入到需要的页面里面。
heiyay·2023-10-11 22:12

微前端之single-spa

single-spa前言single-spa是啥single-spa实战总结前言其实早就想写一篇关于微前端实践的文章了，几个月之前就看过有关微前端的视频，也查过一些文档，但是好像没有总结，现在又忘记一些了
只管去努力·2023-10-08 19:00

微前端micro-app使用产生的子项目bug(blockly-js 定位失效问题)

1.bug环境angular13框架,blockly谷歌积木插件,micro-app微前端,NG-ZORRO组件库中的drawer组件。
莫道 开发·2023-10-08 13:46

micro-app微前端快速入门

基于官方文档学习：https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/start基座sudoyarncreatemicro-app-base--
henrypt·2023-10-07 09:11

micro-app在vue-element-admin中一些使用研究

1、简述本文承接上一篇micro-app在vue-element-admi中的搭建，对micro-app在vue-element-admin中的一些平时开发中常用的功能做了一些研究。
笑到世界都狼狈·2023-10-06 01:36

基于micro-app+vue-element-admin实现微前端

简述本文是在对之前搭建和学习micro-app的基础上的进一步研究学习。
笑到世界都狼狈·2023-10-06 01:35

手把手教你使用vue2搭建微前端micro-app

简述本文主要讲述新手小白怎么搭建micro-app，几乎是每一步都有截图说明。上手应该很简单。
笑到世界都狼狈·2023-10-06 01:05

vue 实现顶部tab栏菜单（顶部tab按钮）切换（添加删除nav数据，适配微前端应用，滑动动画，右键菜单弹窗）

先看目标效果图1623852408(1).png要做顶部tab栏切换，还需要配合菜单。这里主要讲tab栏的实现方式。首先为了在样式效果上实现方便，这里决定使用element-ui的el-tabs标签来做。这样只需要改下样式，其他效果例如切换动画都能保存。当然，除了el-tabs自带的删除等事件，这里还需要添加右键事件，在右键事件里面有关闭全部和关闭其他两个事件选项示例中主应用和子应用均使用hist
东扯葫芦西扯瓜·2023-10-04 16:41

架构的未来：微前端与微服务的融合

文章目录微服务架构简介微前端架构简介微前端与微服务的融合1.共享服务2.基于事件的通信3.统一的身份和认证4.交付管道的集成示例：使用微服务和微前端的电子商务平台微服务架构微前端架构融合微服务和微前端结论欢迎来到架构设计专栏
IT·陈寒·2023-10-01 23:21

基于 Vue CSR 的微前端实现方案

在这里就不讲微前端的各种优缺点，直接假设你在负责一个中后台管理系统的开发，所有的业务模块全部都在一个项目中打包，随着业务量的不断增长，编译越来越慢，你期望可以从老的项目中将新的业务进行独立开发、独立部署
狼族小狈·2023-10-01 10:34

技术期刊 · 路尘终见泰山平 | 微前端及插件化架构在 Wix 的实践;编辑器架构的第二路径;业务中的前端组件化体系;构建网站的 Spotlight 插件;Theia 技术揭秘之插件拓展;The...

HEADER蒲公英·JELLY技术期刊Vol.47不想当架构师的程序员不是“合格”的程序员？这一类的言论在很多文章中应该很常见吧，我们需要架构思维，要有抽象能力，要学会分层……需要的太多太多，可很少有合适的项目能够帮助我们养成这些思考的习惯，比如业务组件体系的设计，又比如编辑器等等，需要权衡技术与业务之间的平衡，架构设计稳定性与拓展能力，面对业务保持思考，泰山如砥平。观海志登山则情满于山，观海则意
凹凸实验室·2023-09-29 02:25

微前端选择qiankun还是iframe？

前言微前端是什么？微前端是一种架构模式，将整个应用拆分成多个独立的模块，这些模块可以独立开发、部署。
·2023-09-27 15:19

浅析微前端沙箱

前言在大型项目中，微前端是一种常见的优化手段，本文就微前端中沙箱的机制及原理，作一下讲解。
·2023-09-27 15:19

微前端是什么、价值、不足、典型模式

微前端技术调研微前端（Micro-Frontends）是什么为了解决庞大的后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices），越来越重的前端工程也面临同样的问题，自然地想到了将微服务思想应用
Keme菜鸟·2023-09-27 08:46

qiankun--微前端可用小demo（主应用vue+子应用vue+子应用react）

qiankun–微前端可用小demo（主应用vue+子应用vue+子应用react）说明：在主应用的about页面加载子应用成果：加载子应用1，点击第一个按钮子应用2，点击第二个按钮注意：如果已经渲染一个子应用
Keme菜鸟·2023-09-27 08:46

微前端qiankun从搭建到部署的实践总结

点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群最近负责的新项目用到了qiankun，写篇文章分享下实战中遇到的一些问题和思考。示例代码：https://github.com/fengxianqi/qiankun-example。在线demo：http://qiankun.fengxianqi.com/单独访问在线子应用：subapp/sub-vuesubapp/sub-react
傲娇的koala·2023-09-26 23:20

[微前端实战]---01导学

文章目录目录讲解一.课程目标二.与架构老师学习三.课程目标四课程设计五技术点目录讲解一.课程目标高质量:代码对标一线互联网大厂从0开始开发自己的微前端框架全流程:子应用->主应用->服务端->发布平台源码解析
小李科技·2023-09-26 23:19

qiankun 传统项目配置_记一次 微前端 qiankun 项目 实践 !!! 防踩坑指南

导语最近在做微前端的项目,过程中真是踩了不少坑,在有限的资料中不断试错,默默无语两行泪哈哈.在此次将采坑部分都记录下来,让更多的人少走点弯路,此项目使用蚂蚁金服qiankun为基础作为开发.话不多说开讲
weixin_39600823·2023-09-26 23:19

基于 qiankun 的微前端最佳实践

引言大家好~本文是基于qiankun的微前端最佳实践系列文章之从0到1篇，本文将分享如何使用qiankun如何搭建主应用基座，然后接入不同技术栈的微应用，完成微前端架构的从0到1。
奇舞周刊·2023-09-26 23:18

vue微前端qiankun框架学习到项目实战

微前端架构一、什么是微前端架构微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。
吴用_前端开发·2023-09-26 23:48

Vue中使用__webpack_public_path__动态设置publicPath

场景在使用qiankun做微前端开发，子应用需要满足独立部署，又要能作为子应用被qiankun动态加载。
果酱风·2023-09-25 00:37

微前端架构初学者指南

写在开头：我们使用单个网页的日子已经一去不复返了。现代Web开发提供丰富的用户体验，涵盖用户流和交互的策略。构建、维护、部署和交付这些体验需要大规模的开发团队和复杂的部署系统。Web应用程序的现状现代Web应用程序最常用的模式是单页应用程序(SPA)。SPA的核心原则是构建交付给用户的单个Web应用程序。SPA通过根据用户交互或数据更改重写页面内容来工作。SPA通常包含一个路由器来处理页面导航和深
Peter 谭·2023-09-24 16:08

初探微前端

微前端一、微前端的背景和概述1.1概念1.2特点1.3背景二、微前端的实现方式2.1服务端集成2.2运行时集成三、现有的解决方案3.1single-spa3.2qiankun3.3micro-app四、
JAVA开发区·2023-09-23 20:37

vue.config.js 实用配置（生成zip文件，生产环境删除console.log，gzp配置，qiankun微前端配置等

使用vue-cli开发项目，免不了需要做些配置。特别是项目比较复杂时。这里列出一些有用的配置。当然，每个项目需求不同，或许对你来说，这并不实用。这里所用的都是基于vue-cli3的配置哦。vue是2.x的。还在用vue-cli2的童鞋，该换新了，比较vue3都出来了，当然了，老项目可能没办法（我说的是没办法去升级成vue-cli3，可能因为时间成本,想要这些配置，也是可以的，只是写法和这里有区别罢
东扯葫芦西扯瓜·2023-09-23 19:54

微前端架构的几种技术选型

微前端架构的几种技术选型随着SPA大规模的应用，紧接着就带来一个新问题：一个规模化应用需要拆分。一方面功能快速增加导致打包时间成比例上升，而紧急发布时要求是越短越好，这是矛盾的。
软件工匠·2023-09-22 20:54

微前端架构的几种技术选型

微前端架构的几种技术选型随着SPA大规模的应用，紧接着就带来一个新问题：一个规模化应用需要拆分。一方面功能快速增加导致打包时间成比例上升，而紧急发布时要求是越短越好，这是矛盾的。
·2023-09-22 11:20

浅入深出的微前端MicroApp | 京东云技术团队

pro-table，PC统一使用react，但是我们有一些老的项目是vue的，本次新页面较多，老页面的改动较少，除此之外老项目想换菜单，因此我们想借助本次机会用react开发，经过了几番思考，发现本次很适合用微前端来完成本次需求
·2023-09-21 12:43

微前端(qiankun)接入项目、主应用与子应用之间通信

所以我们使用“微前端”。什么是微前端？微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。
面向百度丶CV开发·2023-09-20 07:39

微前端框架qiankun学习 —— 搭建框架

什么是微前端？微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。
不懂爬虫的java不是好前端·2023-09-20 07:39

微前端qiankun应用间的通信

通信原理：qiankun框架提供了一个全局对象initGlobalState，可以用来存储全局共享的数据。各个子应用可以通过initGlobalState读取和修改数据，initGlobalState会返回三个方法，分别是：setGlobalState：设置globalState-设置新的值时，内部将执行浅检查，如果检查到globalState发生改变则触发通知，通知到所有的观察者函数。onGlo
不羁的程序员~·2023-09-20 07:08

微前端qiankun框架子应用主和应用之间通信方法

子应用主应用间如何通信qiankun官方提供了actions通信，qiankun内部使用initGlobalState(state)定义全局状态，该方法执行后返回一个MicroAppStateActions实例，实例中包含三个方法，分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。MicroAppStateActionsonGlo
veggie_a_h·2023-09-20 07:08

vue3+vite+qiankun搭建微应用前端框架

说明：之前搭建微前端框架的是vue2.版本，vue3以上版本并不适用，需要重新搭建。Qiankun官网目前还不支持vue3使用例子，官方API方法行不通。
微笑么么哒·2023-09-20 07:38

微前端 - qiankun 应用间通信

一、如何划分子应用在微前端架构中，我们应该按业务划分出对应的子应用，而不是通过功能模块划分子应用。
倔强的小绵羊·2023-09-20 07:07

qiankun微前端应用间通信实现

转自基于qiankun的微前端最佳实践（图文并茂）-应用间通信篇-掘金本系列其他文章计划一到两个月内完成，点个关注不迷路。
麦兜_冰夕·2023-09-20 07:07

【前端打怪升级日志之微前端框架篇】微前端qiankun框架子应用间跳转方法

参考链接qiankun官网：微应用之间如何跳转？1.主应用、子应用路由都是hash模式主应用根据hash来判断微应用，无需考虑该问题2.主应用根据path判断子应用方法实现适用条件参数传递存在问题a标签跳转页面重新刷新，原来的状态丢失，用户体验不好h5提供的history.pushState()方法history.pushState(state,title[,url])详见：history.pus
一只小傲娇·2023-09-20 07:36

微前端框架single-spa子应用加载解析

作者：京东物流宁冲1前言什么是微前端？微前端是指存在于浏览器中的微服务。
·2023-09-19 16:07
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他