说说微前端的概念微前端是指存在于浏览器中的微服务。微前端作为用户界面的一部分，通常由多个组件组成，并使用React，Vue和Angular等框架来渲染组件。每个微前端可以由不同的团队进行管理，并可以自主选择框架。虽然在迁移或测试时可以添加额外的框架，出于实用性考虑，建议只使用一种框架。每个微前端都拥有独立的git仓库，package.json和构建工具配置。因此，每个微前端都拥有独立的逐步推进和独
转载
2023-07-06 22:59:42
146阅读
3分钟了解微前端一、概念二、特点三、实现方式 一、概念说到微前端之前先提一下微服务。微服务是为了解决庞大的后端服务带来的变更与拓展方面的限制，而将一个大型的服务应用分割成若干个颗粒度较小的可独立开发、测试及部署的单个子应用。而越来越复杂的前端项目也面临同样的问题。于是有了微前端的诞生。微前端与微服务类似，都是将一个复杂大型的应用程序拆解成颗粒度更小的可以独立开发、测试及部署的小模块，并通过一些策
转载
2023-07-28 08:59:39
739阅读
1、什么是微前端？什么是微服务？先看看维基百科的定义： 微服务是一种软件架构风格，它是以专注于单一责任与功能的小型功能区块 为基础，利用模块化的方式组合出复杂的大型应用程序，各功能区块使用与语言无关的API集相互通信。微前端的提出一种由独立交付的多个前端应用组成整体的架构风格。具体的，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。2、微前端的特
转载
2023-11-17 11:54:22
116阅读
single-spa 概述single-spa 是一个实现微前端架构的框架。在 single-spa 框架中有三种类型的微前端应用：single-spa application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。
single-spa Application 和路由相关联的，根据路由决定访问哪个微应用。single-spa Parc
转载
2022-01-25 07:49:19
2141阅读
路由分发式微前端从应用分发路由到路由分发应用用这句话来解释,微前端的路由,再合适不过来.路由分发式微前端，即通过路由将不同的业务分发到不同的、独立前端应用上。其通常可以通过 HTTP 服务器的反向代理来实现，又或者是应用框架自带的路由来解决。 就当前而言，通过路由分发式的微前端架构应该是采用最多、最易采用的 “微前端” 方案。但是这种方式看上去更像是多个前端应用的聚合，即我们只是将这些不同的前端应
转载
2024-01-15 17:03:58
111阅读
一、概念之前的一篇文章基于qiankun从零搭建了一套微前端项目，主应用是vue，微应用包括vue、react。内部页面比较单一需要根据实际业务添砖加瓦，每个微应用应该是严格按照业务进行拆分的，但是在实际项目开发过程中，主应用、微应用之间能相互通信是基本的需求。目前有关微前端通信的方案无非两种：使用qiankun提供的api-initGlobalState进行通信；通过在主、微应用中定义状态管理类
转载
2023-07-27 23:32:24
167阅读
前言近来，微前端的概念非常火爆，那么什么是微前端架构？微前端架构是一种架构风格类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。微前端所具备的便于引入新框架，代码简洁、易维护等特点使其应用愈发广泛。爱奇艺号前端工程基于Vue的框架已经使用了3年之余，这一版本虽有
转载
2024-07-12 09:24:07
485阅读
## 前端微服务架构实现流程
### 1. 确定需求和业务逻辑
在实现前端微服务架构之前，我们需要先明确需求和业务逻辑。这包括确定系统的功能和模块，以及不同模块之间的关系和依赖。
### 2. 设计系统架构
在设计系统架构时，我们需要确定前端微服务的拆分和组织方式。可以根据功能模块的复杂性和耦合程度，将系统拆分为多个微服务，每个微服务负责一个具体的功能模块。
### 3. 创建前端微服务
原创
2023-09-29 03:21:33
53阅读
一、分享MarkDown小技巧最初只需要记住 #标题一、## 标题二、1. 第一点、* 这一点，用这几个写写日志、需求文档、小文章，排版上足够了；逐渐你会发现有些文字需要重点指出，那么还可以使用** 加粗 ** 、* 斜体 *来对文字做重点说明；如果你是一名程序员，那么可以使用```把代码块包起来，渲染后可以关键字高亮，用>可以做引用；二、什么是微服务架构2.1 微服务架构概述简单地说，微服
转载
2023-07-06 22:59:59
61阅读
前端使用了react，组件库使用的是公司自己的组件库，页面构建使用了react-jsonschema-form，优点是通过定义schema的json文件就可以将表的各个属性渲染到页面上。
上一节我们简单介绍了项目框架，从这一节开始我们详细阐述前后端以及中间件的搭建、开发和部署。首先介绍一下前端，前端使用了react，组件库使用的是公司自己的组件库，页面构
转载
2023-09-07 23:09:39
144阅读
最近你有没有经常听到一个词，微前端？是不是听上去感觉非常地高大上！然而~微前端其实非常地简单，非常地容易落地，而且也非常不高大上~那么就来一起看看什么是微前端吧：一.为什么需要微前端?这里我们通过3W(what,why,how)的方式来讲解什么是微前端：1.What?什么是微前端?微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完后再合!2
转载
2024-06-15 10:14:56
81阅读
背景微服务的概念已经过去了好久，微前端也已经实践了一段时间，在去年不同的分享会上都有听到各家公司关于微前端的实践，总体来说，微前端是因为前端架构的不断演进，结合后端微服务的理念而创造出来的，用于解决不同前端框架，甚至相同框架的不同版本，如何结合的问题。
微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个
转载
2024-02-22 18:44:53
56阅读
微前端技术调研微前端（Micro-Frontends）是什么为了解决庞大的后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices），越来越重的前端工程也面临同样的问题，自然地想到了将微服务思想应用（照搬）到前端，于是有了「微前端（micro-frontends）」的概念。微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变
转载
2023-12-27 17:17:41
161阅读
前端微服务架构-微前端
React, Angular, Vue
转载
2020-10-16 22:49:00
382阅读
2评论
很久以前的前端，没有太多工具化工程化思想，一堆代码塞进去完事儿。如今前端已经很卷，卷到了一个开发环境都够你折腾一宿。那么我们抛开类似nextjs、create-react-app这类的工具或框架，我们该如何从零部署一个属于自己的开发环境呢？这篇文章将讲述如何配置一个基础的脚手架，支持React、TypeScrit和单元测试等必要的功能。在这个基础上，大家能够很方
转载
2024-06-13 21:36:45
59阅读
1. 前言随着开发的进展，我们用到的接口会越来越多，我们需要将各个接口统一起来，方便管理。于是我们需要将接口模块化。2. 前端修改在src目录下，新建api文件夹，新建http.js，新建api.js。2.1 编写http.js这个js文件，我们封装请求方法，拦截方法。这样就可以把main.js文件中的请求拦截器和响应拦截器删掉了。import axios from 'axios'
//请求拦截
转载
2024-01-04 05:35:57
63阅读
将上一节创建的简单的react项目demo_fe进行部署，并说明为什么要使用ingress。
本节我们将上一节创建的简单的react项目demo_fe进行部署，部署的步骤如下：1. 将demo_fe项目进行编译，在node.js中进入demo_fe项目路径下，使用npm run build命令打包，最后会在demo_fe路径下生成build文件夹(注意可
转载
2023-08-08 18:00:34
84阅读
作者：掘金干货君众所周知，社区活跃最多的，就是非常爱好ctrl+c的伸手党。 为了方便各位伸手党的大佬们直接拿走，特意做了两个代码仓库，一个主应用，一个子应用，甚至完整在自己的服务器上部署了主子应用的代码，有code，有demo，这诚意是不是可以拿走之前点个赞？线上demo地址：在线预览微前端，可以自由加载子应用的主应用workspace[1] 主应用代码仓库地址: 主应用地址，npm run
转载
2024-05-20 06:57:32
91阅读
一.简介为了解决庞大的一整块后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices）：微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理然而，越来
转载
2023-07-15 07:02:41
90阅读
目录一、微前端是什么？二、微前端的实现2.1 iframe2.2 Web Components2.3 ESM 即 ES Module2.4 qiankun2.5 EMP2.6 总结 三、微前端和npm的区别3.1 非常重要的痛点，使用npm包的更新流程繁琐复杂。3.2 npm包方式构建速度慢3.3 npm方式 应用迭代麻烦一、微
转载
2024-01-08 13:21:44
41阅读
