前言近来，微前端的概念非常火爆，那么什么是微前端架构？微前端架构是一种架构风格类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 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阅读
目前的前端领域，单页面应用（SPA）大行其道。而随着时间的推移以及应用功能的丰富，这些应用变得越来越庞大也越来越难以维护。于是“微前端”这一概念应运而生。“微前端”出自2016 年的 ThoughtWorks 技术雷达，指将项目拆分成一个个可独立运行、独立开发、独立部署的前端微应用，这些微应用可以并行开发、共享组件。而微前端的实现方式也分很多种：服务器路由重定向、组
转载
2024-08-08 15:11:16
163阅读
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阅读
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阅读
微前端技术调研微前端（Micro-Frontends）是什么为了解决庞大的后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices），越来越重的前端工程也面临同样的问题，自然地想到了将微服务思想应用（照搬）到前端，于是有了「微前端（micro-frontends）」的概念。微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变
转载
2023-12-27 17:17:41
161阅读
前言说起微前端框架，很多人第一反应就是 single-spa。但是再问深入一点：它是干嘛的，它有什么用，可能就回答不出来了。一方面没多少人研究和使用微前端。可能还没来得及用微前端扩展项目，公司就已经倒闭了。另一方面是中文博客对微前端的研究少之又少，很多文章只是简单翻译一下官方文档，读几个API，放个官方的 Demo 就完事了。很少有深入研究到底 single-spa 是怎么一回事的。还有一方面是
记录前端微服务-qiankun从0到1搭建（主要核心点）需要注意的地方前言：由于我们公司的项目基本都是后台管理系统类的，所以要求微应用入口必须是主应用的一个路由菜单、而且需要处理菜单权限、信息共享等问题、但是qiankun官方文档中案例记录中使用的都是registerMicroApps方法来进行引入子应用的配置、导致项目刚开始的时候踩了很多坑。所以在此记录一下一些需要注意的点。文章末尾有自己搭建的
转载
2024-05-06 10:15:17
243阅读
最近你有没有经常听到一个词，微前端？是不是听上去感觉非常地高大上！然而~微前端其实非常地简单，非常地容易落地，而且也非常不高大上~那么就来一起看看什么是微前端吧：一.为什么需要微前端?这里我们通过3W(what,why,how)的方式来讲解什么是微前端：1.What?什么是微前端?微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完后再合!2
转载
2024-06-15 10:14:56
81阅读
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阅读
文章目录Proxy代理作用:常见情况：使用方式：代理具体配置示例：配置参数说明：配置思路：代理原理：总结： Proxy代理作用:前端服务器代理的作用是，告诉服务器将任何未知请求(没有匹配到静态文件的请求)，代理到一个另一个地址，从而解决跨域的问题常见情况：前端在向后端进行资源请求的时候，后端若未使用Cros中间件，则会出现跨域请求的问题，解决问题的办法之一就是我们前端使用Proxy进行服务器代理
vue前端工程的搭建
一、用vue-cli搭建前端工程1、什么是vue-clivue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;2、搭建环境准备安装node.js 官方网址： http://nodejs.cn/download/
node -v，npm -v 用于检测是否安装成功安装淘宝镜像加速器：npm install cnpm -g安装vue-clicnp
转载
2024-10-08 20:37:23
96阅读
项目github库4.0 发布继承并扩展 3.0 的基本理念去除 redux-saga，改用原生的 async 和 await 来组织和管理 effect同时支持 SPA(单页应用)和 SSR(服务器渲染)、完整的支持客户端与服务端同构react-coat 特点集成 react、redux、react-router、history 等相关框架仅为以上框架的糖衣外套，不改变其基本概念，无强侵入与破坏
基于Vue实现微前端前言痛点方案iframe嵌入原生html嵌入模块化嵌入 前端微服务化一直是前端社区的一个热门话题，早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓，个人认为基于Web Components的实现脱离整体打包逻辑的，难以工程化。直到遇到了vue-cli 3，子模块打包的问题得以迎刃而解。2019年秋，团队内部初步实现前端分布式开发，解决了集中式开发部署的“老
转载
2023-09-29 19:39:57
181阅读
