知识篇：（八）微前端架构：从零开始搭建 qiankun 并运行不同的子项目

🕗 发布于 2024-10-16 19:55 前端架构 react.js

微前端架构：从零开始搭建 qiankun 并运行不同的子项目

概述

微前端是一种将前端应用拆分为多个独立子应用的架构，qiankun 是一个流行的微前端框架，能够管理和加载这些子应用。本文将从零开始，详细介绍如何使用 qiankun 搭建一个微前端架构，嵌入不同类型的子项目（HTML5 项目、React 项目、Vue 项目），并运行它们。

一、环境准备

在开始之前，请确保你的开发环境中已经安装了以下工具：

Node.js（建议使用 14.x 或更高版本）
npm 或 yarn

二、搭建主应用

以下是整个微前端架构项目的整体目录结构示例，包括主应用和各个微应用的文件结构：

/micro-frontend
├── main-app                # 主应用目录
│   ├── node_modules        # npm 依赖
│   ├── public              # 公共资源
│   │   ├── index.html      # 入口 HTML 文件
│   ├── src                 # 源代码
│   │   ├── App.vue         # 主应用主组件
│   │   ├── main.js         # 入口文件
│   │   ├── router.js       # 路由配置
│   │   └── assets          # 资源文件
│   ├── package.json        # npm 配置文件
│   └── vue.config.js       # Vue 配置文件
├── vue-app                 # Vue 微应用目录
│   ├── node_modules        # npm 依赖
│   ├── public              # 公共资源
│   │   ├── index.html      # 入口 HTML 文件
│   ├── src                 # 源代码
│   │   ├── App.vue         # 微应用主组件
│   │   ├── main.js         # 入口文件
│   │   └── assets          # 资源文件
│   ├── package.json        # npm 配置文件
│   └── vue.config.js       # Vue 配置文件
├── react-app               # React 微应用目录
│   ├── node_modules        # npm 依赖
│   ├── public              # 公共资源
│   │   ├── index.html      # 入口 HTML 文件
│   ├── src                 # 源代码
│   │   ├── App.js          # 微应用主组件
│   │   ├── index.js        # 入口文件
│   │   └── assets          # 资源文件
│   ├── package.json        # npm 配置文件
├── html5-app               # HTML5 微应用目录
│   ├── index.html          # 入口 HTML 文件
│   ├── app.js              # 微应用主逻辑
│   └── package.json        # npm 配置文件（可选）
└── README.md               # 项目说明文件

目录说明

micro-frontend: 顶层目录，包含所有应用的根目录。
main-app: 主应用目录，负责加载和管理各个微应用。
- public: 存放公共资源文件，如 index.html。
- src: 源代码目录，包含主组件、入口文件和路由配置。
vue-app: Vue 微应用目录，包含 Vue 微应用的所有文件。
react-app: React 微应用目录，包含 React 微应用的所有文件。
html5-app: HTML5 微应用目录，包含简单的 HTML5 项目的入口文件和主逻辑。
package.json: 各个应用的 npm 配置文件，定义项目依赖和脚本。
README.md: 项目说明文件，提供项目的基本信息和使用说明。

1. 创建主应用

首先，我们将创建一个 Vue.js 主应用来管理微应用。

# 创建主应用
vue create main-app
cd main-app

选择默认配置。

2. 安装 qiankun

在主应用中安装 qiankun：

npm install qiankun --save

3. 配置主应用

在 src/main.js 中配置主应用，注册微应用：

import { createApp } from 'vue';
import App from './App.vue';
import { registerMicroApps, start } from 'qiankun';

const app = createApp(App);
app.mount('#app');

// 注册微应用
registerMicroApps([
  {
    name: 'vue-app', // 微应用名称
    entry: '//localhost:7101', // 微应用入口地址
    container: '#subapp-viewport', // 微应用挂载容器
    activeRule: '/vue', // 路由规则
  },
  {
    name: 'react-app',
    entry: '//localhost:7102',
    container: '#subapp-viewport',
    activeRule: '/react',
  },
  {
    name: 'html5-app',
    entry: '//localhost:7103',
    container: '#subapp-viewport',
    activeRule: '/html5',
  },
]);

start(); // 启动 qiankun

4. 主应用模板

在 src/App.vue 中添加容器：

<template>
  <div id="app">
    <h1>主应用</h1>
    <nav>
      <router-link to="/vue">Vue 应用</router-link>
      <router-link to="/react">React 应用</router-link>
      <router-link to="/html5">HTML5 应用</router-link>
    </nav>
    <div id="subapp-viewport"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
nav {
  margin-bottom: 20px;
}
</style>

三、创建 Vue 微应用

1. 创建 Vue 微应用

使用 Vue CLI 创建 Vue 微应用：

vue create vue-app
cd vue-app

选择默认配置。

2. 安装 qiankun

在 Vue 微应用中安装 qiankun：

npm install qiankun --save

3. 配置 Vue 微应用

在 src/main.js 中配置 Vue 微应用：

import { createApp } from 'vue';
import App from './App.vue';
import { bootstrap, mount, unmount } from 'qiankun';

const app = createApp(App);

app.mount('#app');

bootstrap();
mount(() => {
  app.mount('#app');
});
unmount(() => {
  app.unmount();
});

4. 启动 Vue 微应用

在 vue-app 中的 package.json 文件中配置端口，方便启动：

"scripts": {
  "serve": "vue-cli-service serve --port 7101"
}

启动 Vue 微应用：

npm run serve

四、创建 React 微应用

1. 创建 React 微应用

使用 Create React App 创建 React 微应用：

npx create-react-app react-app
cd react-app

2. 安装 qiankun

在 React 微应用中安装 qiankun：

npm install qiankun --save

3. 配置 React 微应用

在 src/index.js 中配置 React 微应用：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { bootstrap, mount, unmount } from 'qiankun';

const render = () => {
  ReactDOM.render(<App />, document.getElementById('app'));
};

bootstrap();
mount(render);
unmount(() => {
  ReactDOM.unmountComponentAtNode(document.getElementById('app'));
});

4. 启动 React 微应用

在 react-app 中的 package.json 文件中配置端口，方便启动：

"scripts": {
  "start": "react-scripts start --port 7102"
}

启动 React 微应用：

npm start

五、创建 HTML5 微应用

1. 创建 HTML5 项目

你可以使用任何 HTML5 项目结构。在此示例中，我们手动创建一个简单的 HTML5 项目。

在主目录中创建一个 html5-app 文件夹，并在其中创建 index.html：

mkdir html5-app
cd html5-app

创建 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 应用</title>
</head>
<body>
    <h1>HTML5 微应用</h1>
    <div id="app"></div>
    <script src="http://localhost:7103/app.js"></script>
</body>
</html>

创建 app.js，在其中定义简单的 JavaScript 逻辑：

const appContainer = document.getElementById('app');

const render = () => {
    appContainer.innerHTML = '<p>欢迎使用 HTML5 微应用！</p>';
};

render();

2. 启动 HTML5 微应用

使用一个简单的 HTTP 服务器来提供 HTML5 项目。在项目目录中，安装 http-server：

npm install -g http-server

启动 HTML5 微应用：

http-server -p 7103

六、运行和测试

1. 启动主应用

回到主应用目录并启动：

cd main-app
npm run serve

2. 启动微应用

确保所有微应用（Vue、React 和 HTML5）都已启动并在指定端口运行：

Vue 微应用：http://localhost:7101
React 微应用：http://localhost:7102
HTML5 微应用：http://localhost:7103

3. 访问主应用

在浏览器中访问 http://localhost:8080（默认端口），你应该能看到主应用的导航链接。点击链接可以加载不同的微应用，验证它们的独立运行和状态隔离。

七、总结

本文详细介绍了如何从零开始搭建一个微前端架构，使用 qiankun 作为微前端管理框架，嵌入不同类型的子项目（Vue、React 和 HTML5）。通过这种方式，你可以实现前端项目的模块化和独立性，从而提高可维护性和灵活性。如果你对微前端架构感兴趣，可以进一步探索更多微前端的实现和应用场景。

知识篇：（六）微前端架构解析：使用 qiankun 实现灵活的子应用管理
 知识篇：（七）VitePress 博客搭建指南：轻量化与高性能的完美结合

原文地址：https://blog.csdn.net/mmc123125/article/details/142988365

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：哪些方法可以缓解面试紧张？
下一篇：入门网络安全工程师要学习哪些内容

SafeLine - 雷池 - 不让黑客越过半步
SafeLine，中文名 "雷池"，是一款简单好用, 效果突出的 **`Web 应用防火墙(WAF)`**，可以保护 Web 服务不受黑客攻击。
阅读更多2024-10-16
JL-31 管式墒情记录仪一体式水分测量仪土壤墒情监测仪
管式墒情记录仪能够针对不同土层的土壤水分含量进行动态观测，可以同时检测记录土壤温度和水壤水分的变化，采用分层设点的观测结构，地面配置一个温度观测点，地下土壤每隔10cm配置一个土壤温湿测点，观测相对应
阅读更多2024-10-16
LlamaIndex实现 JSON结构化输出的反射工作流程
本笔记本将介绍如何设置一个LlamaIndex的工作流，从用户的提问中，提取结构化对象的关键信息，以便通过重试和对错误进行反思来提供可靠的JSON结构化文本输出的。这在用户希望LLM能按照用户意愿生
阅读更多2024-10-16
Vue3创建
Vue3创建
阅读更多2024-10-16
大学新生编程入门指南：如何选择编程语言与制定学习计划
编程的学习之路虽然充满挑战，但只要你坚持不懈，并合理规划自己的学习过程，一定能够取得显著的进步。无论你选择的是 Python 编程、JavaScript 编程，还是 C/C++ 编程，关键在于持续的练
阅读更多2024-10-16
小猿口算辅助工具（nodejs版）
实现原理：通过屏幕截图截取到题目区域的两个数字，然后通过 ocr 识别出数字，最后通过计算得出答案，并通过模拟鼠标绘制答案。
阅读更多2024-10-16
C语言_指针_进阶
通过本章内容，对于指针的理解将会得到一个极大的提升，从此指针将不再是难点，而是我们对于底层访问的一把利器
阅读更多2024-10-16
SpringBoot3 + MyBatisPlus 快速整合
这样我们完成了基本的整合，已经可以满足我们前期的开发工作。至于一些高级功能，比如多数据源支持，数据权限插件，等等。等我们需要的时候，可以自己查阅官方文档进行添加，官方文档写的很详细。
阅读更多2024-10-16
优化UVM环境（四）-comp+run生成的文件比较乱，分类整理
优化UVM环境（四）-comp+run生成的文件比较乱，分类整理
阅读更多2024-10-16
C# WinForms 中嵌入 EXE 程序
在 C# WinForms 应用程序中，有时我们希望嵌入并控制其他 EXE 程序。这可以通过 Windows 提供的 API 来实现。本文将介绍如何在 WinForms 应用程序中嵌入并控制外部 EX
阅读更多2024-10-16

知识篇：（八）微前端架构：从零开始搭建 qiankun 并运行不同的子项目

微前端架构：从零开始搭建 qiankun 并运行不同的子项目

概述

一、环境准备

二、搭建主应用

目录说明

1. 创建主应用

2. 安装 qiankun

3. 配置主应用

4. 主应用模板

三、创建 Vue 微应用

1. 创建 Vue 微应用

2. 安装 qiankun

3. 配置 Vue 微应用

4. 启动 Vue 微应用

四、创建 React 微应用

1. 创建 React 微应用

2. 安装 qiankun

3. 配置 React 微应用

4. 启动 React 微应用

五、创建 HTML5 微应用

1. 创建 HTML5 项目

2. 启动 HTML5 微应用

六、运行和测试

1. 启动主应用

2. 启动微应用

3. 访问主应用

七、总结

相关文章