基于无界的微前端方案(好用推荐)

1. 安装

我们使用Vue3来充当主应用 首先需要安装依赖

//vue2
vue2 npm i wujie-vue2 -S
//vue3 
vue3 npm i wujie-vue3 -S
//react
react npm i wujie-react -S

2. 改造主应用main.ts

import { createApp } from 'vue'
import App from './App.vue'
import Wujie from 'wujie-vue3'
createApp(App).use(Wujie).mount('#app')

3. 主应用页面内引入子应用

<template>
  <div>
    <WujieVue width="100%" height="100%" name="react" :url="url" ></WujieVue>
  </div>
</template>
 
<script setup lang='ts'>
import { ref, reactive } from 'vue'
const url = 'http://127.0.0.1:5174/'
</script>
 
<style scoped lang='less'></style>

只需要简单的几行代码就可以实现微前端应用，接入成本很低。 这些都是无界作者给咱们进行封装过的，所以开箱即用， 如果你想知道如何封装的，可以查看官方文档