目前的前端领域，单页面应用（SPA）大行其道。而随着时间的推移以及应用功能的丰富，这些应用变得越来越庞大也越来越难以维护。于是“微前端”这一概念应运而生。“微前端”出自2016 年的 ThoughtWorks 技术雷达，指将项目拆分成一个个可独立运行、独立开发、独立部署的前端微应用，这些微应用可以并行开发、共享组件。而微前端的实现方式也分很多种：服务器路由重定向、组
转载
2024-08-08 15:11:16
163阅读
什么是服务端渲染（SSR）？Vue.js 是构建客户端应用程序的框架，但是也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记“激活”为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以叫做“同构”或“通用”，程序上的大部分代码都可以在服务器和客户端上运行。是否需要服务器渲染？与传统 SPA 相比，SSR 的主要优势在于：更好的 S
前言近来，微前端的概念非常火爆，那么什么是微前端架构？微前端架构是一种架构风格类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。微前端所具备的便于引入新框架，代码简洁、易维护等特点使其应用愈发广泛。爱奇艺号前端工程基于Vue的框架已经使用了3年之余，这一版本虽有
转载
2024-07-12 09:24:07
485阅读
前言本篇手写简易single-spa流程首先初始化项目npm init -y
npm install rollup rollup-plugin-serve编写rollup.config.jsimport serve from "rollup-plugin-serve";
export default {
input: "./src/single-spa.js",
output: {
fil
转载
2024-02-29 11:13:29
36阅读
single-spa：https://zh-hans.single-spa.js.org/ 是一个实现微前端架构的框架。在 single-spa 框架中有三种类型的微前端应用：single-spa-application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。single-spa root config：创建微前端容器应用。utility m
作者：Fly_bit一、 前端微服务化的背景和价值：背景：业务模块呈现快速增长趋势，孵化的业务模块也逐渐增多。 价值：让产品的前端架构能快速、插件化的支持业务的增加二、设计目标解耦产品前端各业务模块，支持独立开发、发布和部署； 设计出提供支持插件化调整业务模块、可多团队共同维护的前端架构；三、系统分析1.微前端架构简介什么是前端微服务？将微服务的理念应用于浏览器端
转载
2023-12-28 12:29:47
390阅读
3分钟了解微前端一、概念二、特点三、实现方式 一、概念说到微前端之前先提一下微服务。微服务是为了解决庞大的后端服务带来的变更与拓展方面的限制，而将一个大型的服务应用分割成若干个颗粒度较小的可独立开发、测试及部署的单个子应用。而越来越复杂的前端项目也面临同样的问题。于是有了微前端的诞生。微前端与微服务类似，都是将一个复杂大型的应用程序拆解成颗粒度更小的可以独立开发、测试及部署的小模块，并通过一些策
转载
2023-07-28 08:59:39
739阅读
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阅读
本文目录1. 背景2. 微服务架构的优缺点3. 实现技术4. 开发环境5. 小结 1. 背景之前已经讲过SSM完整的教程，我个人觉得是相当不错的，附上地址：Spring+SpringMVC+MyBatis 系列教程50篇。SSM之后，又精心编写了SpringBoot教程，附上地址：Spring Boot系列教程25篇。然后呢，是时候开启SpringCloud+Vue微服务的教程与实战
转载
2024-05-06 11:58:00
91阅读
路由管理是一个核心部分，它负责处理多个子应用（也称为微前端）之间的页面跳转和导航。在微前端架构中，由于存在多个独立的子应用，因此需要一个全局的路由管理器来协调这些子应用的路由。路由管理通常涉及以下几个方面：全局路由表：维护一个全局的路由表，记录每个子应用的路由信息，包括路径、子应用名称、加载方式等。路由监听：监听浏览器地址栏的变化，根据地址栏中的路径信息，找到对应的子应用并进行加载。子应用路由隔离
转载
2024-10-06 08:31:47
52阅读
快速的实现一个基于 Vue.js 的简单易用的微前端架构 Situation19年之前团队内部前端编写模式是：原始项目 A 使用 Vue-CLI2 创建，现在需求方提交新模块 B 的需求给到产品。当产品交付原型图后，复制项目 A 改配置成新项目 B。项目 B 基于项目 A 的代码修修改改，待开发完之后打包到后端的 Java SpringBOOT 项目内部，
转载
2024-05-11 20:15:01
67阅读
v-for中经常使用key作为标识，这其中涉及了虚拟DOM与真实DOM、虚拟DOM的对比算法等。 key的取值有时也不可以简单的定为index。真实DOM与虚拟DOM虚拟DOM为react与vue两个框架都带来了跨平台的能力。 虚拟DOM实际是一层对真实DOM的抽象。以JS对象（vnode节点）作为基础的树，用对象的属性描述节点，最终通过一系列操作使这棵树映射到真实环境上，也就是真实DOM。 创建
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阅读
作者：掘金干货君众所周知，社区活跃最多的，就是非常爱好ctrl+c的伸手党。 为了方便各位伸手党的大佬们直接拿走，特意做了两个代码仓库，一个主应用，一个子应用，甚至完整在自己的服务器上部署了主子应用的代码，有code，有demo，这诚意是不是可以拿走之前点个赞？线上demo地址：在线预览微前端，可以自由加载子应用的主应用workspace[1] 主应用代码仓库地址: 主应用地址，npm run
转载
2024-05-20 06:57:32
91阅读
记录前端微服务-qiankun从0到1搭建（主要核心点）需要注意的地方前言：由于我们公司的项目基本都是后台管理系统类的，所以要求微应用入口必须是主应用的一个路由菜单、而且需要处理菜单权限、信息共享等问题、但是qiankun官方文档中案例记录中使用的都是registerMicroApps方法来进行引入子应用的配置、导致项目刚开始的时候踩了很多坑。所以在此记录一下一些需要注意的点。文章末尾有自己搭建的
转载
2024-05-06 10:15:17
243阅读
微前端技术调研微前端（Micro-Frontends）是什么为了解决庞大的后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices），越来越重的前端工程也面临同样的问题，自然地想到了将微服务思想应用（照搬）到前端，于是有了「微前端（micro-frontends）」的概念。微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变
转载
2023-12-27 17:17:41
161阅读
最近你有没有经常听到一个词，微前端？是不是听上去感觉非常地高大上！然而~微前端其实非常地简单，非常地容易落地，而且也非常不高大上~那么就来一起看看什么是微前端吧：一.为什么需要微前端?这里我们通过3W(what,why,how)的方式来讲解什么是微前端：1.What?什么是微前端?微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完后再合!2
转载
2024-06-15 10:14:56
81阅读
前言说起微前端框架，很多人第一反应就是 single-spa。但是再问深入一点：它是干嘛的，它有什么用，可能就回答不出来了。一方面没多少人研究和使用微前端。可能还没来得及用微前端扩展项目，公司就已经倒闭了。另一方面是中文博客对微前端的研究少之又少，很多文章只是简单翻译一下官方文档，读几个API，放个官方的 Demo 就完事了。很少有深入研究到底 single-spa 是怎么一回事的。还有一方面是
1商城架构缩略图 无论是前台还是后台系统，都共享相同的微服务集群，包括：商品微服务：商品及商品分类、品牌、库存等的服务搜索微服务：实现搜索功能订单微服务：实现订单相关购物车微服务：实现购物车相关功能用户中心：用户的登录注册等功能Eureka注册中心Zuul网关服务Spring Cloud Config配置中心…3.7.1.微服务的结构因为与商品的品类相关，我们的工程命名为ly-item. 我们会在
转载
2024-05-09 14:20:26
105阅读
目录前言主应用微应用部署 前言因为业务系统接入的需要，决定将一个vue3+vite+ts的主应用系统，改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。网上有很多关于微应用改造的案例，但很多都没写部署之后什么情况。写了部署的，没有实操部署在二级目录、三级目录是什么情况，甚至没有对部署之后的情况做测试、没有说明。这是在整个改造过程中最难的一点，也是最困扰我的
转载
2024-07-18 20:18:01
36阅读
