Vue qiankun微前端实现详解

目录
  • 引言
  • What:微前端是什么
  • Why:为什么选择微前端
  • 微前端能做到什么
  • 为什么不使用iFrame
  • How:微前端实践
  • 在主应用中注册微应用
  • 在子应用导出相应的生命周期钩子
  • 结尾

引言

前端时间有个契机,让我们团队开始进行微前端的相关实践。

最近正好有些成果了,来一个阶段性的总结,也方便后续进一步的开发。

可能第一次听说微前端的同学都会不明觉厉,那么ta到底是个啥?本章会从以下3个角度阐述我的理解:

  • What:微前端是什么
  • Why:为什么选择微前端
  • How:微前端实践

What:微前端是什么

首先,微前端其实并不高大上,它的本质十分简单:

一句话介绍:在一个应用中展示另几个应用的界面。

是不是看起来与iFrame非常类似?

在微前端体系中,被展示的应用称为子应用,而提供展示容器的应用称为主应用

Why:为什么选择微前端

这个问题我觉得可以从两个方面来回答:

  • 微前端能做到什么
  • 为什么不使用iFrame

微前端能做到什么

随着公司规模不断扩大,项目团队数量不断增加,我们不可避免的遇到了这些问题:

  • 多个项目需要同一个能力模块
  • 项目团队都有自己的特色模块,这些模块可能是别的项目团队想要的
  • 各个团队使用的技术栈有所区别,迁移成本较大
  • 开发新项目时,可能需要某些老项目的能力模块
  • …………

这些问题,归根结底就是技术复用

我们想,能不能将每个团队的特色模块划分为子应用。大家都基于主应用开发,当路径切换时加载不同的子应用,这样每个子应用都是独立的,技术栈也就不用再做限制了!

为什么不使用iFrame

如果不考虑体验问题,iframe 几乎是最完美的微前端解决方案了。--qiankun文档

iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题:

  • Url 不同步。在iFrame中刷新会导致应用出错、后退前进按钮无法使用、无法使用统一的标签导航……
  • UI 不同步,DOM 结构不共享。iFrame中难以构建一个带有全局遮盖的弹窗。
  • 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求实现困难。

How:微前端实践

抛开需求讲技术完全就是耍流氓,所有架构最终都是为了业务。

在我的认知中,微前端更适合构建控制台类的单页面应用。会打开多个页面的社区、论坛类应用是不适合使用微前端的。既然都打开新页面了,为什么不直接跳转到另一个项目的地址呢。

团队选择了qiankun@2.0作为微前端的实现方案,qiankun官方网站:qiankun.umijs.org/zh

跟着官网的Demo,只需要两步就可以实现微前端模式改造:

  • 在主应用增加注册子应用的代码
  • 在子应用中提供钩子函数

在主应用中注册微应用

在main.js等项目入口文件处注册子应用:

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);
start();

当微应用信息注册完之后,一旦浏览器的 url 发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中,同时依次调用微应用暴露出的生命周期钩子。

在子应用导出相应的生命周期钩子

微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js,在我们项目中是main.js)
导出 bootstrap、mount、unmount 三个生命周期钩子,以供主应用在适当的时机调用。

/**
 * bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}
/**
 * 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}
/**
 * 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}
/**
 * 可选生命周期钩子,仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

结尾

由于实际上的项目比Demo复杂的多,实际开发过程中遇到了一万个坑,包括路由、权限、第三方插件等等,这部分的内容会在后续帖子里更新。

以上就是Vue qiankun微前端实现详解的详细内容,更多关于Vue qiankun微前端的资料请关注我们其它相关文章!

(0)

相关推荐

  • Qiankun原理详解JS沙箱是如何做隔离

    目录 前言 复习一下沙箱 SanpshotSandbox LegacySandbox ProxySandbox 隔离原理 XXX is undefined 总结 前言 相信大家也知道 qiankun 有 SnapshotSandbox, LegacySandbox 和 ProxySandbox 这些沙箱,而它们又可以分为单例和多例两种模式,网上也有很多文章对其进行介绍. 但这些文章的关注点都是沙箱的环境恢复做的事,那 JS 的隔离到底是怎么做到的呢? 换个问法,当我写 window.a = 1

  • 微前端qiankun改造日渐庞大的项目教程

    项目背景 很多小伙伴在工作中都碰到过和我一样的场景,手上的某个项目越来越大,眼看着每次build时间越来越长,吐了.在杭州某独角兽我碰到了这样的一个项目,他叫运营后台,听名字就知道,他的主要用户是运营人员.问题就是随着公司业务的越来越多,这个运营后台承担的已经不是某一块业务了,而是所有业务的运营操作的中后台都在这上面.你可以这样理解,这个系统的每个一级菜单都是一块独立的业务,相互之间没有任何瓜葛:按常规的理解,这应该是单独的每一个project比较合理,但是正因为他的用户又都是公司的同一群人,他

  • qiankun 找不到入口问题彻底解决

    目录 前言 为什么要找生命周期 如何找入口 兜底找入口 微应用的 Webpack 配置 主应用的兜底逻辑 总结 前言 嗨害嗨,好久不见,我是海怪. 有一阵子没写文章了,今天来更一期关于 qiankun 找不到生命周期的问题. 刚开始给项目接入 qiankun 的时候,时不时就会报 Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry: 开发

  • 微前端qiankun沙箱实现源码解读

    目录 前言 LegacySandbox单实例沙箱 ProxySandbox多实例沙箱 SapshotSandbox 快照沙箱 结束语 前言 上篇我们介绍了微前端实现沙箱的几种方式,没看过的可以下看下JS沙箱这篇内容,扫盲一下.接下来我们通过源 码详细分析下qiankun沙箱实现,我们clone下qiankun代码,代码主要在sandbox文件夹下,目录结构为 ├── common.ts ├── index.ts // 入口文件 ├── legacy │ └── sandbox.ts // 代理沙

  • Vue qiankun微前端实现详解

    目录 引言 What:微前端是什么 Why:为什么选择微前端 微前端能做到什么 为什么不使用iFrame How:微前端实践 在主应用中注册微应用 在子应用导出相应的生命周期钩子 结尾 引言 前端时间有个契机,让我们团队开始进行微前端的相关实践. 最近正好有些成果了,来一个阶段性的总结,也方便后续进一步的开发. 可能第一次听说微前端的同学都会不明觉厉,那么ta到底是个啥?本章会从以下3个角度阐述我的理解: What:微前端是什么 Why:为什么选择微前端 How:微前端实践 What:微前端是什

  • vue系列之动态路由详解【原创】

    开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了一个比较标准的单系统的解决方案. 本文目录: 一: 设想 二: 讨论 三:实现 四:总结 一: 设想 简单解释下上图就是: 首先前端从cookie获取token,如果没有token就跳转到登录页面登录,登录验证之后生成token存在数据库中并返回给前端:前端将这个token保存下来,为了让在浏览器新

  • laravel-admin 与 vue 结合使用实例代码详解

    由于 Laravel-admin 采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,并不是刷新整个 document,而是从服务器拿到部分 document,再通过类似 $("#pjax-container").html(newPart) 的方式更新的. 这就造成一个问题,每次 pjax 刷新,都会破坏 vue 的 dom 映射. 所以理论上有2种方法解决: 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞,而且没啥资料,放弃.2 的话比较可行. 部分

  • vue eslint简要配置教程详解

    在前端开发过程中,难免习惯了 console.log . 但是刚入门vue时,基于vue-cli 3.x,运行时终端老抛出error.一看信息,发现是不能使用 console.log ,另外import后的但是没有使用的变量也提示error信息,这是不错的. 1. 修改rules 但的你想去掉console提示?那可以通过 package.json 修改 rules 规则. 在package.json中,有这几其中的一项,在 rules 中添加 "no-console": "

  • vue的过滤器filter实例详解

    前记: 排版记录,点耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍: 某个filter.js // 限制汉字的个数 export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => { /* es

  • 通过GASP让vue实现动态效果实例代码详解

    单页应用及支持它们的前端框架提供了一个很好的机会,可以为程序设计提供令人惊叹的交互层,本文,我们将了解 vue.js 及如何集成 GASP 动画库来添加令人惊叹的动画效果. Vue.js 是一个功能强大且易掌握的 JS 框架,在 Vue CLI 的帮助下,我们能够快速构建具有所有最新 Webpack 功能的应用程序,而无需花费时间来配置 webpack,只需安装 Vue CLI,在重大上输入:create <project-name>,您就可以发车了. GASP是一个JavaScript动画库

  • 低门槛开发iOS、Android、小程序应用的前端框架详解

    现如今跨平台开发技术已不是什么新鲜话题了,在市面上也有一些开源的框架可供选择,然而技术成熟.产品服务健全的平台并不多,其中也不乏推陈出新的框架值得关注. 比如最近使用的AVM,由APICloud迭代推出的多端开发框架,基于JavaScript,兼容多语法,如果是Vue.React的用户,可直接上手,没什么学习成本,具备虚拟DOM,可一次编写多端渲染:主要是APICloud上线已有7年,相对已经成熟,所以我把自己的一些认知和实践结合AVM官方文档的内容做了一下整理,希望能对需要使用跨平台开发技术的

  • vue封装动态表格方式详解

    目录 前言 实现方式简述 表格实现: func组件 text组件: 调用示例 效果 前言 这里只是提供一种想法并提供一些快速实现,实际这些技巧可以用在很多地方,如:动态表单 实现方式简述 通过json定义要显示的列 通过slot实现自定义列 通过require.context实现组件的自动注册,并通过<components is="xxx"></components>, 调用动态注册的组件 优点: 支持通过slot自定义扩展 支持编写vue文件扩展列的显示方式

  • Vue组件选项props实例详解

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

  • vue快捷键与基础指令详解

    v-bind可以简写成   : <img src="{{url}}">→<img :src="url" :width="50px"> v-on:click可以写成@click <button @click="up()"></button> v-if实例  可以通过对对象操作条件来实现想要展示的效果 <!DOCTYPE html> <html> <he

随机推荐