了解这7个微前端框架，摸鱼时间可以大大增加！！

CodeQi技术小栈

已于 2024-07-03 10:02:02 修改

阅读量1.3k

点赞数 39

分类专栏：前端文章标签：前端架构前端框架

于 2024-07-01 16:42:47 首次发布

本文链接：https://blog.csdn.net/SWQ4520/article/details/140104708

版权

大家好，我是CodeQi！

在2024年，前端开发的世界变得越来越分散化。

作为一名开发者，我深刻感受到微前端架构在大型项目中的重要性和便利性。

微前端技术不仅解决了单体前端应用的复杂性，还提高了开发团队的独立性和灵活性。

今天，我将和大家分享2024年最受欢迎的7个微前端框架，并详细讲解每个框架的使用方法。

1. Single SPA

简介

Single SPA 是一个能让你将多个微前端应用组合成一个整体的 JavaScript 框架。它允许你在一个页面中运行多个不同的前端应用程序，并且这些应用程序可以用不同的框架（如 React、Angular、Vue）构建。

安装和设置

1. 创建项目目录

mkdir single-spa-root
cd single-spa-root

2. 安装 single-spa-cli
```
npm install -g create-single-spa
```
3. 创建 root-config
```
npx create-single-spa
```
4. 选择 "root-config" 类型并按照提示完成项目配置
5. 安装所需依赖
```
cd root-config
npm install
```

配置示例

在 src/index.ejs 文件中添加以下内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>single-spa</title>
<script src="https://unpkg.com/systemjs/dist/system.js"></script>
<script>
      System.import('single-spa-config');
    </script>
</head>
<body>
<single-spa-router></single-spa-router>
</body>
</html>

在 src/root-config.js 文件中

最低0.47元/天解锁文章

CodeQi技术小栈

关注

39
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
0
评论
了解这7个微前端框架，摸鱼时间可以大大增加！！

Single SPA 是一个能让你将多个微前端应用组合成一个整体的 JavaScript 框架。它允许你在一个页面中运行多个不同的前端应用程序，并且这些应用程序可以用不同的框架（如 React、Angular、Vue）构建。Qiankun 是一个基于 single-spa 实现的微前端框架，它极大地简化了微前端应用的搭建和管理过程。Qiankun 提供了更多的开箱即用特性，如沙箱机制、样式隔离等。Module Federation 是 Webpack 5 引入的一项功能，它使得模块能够在运行时被加载和共享。
复制链接

扫一扫