vue微前端qiankun框架学习到项目实战

news2024/10/6 20:38:12

微前端架构

一、什么是微前端架构

       微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。
       微前端借鉴了微服务的架构理念，将一个庞大的前端应用才分为多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。

二、特性

  1. 技术栈无关，主框架不限制介入应用的技术栈，子应用可以自主选中技术栈
    2.独立开发/部署 各个团队之间仓库独立，单独部署，互不依赖
    3.增量升级 当一个应用庞大之后，技术升级或重构相当的麻烦，而微应用具备渐进式升级的特性
    4.基座下的子应用之间运行时互不依赖，有独立的状态管理
    5.提升效率 应用越庞大，越难以维护，协作效率低下，微应用可以很好的拆分，提升效率

三、有那几种技术去实现微前端架构呢？

  • iframe

也是最早最熟悉的解决方案，就是通过iframe独立运行一个项目，非常简单，无须任何改造，天然沙箱【完美隔离JS，css,都是独立运行的环境】，不限制使用，页面上可以放多个iframe来组合业务，当然也是逃不过技术的两面性，又有点就会有缺点，无法保持路由状态，刷新后路由状态丢失(这点也是完全不能解决，可以将路由)

  • single-spa

single-spa是最早的微前端框架，可以兼容很多技术栈。
single-spa首先在基座中注册所有子应用的路由，当URL改变时就会去进行匹配，匹配到哪个子应用就会去加载对应的那个子应用。相对于iframe的实现方案，single-spa中基座和各个子应用之间共享着一个全局上下文，并且不存在URL不同步和UI不同步的情况，但是single-spa没有实现js隔离和css隔离，需要修改大量的配置，包括基座和子应用的，不能开箱即用

  • qiankun

qiankun是阿里开源的一个微前端的框架，在阿里内部已经经过一批线上应用的充分检验及打磨了，所以可以放心使用。
基于single-spa封装的，提供了更加开箱即用的API，技术栈无关，任意技术栈的应用均可使用/接入，不论是
React/Vue/Angular/JQuery 还是其他等框架。 HTML
Entry的方式接入，像使用iframe一样简单，实现了single-spa不具备的样式隔离和js隔离
资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

四、Qiankun用到的API介绍

registerMicroApps(apps,lifeCycles?)： 自动加载模块，一次性写好配置，直接传入，然后调用start(),qiankun会自动监听UR了变化调用对应用的暴露的生命周期函数。
start(opts?)： 配合registerMicroApps使用，当调用registerMicroApps后，运行启动。
loadMicroApp(app,configuration?) ：手动加载模块，需要自己监听URL并手动加载模块。
addGlobalUncaughtErrorHandler(handler)/removeGlobalUncaughtErrorHandler(handler): 添加/移除监听应用加载错误。
initGlobalState(state) 初始化全局共享状态，类似于vuex，返回两个方法。
setGlobalState(state) 设置全局状态。
onGlobalStateChange((newState,oldState)=>{}) 监听全局状态变化。

五、qiankun注册子应用参数说明

qiankun框架注册子组件参数说明
例如：
qiankun框架注册子应用

六、qiankun框架适合项目结构

qiankun适用项目类型

| -- 主体文件
     | -- .git
     | -- common // 公共模板
     | -- main // 主应用
          | -- package.json
     | -- aps // aps应用
          | -- package.json
     | -- wms // wms应用
          | -- package.json
     | -- 基础设置 // 基础设置应用
          | -- package.json

七、路由设计

项目是有一个登录页的，但是登录页不加载子应用，只有通过登录成功后，跳到第一个页面，才进行加载子应用的。
qiankun中路由的设置

八、一起运行和独立运行

  • 一起运行

公用菜单模块，公用页头，公用页底部模块，只有内容改变，登陆成功后内容页面跳转到对应的子应用页面的内容中。登陆成功后默认跳转到启动页面，通过全局路由守卫进行判断，判断跳转到这个路由，根据获取路由表数据，再跳入到路由表的第一个路由，如果路由表没有数据，则代表这个用户没有菜单，那就没有访问权限，直接调回路由页面。
注意：主应用登录成功后，把路由存到全局状态中，除了主应用addRoute添加路由外。处理路由可以通过路由守卫获取所有菜单后，然后通过判断前缀，把相应的子应用通过apps配置的props传递进去。
还可以在每个子应用第一次运行的时候，在全局路由守卫判断是否是第一次运行的，直接获取全局状态里的路由表，循环判断是否属于当前子应用的路由再addRoute进去。

在这里插入图片描述

  • 独立运行

是指应用独立运行，运行后登录页，基础模块，包括菜单，注销，还能正常使用，这个时候就需要吧登录页，菜单，App三个模块迁到common模块，通过引入的方式，然后根据window.__PROWERED_BY_QIANKUN__判断当前运行环境是否独立运行做相对应的逻辑处理，window.PROWERED_BY_QIANKUN===true为一起运行，window.PROWERED_BY_QIANKUN===false为独立运行。
qiankun框架一起运行

九、基于qiankun的一个Demo实例

(1). Demo文件结构

基于qiankun的项目结构

(2). 主应用配置，基座

基座app-main采用的是vue-cli3搭建，它用来导航渲染和登陆的下发，为子应用提供一个挂载的容器div,基座应该保持简洁，不做过多的业务操作，qiankun只要在基座中引入，再main.js中注册子应用即可。

  • 引入 registerMicroApps,start,setDefaultMountApp
import { registerMicroApps,start,setDefaultMountApp } from 'qiankun'
  1. 注册子应用
// 1. 注册子应用
registerMicroApps([
  {
    name:"open-platform-admin",
    entry:"//localhost:81/",  //子应用页面访问入口
    container:"#subapp-container", //子应用渲染的出口
    activeRule:"/open-platform-admin", // 路径匹配规则, // 路径匹配规则
    sandbox:{
      strictStyleIsolation: true, // 开启样式隔离
      routerBase: '/open-platform-admin',
    }
  },
])
  • 默认打开子应用
setDefaultMountApp("/")  //默认打开子应用
  • 启动微前端架构
start()

  1. 在 App.vue中，需要声明 main.js配置的子应用挂载div（注意id一定要一致），以及基座布局相关的，我当前使用的是layout，所以配置再AppMain.vue中，这样，基座就算配置完成了。项目启动后，子应用将会挂载到 <div id="subapp-container"></div>中。
    主应用挂载子应用

  2. 子应用配置
    在根目录下创建一个子应用，open-admin-web,子应用最好与在基座主应用main.js中配置的名称一致，这样可以直接使用package.json中的name作为output。
    vue.config.js，devServer的端口改为与主营用配置的一致，且加上跨域headers和output配置。
    qiankun子应用配置vue.config.js
    qiankun子应用配置vue.config.js
    新增src/public-path.js

    	if (window.__POWERED_BY_QIANKUN__) {
	  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
	}

    qiankun子应用配置
    src/router/index.js改为只暴露routes， new Router改到 main.js中声明,并改造main.js，并引入src下创建的public-path.js，改写render，添加生命周期函数，最终结果如下⬇

import './public-path';
import Vue from 'vue'
import Cookies from 'js-cookie'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
// import 'ant-design-vue/dist/antd.css';
import "ant-design-vue/dist/antd.less"
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download } from '@/utils/request'

import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
// 分页组件
import Pagination from "@/components/Pagination";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 头部标签组件
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'

//局部使用antDesign-vue中的tree组件
import { Tree } from 'ant-design-vue';
import { Table } from 'ant-design-vue';
import { Icon } from 'ant-design-vue';

// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree


// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.component('ATree', Tree)
Vue.component('ATable', Table)
Vue.component('AIcon', Icon)

Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online! ! !
 */

Vue.use(Element, {
  size: Cookies.get('size') || 'medium' // set element-ui default size
})
let instance = null

async function render(props={}){
  const { container } = props;
  instance = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount(
      container
      ?
      container.querySelector('#app')  //渲染到主应用的入口
      :'#app' //独立运行的时候
    ) 
}
// 在被qiankun引用时 修改运行时的 `publicPath`
if (window.__POWERED_BY_QIANKUN__) { 
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
//如果独立运行的时候,判断是否是独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
/**
 * 子应用建议使用qiankun的规则来接入不需要安装任何依赖，
 * 只需要再三个入口到二u三个必须的钩子函数给qiankun主应用使用
 * 钩子函数必须返回promise（启动的时候调用）
 */
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  // console.log('[vue] props from main framework333333', props);
  render(props);
}
/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) { 
  console.log('update props', props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}
export default instance;
  1. 配置基座路由
 {
    path: '/open-platform-admin',
    component: Layout,
    redirect: '/open-platform-admin/user',
    name: 'open-platform-admin',
    meta: { title: '用户管理', icon: 'el-icon-notebook-2' },
    children: [
      {
        path: 'user/user',
        name: 'user',
        // component: () => import('@/views/article/index'),
        meta: { title: '用户管理', icon: 'el-icon-notebook-1' }
      },
    ]
  },
  1. Demo效
    qiankun框架Deno
    未完待续~
    如何进行主应用和子应用的通信问题~

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

lazada商品详情数据接口，支持多个国家站点

lazada商品详情数据接口，支持多个国家站点

Lazada商品详情数据接口是一个RESTful风格的接口&#xff0c;通过HTTP协议来访问和操作资源。 Lazada商品详情API接口的使用方法如下&#xff1a; 获取Lazada平台上指定商品的详细信息&#xff0c;包括商品名称、价格、库存、分类、描述、图片等。支持通过商品ID、SKU、Selle…
阅读更多...
短视频矩阵系统源码saas开发技术搭建代部署

短视频矩阵系统源码saas开发技术搭建代部署

一、短视频矩阵系统建模----技术api接口--获取用户授权 技术文档分享&#xff1a; 本系统采用MySQL数据库进行存储&#xff0c;数据库设计如下&#xff1a; 1.用户表&#xff08;user&#xff09;&#xff1a; - 用户ID&#xff08;user_id&#xff09; - 用户名&#xff0…
阅读更多...
十大直线导轨品牌

十大直线导轨品牌

在现如今的制造业领域中&#xff0c;直线导轨作为重要的传动元件&#xff0c;广泛应用于各种机械装置中&#xff0c;以下是十个在直线导轨领域具有优秀表现的品牌&#xff0c;我们一起来看看&#xff1a; 1、日本THK&#xff0c;致力于开发、生产并且销售LM滚动导轨、滚珠花键、…
阅读更多...
php eayswoole node axios crypto-js 实现大文件分片上传复盘

php eayswoole node axios crypto-js 实现大文件分片上传复盘

不啰嗦 直接上步骤 步骤1.开发环境配置 项目需要node.js 做前端支撑 官网下载地址： http://nodejs.cn/download/ 根据自己需要下载对应的版本,我下载的是windows系统64位的版本。 包下载好后 进行安装，安装步骤在此省略... 测试是否安装成功 如果是window 按住键…
阅读更多...
WorkPlus Meet 视频会议，自主可控，支持私有化部署

WorkPlus Meet 视频会议，自主可控，支持私有化部署

在数字化时代&#xff0c;视频会议成为企业沟通和协作的重要工具。然而&#xff0c;许多企业对于数据安全和隐私保护的担忧使得选择合适的视频会议平台变得十分关键。作为一款具有私有化部署能力的视频会议工具&#xff0c;WorkPlus Meet完美替代了SaaS的腾讯视频会议&#xff…
阅读更多...
HarmonyOS 4.0 实况窗上线！支付宝实现医疗场景智能提醒

HarmonyOS 4.0 实况窗上线！支付宝实现医疗场景智能提醒

本文转载自支付宝体验科技&#xff0c;作者是蚂蚁集团客户端工程师博欢&#xff0c;介绍了支付宝如何基于 HarmonyOS 4.0 实况窗实现医疗场景履约智能提醒。 1.话题背景 8 月 4 日&#xff0c;华为在 HDC&#xff08;华为 2023 开发者大会&#xff09;上推出了新版本操作系统…
阅读更多...
TensorFlow入门(一)

TensorFlow入门(一)

一、下载安装Anaconda 下载地址:http://www.anaconda.comhttp://www.anaconda.com 下载完成后运行exe进行安装 二、下载cuda 下载地址:http://developer.nvidia.com/cuda-downloadshttp://developer.nvidia.com/cuda-downloads 下载完成后运行exe进行安装 安装后winR cmd进…
阅读更多...
带权并查集

带权并查集

题目 并查集相信大家都不陌生&#xff0c;能够以极低的时间复杂度进行区间合并和区间查询&#xff0c;而带权并查集就是在此基础上新增了查询和维护节点到根节点距离的功能&#xff0c;注意此处所说的距离并不是并查集树形数据结构里节点之间的距离&#xff0c;而是题目里面描…
阅读更多...
SpringBoot整合阿里云发送短信 (demo)

SpringBoot整合阿里云发送短信 (demo)

1. 登录阿里云 - 搜索【短信服务】- 套餐【立即购买】 2. 添加签名 国内消息 - 签名管理 - 添加签名 3. 添加模板 国内消息 - 模板管理 - 添加模板 模板详细 4. 依赖 <!--阿里云短信服务--> <dependency><groupId>com.aliyun</groupId><artifactI…
阅读更多...
中国城市政商关系健康总指数、方面指数及一级指标得分2018

中国城市政商关系健康总指数、方面指数及一级指标得分2018

中国城市政商关系健康总指数、方面指数及一级指标得分2018 1、指标&#xff1a;省份代码、省份、城市代码、城市名称、政商关系健康指数、亲近指数、清白指数、政府关心、政府服务、企业税负、政府廉洁度、政府透明度 2、范围&#xff1a;290个地级市 3、数据说明&#xff1…
阅读更多...
IDEA新建.xml文件显示为普通文本

IDEA新建.xml文件显示为普通文本

情况如下&#xff1a; 1. 在XML文件中添加*.xml的文件名模式 2. 在文本中&#xff0c;选中*.xml进行删除
阅读更多...
MySQL篇-MySQL存储引擎详解

MySQL篇-MySQL存储引擎详解

MySQL 执行流程是怎样的&#xff1f; 可以看到&#xff0c; MySQL 的架构共分为两层&#xff1a;Server 层和存储引擎层&#xff0c; Server 层负责建立连接、分析和执行 SQL。MySQL 大多数的核心功能模块都在这实现&#xff0c;主要包括连接器&#xff0c;查询缓存、解析器、…
阅读更多...
Euro-NCAP-HWA测试流程中文版V1.1(2023发布)

Euro-NCAP-HWA测试流程中文版V1.1(2023发布)

定义 在本协议中，使用了以下术语: Vehicle undertest (VUT) – 指根据本规程测试的车辆，车上有碰撞前的碰撞缓解或避免系统 Global VehicleTarget (GVT) – 指本协议中使用的车辆目标，其定义见TB025—Euro-NCAP全球车辆目标规范v1.0 辅助其他车辆（SOV）--指最新的 AEB …
阅读更多...
Spring源码相关

Spring源码相关

总分结构回答&#xff0c;突出关键接口、类、方法名 run -> AbstractApplicationContext.refresh&#xff08;&#xff09;程序的入口 在IOC中的操作都是基于DefaultListableBeanFactory bd对象保存在map集合中 refresh方法宝包括了整个Spring的执行流程和bean的完整生命…
阅读更多...
【Postman-windows-9.12.2版本安装与汉化】

【Postman-windows-9.12.2版本安装与汉化】

Postman-windows-9.12.2版本安装与汉化 想用英文版本的可以直接点击如下链接下载最新版本 官网最新版本(无法汉化)&#xff1a;https://www.postman.com/downloads/ 如果想要汉化的就不能使用最新版本&#xff0c;因为最新版本没有汉化包可以用 汉化包和postman的版本必须是…
阅读更多...
RFID技术在危险品仓库中的综合应用

RFID技术在危险品仓库中的综合应用

危险仓库内的危化品存放、隔离、堆放数量等需要严格的管控。危险化学品自身所具有的易爆、易燃、毒害、腐蚀、放射等性导致其在生产、经营、存储、运输、使用、废弃处置的过程中安全尤为重要&#xff0c;RFID技术应用避免人为误操作&#xff0c;实现危险品的自动安全核查和规范…
阅读更多...
win10家庭版安装docker desktop问题

win10家庭版安装docker desktop问题

一、WSL kernel version too low 1、power shell,运行升级命令 wsl --update 2、官网下载wsl2更新包安装 二、Unexcepted WSL error 未找到解决方法&#xff0c;看来只能老老实实用win专业版了。
阅读更多...
用go实现http服务端和请求端

用go实现http服务端和请求端

一、概述 本文旨在学习记录下如何用go实现建立一个http服务器&#xff0c;同时构造一个专用格式的http客户端。 二、代码实现 2.1 构造http服务端 1、http服务处理流程 基于HTTP构建的服务标准模型包括两个端&#xff0c;客户端(Client)和服务端(Server)。HTTP 请求从客户端…
阅读更多...
单片机涉及到这么多行业？

单片机涉及到这么多行业？

单片机在众多行业中都有广泛应用。汽车电子领域使用单片机来控制引擎、制动系统、安全系统等&#xff0c;提升车辆性能和安全性。不懂的可以看看这一套学习资料包&#xff0c;里面涵盖了一整个嵌入式行业教学资料&#xff0c;不论是小白入门还是精通进阶都包括在内&#xff0c;…
阅读更多...
全面提升AD域安全认证 | 竹云IDaaS

全面提升AD域安全认证 | 竹云IDaaS

传统的微软Active Directory目录已无法适应企业多样化的业务需求&#xff0c;借助身份云您可以快速整合企业本地、云端资源&#xff0c;从而使AD域管理变得更简单、安全、高效。 企业面临的挑战 AD域无法整合现代化系统 AD域仅支持 LDAP 、Kerberos 协议&#xff0c;不能整合…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023