qiankun-微前端--vue2

项目结构

主应用技术: vue2
子应用技术:vue2

项目目录

这里是特意将主子项目分开来的,方便管理

主应用

  1. 安装 qiankun
npm install qiankun
  1. 重新定义一个启动端口,防止和其它子应用共用同一个端口(vue.config.js)
    在这里插入图片描述

  2. 定义子应用在主应用中的出口,下面这两个地方都需要进行定义(main.js和模板组件)
    注意:我这里定义的子应用的挂载节点是在HomeView.vue这个页面上,放在这里是我把这个页面当成了子应用在主应用的模板页面
    在这里插入图片描述

  3. 路由定义,对应的路由与子应用的路由相对应,但是主应用对应子应用的路由前面要加一个标识(/child-app),用于找到对应的子应用
    注意:component里面引用了HomeView组件,是因为上面3步骤提示了,子应用是以主应用的HomeView.vue页面作为模板页面,所以这里要加它
    在这里插入图片描述

  4. 定义主应用和子应用对应的项目名字以及服务路由(vue.config.js)
    在这里插入图片描述

子应用–子应用不需要安装 “qiankun”

  1. id更改,注意这三个地方都需要更改,这里更改id的目的是为了区分与其它应用用了相同的id,尽量使用不同的id为好
    在这里插入图片描述

  2. 服务启动端口设置以及webpack设置子应用唯一名字(vue.config.js)
    注意:这里的端口号和子应用名字要与主应用上面定义的一样
    在这里插入图片描述

  3. 路由设置,注意子应用这里都在路由前面加了 “/child-app” , 是因为主应用要通过这个来进行激活规则
    注意: new VueRouter()里面有一段区分qiankun的路由匹配规则
    在这里插入图片描述

  4. 在main.js 里面添加qiankun 生命周期钩子
    注意: 这里需要注意的是 qiankun 使用的是 “window.POWERED_BY_QIANKUN” 判断是否在子应用环境中
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

哨兵2号在SNAP中去云处理

1.Fmask软件对1C级产品进行处理,识别像素类别 不知道Fmask是什么可以先去百度一下 软件下载,链接到github地址 我下载的是4.5版本,无脑安装即可。 双击打开软件(需要等一会),长这样 路径选择E:\S2\S2A_MSIL1C_20220…

SAP MM学习笔记17-在库品目评价中的标准原价 S 和移动平均价格 V

SAP中有2种价格,标准原价 S 和 移动平均价格 V。 1,标准原价 S 2,移动平均价格 V 在MM03 会计1 Tab中,现行评价区域中,有原价管理区分。 比如下面这个物料 100-100, 它的原价管理区分是 S。 它的合计额…

怎么用PS的魔术棒抠图?PS魔术棒抠图的操作方法

使用PS的魔术棒抠图教程: 1、首先,在ps界面上方点击“文件”选项,再在其弹出的选项栏中选择“打开”选项。然后,打开你所需要的图片。 2、然后,单击左侧的“魔术棒”工具。 3、然后,用鼠标点击图片的背景&…

C++初阶语法——类型指示符auto和空指针nullptr

前言:本篇文章的重点 1.C中的类型指示符auto 2.借由auto实现的范围for 3.C为什么要创建nullptr而不是用原本的NULL。 目录 一.auto1.auto的含义及使用2.auto使用注意事项3.范围for(重头戏)范围for注意事项 二.nullptr 一.auto 1.auto的含义及…

C语言学习系列-->看淡指针(1)

文章目录 一、概述二、指针变量和地址2.1 取地址操作符2.2 指针变量和解引用操作符2.2.1 指针变量2.2.2 拆解指针类型2.2.4 解引用操作符 2.3 指针变量的大小 三、指针变量的意义3.1 指针的解引用指针-整数 四、 const修饰指针五、指针运算5.1 指针- 整数5.2 指针-指针5.3 指针…

山东布谷科技直播平台搭建游戏开发技术分享:数据存储的重要意义

在市场上的热门的直播平台中,有很多小程序为用户提供各种各样的功能,这其中就有很多游戏小程序,当今社会独生子女众多,很多作为独生子女的用户都会去选择一个能够社交互动的APP来填补内心的空虚,而直播平台的实时互动的…

低代码助力传统制造业数字化转型策略

随着制造强国战略逐步实施,制造行业数字化逐渐进入快车道。提高生产管理的敏捷性、加强产品的全生命周期质量管理是企业数字化转型的核心诉求,也是需要思考的核心价值。就当下传统制造业的核心问题来看,低代码是最佳解决方案,那为…

【从零开始学习JAVA | 第四十五篇】反射

目录 前言: ​反射: 使用反射的步骤: 1.获取阶段: 2.使用阶段: 反射的应用场景: 使用反射的优缺点: 总结: 前言: Java中的反射是一项强大而灵活的功能&#xff0…

安装Qt选择组件

最近在做Qt相关的开发,首先搭建开发环境,刚开始对组件这块不是很熟悉,需要了解这方面的知识,写下来主要是方便记住关于选择组件的说明,Qt版本是最新的长期维护版本,版本号:6.5.2 一、选择要安装…

最新版本2023UI千月影视APP源码 开源完美版前后端完美匹配 后端基于ThinkPHP框架

最新版本的2023UI千月影视APP源码是一款开源的完美版应用程序,具备前后端完美匹配的特点。该应用的后端开发基于ThinkPHP框架,这是一个广泛使用的PHP开发框架,具有稳定性和安全性方面的优势。 2023UI千月影视APP是一款提供电影、电视剧、综艺…

一文盘点 Zebec 生态的几个利好预期

Zebec Protocol 是目前商业进展最快的流支付体系,也是推动流支付向 Web2 世界发展的主要生态。目前,其已经与包括 Visa、Master 等支付巨头展开了合作,以推出银行卡的方式进一步向金融发达地区推出 Zebec Card 以拓展业务,前不久其…

【Image captioning】ruotianluo/self-critical.pytorch之1—数据集的加载与使用

【Image captioning】ruotianluo/self-critical.pytorch之1—数据集的加载与使用 作者:安静到无声 个人主页 数据加载程序示意图 使用方法 示例代码 #%%from __future__ import absolute_import from __future__ import division from __future__ import print_…