微前端 qiankun 的学习 - 1

Thu, 16 Apr 2026 00:00:00 +0800

其实在最初找工作的时候就跟一些同为前端的朋友交流过，那个时候了解到的一个概念是叫“大前端”，当时其实是有点懵的，刚毕业感觉自己什么都不会，这个概念也是第一次听到，后面了解到的就是前端不仅仅只是做web开发。还需要涉及更多领域，比如说微信小程序，APP,桌面端（Electron），甚至是 Node.js,SSR 这种。后面上班后视野逐渐更加开阔，了解到了一点点 docker 的皮毛，熟悉了 nginx等这种工程化的内容。对于这个大前端也有了一定的概念。

随着工作时间的增加，偶然看到了微前端的这个概念。这个虽然在之前也听过，可是我并没有去了解，但是今天我在空闲的时间中，依靠如今的 AI 帮我做了一个深入的了解。我让 AI 帮我搭建了一个基础的项目框架，然后我看了一下它写的代码，大概就了解了这个概念。微前端无非就是一个大容器中我可以随时放任何内容，想放哪个就放哪个，不要哪个就拿出来即可。且这些内容可以由多个不同的人来开发。彼此之间不会受到任何干扰。这大概就是我所了解到的。虽然可能看起来比较浅显。但是我想应该就是这样了。

下面我输出一些基础的代码来看看 #

首先是主应用，也就是所谓的放子应用的容器,其实就是一个独立的 Vue3 项目

App.vue中的核心部分是这样的 #

<template>
  <div>
    <nav style="padding:10px;background:#f0f0f0">
      <a href="/sub-vue">Vue3 Sub</a> |
      <a href="/sub-react">React Sub</a> |
      <a href="/sub-vanilla">Vanilla Sub</a>
    </nav>
    <div id="subapp-container"></div>
  </div>
</template>

因为我初识这个微前端，搭建的内容可能简单粗浅。这个地方可以看到我有三个子应用，我选择了 vue, react, 和原生的 js. 这个地方的重要点是 a 链接中的 href 和下面 div 中的 id,这些内容需要跟在主应用中注册微应用中的内容对上,记得需要在 main.js 中需要引入前端和对应用进行注册。

微前端 on 小萧的博客

微前端 qiankun 的学习 - 1

下面我输出一些基础的代码来看看 #

App.vue中的核心部分是这样的 #