初识微前端（无界）

什么是微前端

微前端可以参照微服务的理念，将一个庞大的前端项目拆分成多个灵活的小项目，能够独立开发独立部署，常见于后台管理系统，下面用 无界 举例演示。

实现微前端的方案

1. iframe
2. qiankun
3. EMP
4. 无界

怎么实现

1. 创建两个项目：分别创建一个vue和react项目

pnpm init
pnpm create vite

2. 设置 pnpm 工作空间

// 在根目录下新建 pnpm-workspace.yaml 文件，写如下配置
packages:
  - 'react' // 你的 react 名称
  - 'vue' // 你的 vue 名称

3. 安装依赖

// 在根目录下执行 pnpm 会帮我们的 react 和 vue 安装依赖
pnpm i

此时工程结构如下：

4. 安装无界

介绍我在 Vue3 中使用的方式，其他方式可自行到官网查看 无界

 pnpm -F vue add  wujie-vue3  // vue 替换成你自己的项目名

在vue项目的 main.js 文件中引入挂载无界

import WujieVue from "wujie-vue3";
const app = createApp(App)

app.use(WujieVue)

app.mount('#app')

5. 使用无界 分别启动 react 和 vue项目

pnpm -F react run dev
pnpm -F vue run dev

在 vue 项目App.vue下添加如下代码 url为对应的项目的地址，name可自定义

  <WujieVue url="http://localhost:5174/" name="ract">
  </WujieVue>

至此在 vue 项目下就完成引入 react 了，感兴趣的小伙伴快试试吧。

前面我们引入的 wujie-vue3 实际上是无界针对 vue 项目的一层封装，下期分享无界二次封装的思路。