微前端之使用无界创建一个微前端项目

  • wujie 使用手册
    • 使用简介
      • 主应用配置
        • 安装 wujie依赖
        • main.js配置
          • 是否开启预加载
        • 生命周期函数 – lifecycle.js配置
      • 子应用配置
        • 跨域设置
        • 运行模式
          • 生命周期改造
      • 在主应用中,使用wujie,将子应用引入到主应用中去

wujie 使用手册

在这里插入图片描述

wujie 是一个基于 Web Component 容器 + iframe 沙箱的微前端方案

能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等问题。

无界支持多种项目的接入,如 react、vue 等

使用简介

主应用不限技术栈,只需引入 wujie、配置子应用路由并启动 wujie 即可。

wujie 针对 React 和 Vue 框架分别提供了 wujie-react wujie-vue2 wujie-vue3 依赖。

这里以 Vue2 为例。

主应用配置
安装 wujie依赖
pnpm i wujie -S

# vue2 框架
pnpm add wujie-vue2

# vue3 框架
# pnpm add wujie-vue3

# react 框架
# pnpm add wujie-react
main.js配置
// main.js

import Vue from 'vue'
import App from './App.vue'

//引入无界微前端
// vue2
import WujieVue from "wujie-vue2";
// vue3
// import WujieVue from "wujie-vue3";

import lifecycles from "../config/lifecycle";
const { setupApp, preloadApp, bus } = WujieVue;
Vue.use(WujieVue);
// const props = {
//     jump: (name) => {
//         router.push({ name });
//     },
// };

//设置子应用demo
setupApp({
    name: "vue3Child1",
    url: "http://localhost:5173/",
    exec: true,
    // props,
    fetch: function fetch(url, options) {
        //console.log("fetch.url:=",url,options)
        return window.fetch(url, { ...options, credentials: "omit" });
    },
    ...lifecycles,
});

// 预加载
//preloadApp({
//    name: "demo",
//});

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
是否开启预加载

注意:setupApp 设置子应用的name和 preloadApp 设置的name要一致。

预加载优势:预加载,可以极大的提升子应用首次打开速度

预加载劣势:

  • 资源的预加载会占用主应用的网络线程池
  • 资源的预执行会阻塞主应用的渲染线程

一般来说,如果不是很介意打开的首屏时间,这里预加载可以不用加。

生命周期函数 – lifecycle.js配置
const lifecycles = {
    beforeLoad: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeLoad 生命周期`),
    beforeMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeMount 生命周期`),
    afterMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterMount 生命周期`),
    beforeUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeUnmount 生命周期`),
    afterUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterUnmount 生命周期`),
    activated: (appWindow) => console.log(`${appWindow.__WUJIE.id} activated 生命周期`),
    deactivated: (appWindow) => console.log(`${appWindow.__WUJIE.id} deactivated 生命周期`),
    loadError: (url, e) => console.log(`${url} 加载失败`, e),
};
export default lifecycles;

无界提供一整套的生命周期钩子供开发者调用

如果子应用没有做生命周期的改造,那么 beforeMount、afterMount、beforeUnmount、afterUnmount 这四个生命周期将不会调用

子应用配置
跨域设置

子应用改造,无界对子应用的侵入非常小,在满足跨域条件下子应用可以不用改造。

子应用的资源和接口的请求都在主域名发起,所以会有跨域问题。

所以这里,主应用和子应用,建议使用nginx进行代理,解决跨域的问题。

//主应用
location /main {
    proxy_set_header Host    $host;
    proxy_pass http://127.0.0.18080;
}

//子应用
location /demo {
    proxy_set_header Host    $host;
    proxy_pass http://127.0.0.18081;
}
运行模式

无界有三种运行模式:单例模式保活模式重建模式

其中保活模式、重建模式子应用无需做任何改造工作,单例模式需要做生命周期改造

生命周期改造

改造入口函数:

将子应用路由的创建、实例的创建渲染挂载到window.__WUJIE_MOUNT函数上
将实例的销毁挂载到window.__WUJIE_UNMOUNT上
如果子应用的实例化是在异步函数中进行的,在定义完生命周期函数后,请务必主动调用无界的渲染函数 window.__WUJIE.mount()

vue2

if (window.__POWERED_BY_WUJIE__) {
  let instance;
  window.__WUJIE_MOUNT = () => {
    const router = new VueRouter({ routes });
    instance = new Vue({ router, render: (h) => h(App) }).$mount("#app");
  };
  window.__WUJIE_UNMOUNT = () => {
    instance.$destroy();
  };
} else {
  new Vue({ router: new VueRouter({ routes }), render: (h) => h(App) }).$mount("#app");
}

vue3

if (window.__POWERED_BY_WUJIE__) {
  let instance;
  window.__WUJIE_MOUNT = () => {
    const router = createRouter({ history: createWebHistory(), routes });
    instance = createApp(App);
    instance.use(router);
    instance.mount("#app");
  };
  window.__WUJIE_UNMOUNT = () => {
    instance.unmount();
  };
} else {
  createApp(App).use(createRouter({ history: createWebHistory(), routes })).mount("#app");
}
在主应用中,使用wujie,将子应用引入到主应用中去

经过上面主应用和子应用的改造之后,就可以再主应用中,使用wujie,将子应用引入到主应用中去。

主应用,有这样的一个vue组件

wujieDemo.vue 页面使用WujieVue引用目标项目的页面

// wujieDemo.vue
<template> 
    <WujieVue
            width="100%"
            height="100%"
            name="vue3Child1"
            :url="vue3Child1Url"
        />
</template><script>
 export default {
  data() {
    return {
       vue3Child1Url: 'http://localhost:5173/',
    }
  },
</script>

注意,上面 WujieVue 使用的name要和 setupApp 设置的name,要对应。

参考文档:

https://juejin.cn/post/7262347509951889467

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/438736.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux环境下使用interrupt方式操作UART

目录 概述 1 Linux环境下UART设备 2 轮询方式操作UART功能实现 2.1 打开串口函数&#xff1a;usr_serial_open 2.2 关闭串口函数&#xff1a; usr_serial_close 2.3 发送数据函数&#xff1a; usr_serial_sendbytes 2.4 接收数据函数&#xff1a; usr_serial_readinterr…

Android 性能优化--APK加固(2)加密

文章目录 字符串加密图片加密如何避免应用被重新签名分发APK 加壳的方案简析DEX加密原理及实现 本文首发地址&#xff1a;https://h89.cn/archives/212.html 最新更新地址&#xff1a;https://gitee.com/chenjim/chenjimblog 通过 前文 介绍&#xff0c;我们知晓了如何使用代码…

前端网络请求异步处理——Promise使用记录

Promise是ES6中新增的一个处理复杂异步请求的工具&#xff0c;其主要形式为&#xff1a; const baseUrl http://localhost:80 export const $request (param {}) > {console.log(请求参数, param)return new Promise((resolve, reject) > {wx.request({url: baseUrl …

SpringMVC拦截器和过滤器执行顺序及区别

拦截器&#xff08;Inteceptor&#xff09;和过滤器&#xff08;Filter&#xff09;执行顺序&#xff1f; 拦截器和过滤器区别&#xff1f; 1、拦截次数不同&#xff1a; 过滤器&#xff1a;一次请求只能被一个过滤器拦截一次&#xff0c;它们按照在web.xml中的声明顺序依次执…

Python Web开发记录 Day7:Django(Web框架) part 1

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 七、Django1、快速了解Django①概述②核心功能③…

css flex 布局换行

默认使用display: flex;是不换行的&#xff0c;只需要加上flex-wrap: wrap;就行了&#xff0c;效果图 .app-center {display: flex;flex-wrap: wrap;justify-content:flex-start; } 通过上面我们发现虽然时间换行了&#xff0c;但是每行的边距不一样 加上这个就行了&#xff…

华为配置DHCP Snooping防止DHCP Server仿冒者攻击示例

配置DHCP Snooping防止DHCP Server仿冒者攻击示例 组网图形 图1 配置DHCP Snooping防止DHCP Server仿冒者攻击组网图 DHCP Snooping简介配置注意事项组网需求配置思路操作步骤配置文件 DHCP Snooping简介 在一次DHCP客户端动态获取IP地址的过程中&#xff0c;DHCP Snoopi…

开源分子对接程序rDock使用方法(1)-Docking in 3 steps

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 文章目录 前言一、Docking in 3 steps 标准对接rDock 的基本对接步骤及注意事项 二、 三步对接案例Step 1. 结构文件准备Step 2. 产生对接位点Step 3. 运行分子对接3.1 检查输入文件3.2 测试-只进行打分3.3 运行…

maven项目结构管理统一项目配置操作

一、maven分模块开发 Maven 分模块开发 1.先创建父工程&#xff0c;pom.xml文件中&#xff0c;打包方式为pom 2.然后里面有许多子工程 3.我要对父工程的maven对所有子工程进行操作 二、解读maven的结构 1.模块1 <groupId>org.TS</groupId><artifactId>TruthS…

利用CesiumJS开发模拟飞机飞行的应用(添加飞行轨迹)

上一节介绍了利用CesiumJS开发模拟飞机飞行的应用(一&#xff0c;基本功能)&#xff0c;本节介绍如何在上节基础上添加飞行轨迹所使用数据是从旧金山到哥本哈根的真实航班&#xff0c;并使用 FlightRadar24收集的雷达数据。 添加单个3D点对象 FlightRadar24 使用多种方法&#…

[c/c++] const

const 和 #define 的区别 ? const 和指针一块出现的时候&#xff0c;到底谁不能修改 &#xff1f; const 和 volatile 能同时修饰一个变量吗 ? const 在 c 中的作用 ? 1 const 和 #define 的区别 const 和 #define 的相同点&#xff1a; (1) 常数 const 和 #define 定…

51-27 DirveVLM:自动驾驶与大型视觉语言模型的融合

本文由清华大学和理想汽车共同发布于2024年2月25日&#xff0c;论文名称DRIVEVLM: The Convergence of Autonomous Driving and Large Vision-Language Models. DriveVLM是一种新颖的自动驾驶系统&#xff0c;旨在针对场景理解挑战&#xff0c;利用最近的视觉语言模型VLM&…

蓝桥杯——web(ECharts)

ECharts 初体验 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><script src"echarts.js">&l…

【APB协议 UVM_Sequencer Driver Monitor_2024.03.04】

apb协议 写时序 地址、写信号、PSEL、写数据信号同时发生变化&#xff0c;即传输的第一个时钟被称为SETUP周期。在下个时钟上升沿,PENABLE信号拉高&#xff0c;表示ENABLE周期&#xff0c;在该周期内&#xff0c;数据、地址以及控制信号都必须保持有效。整个写传输在这个周期…

寻找旋转排序数组中的最小值[中等]

优质博文IT-BLOG-CN 一、题目 已知一个长度为n的数组&#xff0c;预先按照升序排列&#xff0c;经由1到n次 旋转 后&#xff0c;得到输入数组。例如&#xff0c;原数组nums [0,1,2,4,5,6,7]在变化后可能得到&#xff1a; 【1】若旋转4次&#xff0c;则可以得到[4,5,6,7,0,1,2…

perf的安装与迁移

前言 perf是性能优化很重要的工具之一&#xff0c;本篇博客就来看一下perf的安装以及遇到的问题。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xff0c;一起讨论一起学…

Unity性能优化篇(四) GPU Instancing

使用GPU Instancing可以在一个Draw Call中同时渲染多个相同或类似的物体&#xff0c;从而减少CPU和GPU的开销。 官方文档&#xff1a;https://docs.unity3d.com/Manual/GPUInstancing.html 启用GPU Instancing&#xff0c;我们可以选中一个材质&#xff0c;然后在Inspector窗口…

【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 传统布局和Web标准布局的区别

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 传统布局与…

c++复习

基础 内存分区 栈&#xff1a; 存放函数的局部变量、函数参数、返回地址等&#xff0c;由编译器自动分配和释放。 堆&#xff1a; 动态申请的内存空间&#xff0c;就是由 malloc 分配的内存块&#xff0c;由程序员控制它的分配和释放&#xff0c;如果程序执行结束还没有释放…

【MySQL 系列】MySQL 起步篇

MySQL 是一个开放源代码的、免费的关系型数据库管理系统。在 Web 开发领域&#xff0c;MySQL 是最流行、使用最广泛的关系数据库。MySql 分为社区版和商业版&#xff0c;社区版完全免费&#xff0c;并且几乎能满足全部的使用场景。由于 MySQL 是开源的&#xff0c;我们还可以根…