当前位置: 首页 > news >正文

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.lryc.cn/news/120077.html

相关文章:

  • Win7累积补丁更新包_UpdatePack7R2-23.8.10
  • 【二叉树】1-5,理论基础、前中后序遍历的递归法和迭代法、层序遍历
  • Mybatis-plus动态条件查询QueryWrapper的使用
  • Redis安装配置远程连接
  • pycharm中配置conda
  • matlab解常微分方程常用数值解法1:前向欧拉法和改进的欧拉法
  • SQL | 计算字段
  • leetcode做题笔记67
  • fastadmin 自定义搜索分类和时间范围
  • Oracle Data Redaction与Data Pump
  • 设计模式(6)原型模式
  • pywinauto结合selenium实现文件上传
  • 【Java多线程学习7】Java线程池技术
  • VMware虚拟机NAT模式Ubuntu无法上网解决方案
  • Linux中无法忘记mysql密码处理办法
  • vue 使用 el-upload 上传文件(自动上传/手动上传)
  • 服务器遭受攻击之后的常见思路
  • C语言学习笔记 使用vscode外部console出现闪退-12
  • 从Spring源码看Spring如何解决循环引用的问题
  • 03 - 通过git log可以查看版本演变历史
  • 【图论】单源最短路
  • 闻道网络:2023宠物消费网络营销洞察数据报告(附下载)
  • Docker 安装和架构说明
  • 101. 对称二叉树
  • cmake应用:集成gtest进行单元测试
  • 静态时序分析与时序约束
  • YOLOv5基础知识入门(3)— 目标检测相关知识点
  • 10个AI绘图生成器让绘画更简单
  • 干货满满的Python知识,学会这些你也能成为大牛
  • 【Leetcode】155. 最小栈、JZ31 栈的压入、弹出序列