Vue-genesis（一）介绍官网地址: https://fmfe.github.io/genesis-docs/genesis是一个轻量级的Vue SSR插件,不与任何框架进行绑定,但目前来说是基于vue框架,也不与任何一个node服务器进行绑定,但一般来说,node服务器优先选择express。概括性的说,它起到一个服务端聚合,客户端一键拆分打包的功效。什么是服务端聚合,即将所有子工程聚合到
作者 | Jonathan Saring 微前端将前端整体分解为许多更小、更易管理的片段。每个团队可以端到端地拥有自己的功能，可以在自己的代码库中工作，可以独立发布版本，可以不断进行小的增量升级，还可以通过 API 与其他团队集成，以便他们可以一起组建和管理页面和应用程序。本文中，作者收集了 11 个最杰出的微前端构建工具，并提供了进一步学习的链接和视频。 将单体后端分解成为微服务之后，后端开
最近看了几个微前端框架的源码（single-spa、qiankun、micro-app），感觉收获良多。所以打算造一个迷你版的轮子，来加深自己对所学知识的了解。这个轮子将分为五个版本，逐步的实现一个最小可用的微前端框架：支持不同框架的子应用（v1 分支）支持子应用 HTML 入口（v2 分支）支持沙箱功能，子应用 window 作用域隔离、元素隔离（v3 分支）支持子应用样式隔离（v4 分支）支持
背景：公司研发的项目主要是 GIS地图为基础的管理系统，由主体项目（管理业务模块）+ GIS地图应用，由于 GIS地图应用模块 会在多个地方使用，所以单独构建一个项目，分别在不同的业务场景中引用、交互，也在app中通过webview通信使用，之前一直使用iframe的通信方式，iframe基本也可以满足业务需求，应用分割、独立运行、分别部署，iframe方案已经满足并且不断优化已经满足需求，但是作
转载
2024-05-13 22:07:15
671阅读
微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。为什么还要造微前端框架目前较成熟的微前方案有 qiankun、micro-app、EMP 方案，下面分别分析这
本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是 微前端。微前端 是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 N
{
# 1、全局块
# 开启线程数，最大值可设逻辑CPU核数
work_processes 4;
# 定位全局错误日志文件，级别以notice显示，还有debug,info,warn,error,crit模式，debug输出最多，crir输出最少，根据实际环境而定
error_log logs/error.log;
error_log logs/error
文章目录前言：为什么选择qiankun一、乾坤实现原理二、使用步骤1.主程序2.微应用(1). 配置webpack打包输出(2). 抛出生命周期(3). 引入publicPath配置api1 主应用api2 微应用api3 数据交互4 异常捕获 前言：为什么选择qiankun为什么要使用乾坤？与传统的iframe相比优势如何与传统的html条状相比优势如何如何体现乾坤的优势提示：以下是本篇文章正
转载
2024-06-19 10:48:11
440阅读
1. 官方学习文档乾坤是在 single-spa 的基础上进行的封装 上手简单 官网：介绍 - qiankun代码实战：快速上手 - qiankun2. 项目实战基座项目（主应用）：Vue微应用（子应用）：2个 -- Vue 、原生 html 页面由于 qiankun 是通过 fetch 去获取微应用的引入的静态资源的，所以必须要求这些静态资源支持跨域主应用：import Vue from 'vu
转载
2024-05-23 20:56:11
290阅读
Vue.js是一个前端框架，用于构建用户界面的渐进式框架。在Vue中一个核心的概念是，让用户不再操作DOM元素解放了用户的双手，让程序员可以更多的时间去关注业务逻辑，Vue框架能够提高开发的效率。Vue的MVVM设计模式是什么？如果了解前端一定知道MVVM和MVC这两种设计模式，且很有可能对mvp也有一些了解。MVC即model，view，control，jQuery就是采用的这种设计模式。MVV
1. 乾坤简介 qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统 2.使用背景： vue2.0 , vue-cli 5.0主应用：安装乾坤$ yarn add qiankun # 或者 npm i qiankun -Smain.js设置注册子应用import { registerMicroApps, start } fro
转载
2024-07-23 11:40:04
319阅读
1、微前端概论
1.微前端概念
类型<iframe></iframe>一样，只不过微前端是用fetch去请求js并渲染在指定的DOM容器。· 跟技术栈无关，任何前端技术栈都可以接入。· 多个应用结合在一起，可以一起运行，又可以单独运行。· 一个复杂庞大的项目拆成多个微应用，单独开发、单独部署、单独测试，互不影响。· 原理是通
转载
2024-03-08 21:06:34
338阅读
目录 一、微前端概述 1. 基本原理 2. 微前端的主要优势 3. 当前微前端方案的一些缺点
转载
2024-05-20 21:26:51
551阅读
前言今天刚刚学习了一个微前端框架——乾坤，正着热乎劲，写一篇入门博客。这篇文章不会讨论太多的原理和实现，只是一个入门写 Hello World 的教程。文章的很多地方都参考官网，但是官网的教程太简洁了，个人觉得还是做不到无脑上手，希望这篇文章可以帮到正在入门微前端的伙伴。想直接看代码的，我写了个比官网更简单的例子，点击即可学会。什么是微前端首先，来了解一下微前端是个啥。当我们写了一个又一个的 SP
转载
2024-04-02 15:07:19
105阅读
环境搭建1、安装node.js:可以从官网下载各种系统下的安装包，地址：http://nodejs.cn/download/1）如果你是window系统，那简单了，直接下载.msi安装文件安装即可愉快的使用2）如果你是linux系统，那安装方式就很多了，具体可以参考：https://nodejs.org/en/download/package-manager/查看是否安装成功： $node -v
对于前后端分离的项目，前端项目和后端项目需要单独部署，通常会使用SpringBoot框架开发后端项目，使用Vue框架开发前端项目；后端项目的部署较为简单，一般来说就是先打成一个Jar包上传到服务器，然后使用 nohup java -jar Jar包名 & 命令启动项目即可；完整部署流程可参考文章： 而对于前端Vue项目的部署，需要使用Nginx做反向代理，原因是开发的时候我们使用的是web
转载
2024-01-08 17:47:33
62阅读
本文将按照下面的顺序逐一讲解：1）什么是微前端以及为什么使用微前端2）乾坤框架介绍3）基于乾坤框架实例4）开发过程中遇到的问题一、什么是微前端微前端的核心思想就是将按照不同功能或不同维度拆分的独立子应用，通过主应用来加载这些子应用，达到子项目可以独立开发、独立部署、不受技术栈影响效果。二、乾坤框架介绍下面的地址是乾坤文档地址，详细介绍了微前端的概念、乾坤的核心设计思想介绍三、乾坤框架实例说明：例子
转载
2024-03-14 16:33:52
371阅读
这篇文章是收集我在工作中经常会用到的nginx相关知识点，本文并不是基础知识的讲解更多的是一些方案中的简单实现。location的匹配规则= 表示精确匹配。只有请求的url路径与后面的字符串完全相等时，才会命中。^~ 表示如果该符号后面的字符是最佳匹配的，采用该规则，不再进行后续的查找。~ 表示该规则是使用正则定义的，区分大小写。~* 表示该规则是使用正则定义的，不区分大小写。注意的是，nginx
转载
2024-10-22 10:52:01
16阅读
Nginx 流程目录NginxNginx是什么，能做什么基于Docker的Nginx安装和配置1、拉取nginx镜像2、根据镜像创建Nginx容器1、创建一个用于展示的HTML2、创建Nginx容器1、准备挂载目录2、进行容器创建并挂载**写在后边** Nginx是什么，能做什么是什么，能做什么 Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；同时也是一个IMAP、POP
转载
2024-03-27 10:44:56
390阅读
1、安装nginx2、打包vue项目npm run build生成3、配置nginx location
原创
2023-02-22 10:50:38
265阅读
