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

微前端架构：从零开始搭建 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 主应用来管理微应用。

bash 复制代码

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

选择默认配置。

2. 安装 qiankun

在主应用中安装 qiankun：

bash 复制代码

npm install qiankun --save

3. 配置主应用

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

javascript 复制代码

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 中添加容器：

html 复制代码

<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 微应用：

bash 复制代码

vue create vue-app
cd vue-app

选择默认配置。

2. 安装 qiankun

在 Vue 微应用中安装 qiankun：

bash 复制代码

npm install qiankun --save

3. 配置 Vue 微应用

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

javascript 复制代码

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 文件中配置端口，方便启动：

json 复制代码

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

启动 Vue 微应用：

bash 复制代码

npm run serve

四、创建 React 微应用

1. 创建 React 微应用

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

bash 复制代码

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

2. 安装 qiankun

在 React 微应用中安装 qiankun：

bash 复制代码

npm install qiankun --save

3. 配置 React 微应用

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

javascript 复制代码

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 文件中配置端口，方便启动：

json 复制代码

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

启动 React 微应用：

bash 复制代码

npm start

五、创建 HTML5 微应用

1. 创建 HTML5 项目

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

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

bash 复制代码

mkdir html5-app
cd html5-app

创建 index.html：

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 逻辑：

javascript 复制代码

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

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

render();

2. 启动 HTML5 微应用

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

bash 复制代码

npm install -g http-server

启动 HTML5 微应用：

bash 复制代码

http-server -p 7103

六、运行和测试

1. 启动主应用

回到主应用目录并启动：

bash 复制代码

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 博客搭建指南：轻量化与高性能的完美结合