wujie-vue3使用

关于 wujie-vue3 的使用方法
导入与注册插件
为了在 Vue 3 应用中利用 wujie-vue3 实现微前端架构，需先导入并注册该插件。具体操作如下所示：
import { createApp } from 'vue';
import App from './App.vue';
import WujieVue from 'wujie-vue3';

const app = createApp(App);
app.use(WujieVue);
app.mount('#app');
登录后复制
此段代码展示了如何创建一个基于 Vue 3 的应用程序实例，并通过调用 .use() 方法来安装 wujie-vue3 插件[^1]。
配置子应用参数
当希望在一个父级 Vue 组件内嵌套展示其他独立部署的小程序时，则可以在模板文件里声明 <WujieVue> 自定义标签来进行配置。下面是一个简单的例子：
<template>
<div id="container">
<!-- 子应用容器 -->
<WujieVue :name="'subAppName'" :url="'/path/to/sub-app'" />
</div>
</template>

<script lang="ts" setup>
// 这里的 script 可能会涉及到 TypeScript 或者普通的 JavaScript 文件，
// 根据实际项目的设置而定。
</script>
登录后复制
上述 HTML 片段中的属性解释：

name: 设置子应用的名字以便识别；
url: 指向子应用的实际路径地址；

这些选项允许开发者轻松地将不同源码库构建出来的多个单页应用无缝拼接到同一个页面上工作。
处理生命周期钩子函数
除了基本的加载外，还可以监听来自子应用的各种事件以及执行相应的回调逻辑。比如可以添加一些额外的方法去控制何时预载入资源、销毁实例等行为。这可以通过传递特定 prop 来完成，如 beforeLoad, afterMount 等等[^4]。
<WujieVue
name="example"
url="/example/"
:sync="true"
@before-load="handleBeforeLoad"
/>
登录后复制
这里展示了如何绑定自定义处理函数到组件上的某些阶段触发点上去，从而更好地管理和协调各个模块之间的交互过程。