知识篇

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

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

概述

微前端架构的核心理念在于将整体的前端系统分解为若干个具备独立运行能力的子应用模块，其中 qiankun 作为当前广受开发者青睐的微前端解决方案，具备对各类子应用进行有效管理与动态加载的能力。本文将从基础入手，系统性地阐述如何借助 qiankun 搭建完整的微前端体系，并实现多种类型子项目的集成与运行，包括基于 HTML5 技术构建的项目、采用 React 框架开发的应用以及运用 Vue 框架实现的项目。

一、环境准备与配置

【在进行操作前，请确认你的开发环境已配置好以下所需工具：

• Node.js（推荐采用 14.x 及以上版本）
• npm 或者 yarn

二、搭建主应用

以下为微前端架构项目整体目录结构的示例展示，涵盖主应用及各微应用的文件组织形式：

    /micro-frontend
    ├── main-app                # 主应用目录
    │   ├── node_modules        # npm 依赖
    │   ├── p