2024路在何方

本文介绍如何使用history插件管理浏览记录history插件的使用history这个插件可以方便管理你的浏览记录cnpm install history --saveimport createHistory from 'history/createBrowserHistory'三种方法有三种使用方式 createBrowserHistory 现代浏览器使用 createBrowserHistory({ basename: ...

微前端懒加载根据前面所讲，我们知道需要加载一个应用，就是去正确注册并启动这个应用，总共有两个步骤：注册 registerApp({ name: config.name, main: config.main, url: config.prefix, store: config.store, base: config.base, path: config.path, })启动 singleSpa.start();

7.消息总线其实微前端，就是将每个app装入了自己的黑匣子中，与外界相对隔离，相互之间无法通信，这其实与我们的现实并不符合。所以，微前端应用之间的相互通信，成了微前端架构的关键之一。应用之间的通信，可以分为两类：每个黑匣子里面发生了什么，外面如何知道？每个黑匣子都是有生命周期的，当被卸载的时候，外面如何知道你已经被卸载了，卸载后又如何保证正常的通信？解决方案github上的single-spa-portal-example提供了解决方案。该方案是基于redux的。pre.了解

6.模块加载器这里的模块加载器，其实主要就是通过汇集每个应用的配置文件，批量注册应用配置文件在每个应用下新建配置文件，比如在src/vue下新建config.jsexport default { "name": "vue", //模块名称 "path": "/vue-project", //模块url前缀 "prefix": "/vue", //模块文件路径前缀 "main": "vue/vue.app.js", //模块渲染出口文件 "store": "./src/vu

5. 感受Single-Spa我们先通过小demo，来感受下Single-Spa如何实现一个项目两个框架同时存在的开始创建根目录mkdir single-spa-appcd single-spa-app初始化项目npm init -y安装依赖，直接展示package.json上的依赖吧dependencies 用 “npm i 依赖名” 来安装devDependencies 用 “npm i 依赖名 -D” 来安装"dependencies": { "r

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。1.后端微服务与前端微服务的优势有何相似之处优势后端微服务前端微服务复杂度可控体积小、复杂度低，每个微服务可由一个小规模开发团队完全掌握，易于保持高可维护性和开发效率每一个UI业务模块由独立的前端团队开发，避免代码巨无霸，保持开发时的高速编译，保持较低的复杂度，便于维护，提升开发效率独立.