vue2使用qiankun框架笔记

news2024/11/15 11:05:53

vue2使用qiankun框架笔记（更新中）

  • 前言
  • 1. 创建项目
    • 1.1 创建项目和选择预置
    • 1.2 记录项目结构和依赖
  • 2. 使用qiankun框架（让微应用如iframe般嵌入到主应用中）
    • 2.1 主应用下载乾坤，注册微应用
    • 2.2 改造主应用，创建微应用DOM入口
    • 2.3 改造微应用，创建主页
    • 2.4 将主应用和微应用建立通信（主要修改微应用）
    • 2.6 在主应用注册微应用路由，即可访问微应用页面
  • 3. 微应用之间的路由切换
    • 3.1 同个微应用之间的路由切换
    • 3.2 不同微应用之间的路由切换

前言

本篇文章是针对vue项目巨石应用，对 qiankuan框架 的一份使用归纳，中间会记录一些遇到的问题和解决方案，如果喜欢自己探索的同学，也可以自行前往qiankun官网学习。同时也欢迎各位同学在评论区，说明自己遇到的问题，一同探讨。

1. 创建项目

1.1 创建项目和选择预置

vue create 项目名称

项目预置，选择手动选择功能
在这里插入图片描述

以下是项目预置选项参照，为了避免eslint配置的麻烦，就不使用了。着重说明qiankun框架的使用。
在这里插入图片描述

1.2 记录项目结构和依赖

项目结构如下
在这里插入图片描述

package.json

{
  "name": "main-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

2. 使用qiankun框架（让微应用如iframe般嵌入到主应用中）

2.1 主应用下载乾坤，注册微应用

主应用下载qinakun：

npm i qiankun -S

主应用的main.js中注册微应用。
在这里插入图片描述

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

import { registerMicroApps, start } from "qiankun";

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

// 根据路由配置
registerMicroApps([
  {
    name: "micro1", // 必须与微应用注册名字相同
    entry: "http://localhost:8081", // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径
    container: "#micro-app", // 微应用挂载的节点
    activeRule: "/micro1", // 当访问路由为 /micro-vue 时加载微应用
    props: {
      msg: "我是来自主应用的值-micro1", // 主应用向微应用传递参数
    },
  },
  // {
  //   name: "micro2-app",
  //   entry: "http://localhost:8082",
  //   container: "#micro-app",
  //   activeRule: "/micro2",
  //   props: {
  //     msg: "我是来自主应用的值-micro2",
  //   },
  // },
]);
start();

但是此时主应用还没有相关的container，让我们进行改造。

2.2 改造主应用，创建微应用DOM入口

（1）为了方便编写样式，下载sass和sass-loader，当然你也可以使用其他方案。

npm i sass
npm i sass-loader

（2）删除views文件夹中的原有文件，添加home.vue，修改路由文件和App.vue
在这里插入图片描述

router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "about" */ '../views/home.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

views/home.vue：

<template>
  <div class="home-con">
    <div class="nav-con">1</div>
    <div class="bottom-con">
      <div class="menu-con"></div>
      <div class="main-con" id="micro-app"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>

<style lang="scss" scoped>
.home-con{
  width: 100%;
  height: 100%;
  .nav-con{
    width: 100%;
    height: 50px;
    background: #359e4a;
  }
  .bottom-con{
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    .menu-con{
      flex: 2;
      background: #2596d3;
    }
    .main-con{
      flex: 8;
      border: #2596d3 solid 1px;
    }
  }
}
</style>

App.vue：

<template>
  <div id="app" class="main-app">
    <router-view/>
  </div>
</template>

<style>
html, body, #app{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>

在这里插入图片描述

此时重新运行项目，我们就有了一个很丑，但是结构清晰的主应用home页面。

2.3 改造微应用，创建主页

（1）下载sass和sass-loader

npm i sass
npm i sass-loader

（2）删除views文件夹中的原有文件，添加index.vue，修改路由文件和App.vue

在这里插入图片描述
views/index.vue：

<template>
  <div class="micro-con">micro1-app</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.micro-con {
  width: 100%;
  color: red;
}
</style>

router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'index',
    component: () => import(/* webpackChunkName: "about" */ '../views/index.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

App.vue：

<template>
  <div id="microApp" class="micro1-app">
    <router-view/>
  </div>
</template>

<style>
html, body, #microApp{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>

在这里插入图片描述

此时你就拥有了一个简单的应用主页。

2.4 将主应用和微应用建立通信（主要修改微应用）

此模块内容可参照 qiankun-项目实践

（1）主应用尝试直接调用微应用
在这里插入图片描述

可以看到，主应用无法直接和微应用建立联系，有跨域问题。所以需要对微应用进行修改

（2）在 src 目录新增 public-path.js：

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

（3）入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
  	// micro1和主应用的registerMicroApps配置对应
    base: window.__POWERED_BY_QIANKUN__ ? '/micro1/' : '/',
    mode: 'history',
    routes,
  });

  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

（3）打包配置修改（vue.config.js）：

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', // 允许跨域
    },
    port: 8081 // 端口号自定义，和主应用中main.js的registerMicroApps的配置一致即可。
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
    },
  },
};

（4）修改微应用router/index.js：
在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/index',
    name: 'index',
    component: () => import(/* webpackChunkName: "about" */ '../views/index.vue')
  }
]

export default routes

在这里插入图片描述

这一步完成后，访问 http://localhost:8080/micro1/index，会有错误提示：
application 'micro1' died in status LOADING_SOURCE_CODE: [qiankun]: Target container with #micro-app not existed while micro1 loading!
看到这里，恭喜你，快成功了，看下一步 2.6 解决。

在这里插入图片描述

2.6 在主应用注册微应用路由，即可访问微应用页面

在主应用注册微应用路由，完成这步后，主应用就可以使用对应路由规则，访问微应用micro1-app上的路由页面了。
在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "about" */ '../views/home.vue'),
    children: [
      { path: "/micro1/*", name: "micro1" },
    ]
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在这里插入图片描述
此时打开http://localhost:8080/micro1/index，发现微应用的页面出现在了主应用中。

3. 微应用之间的路由切换

3.1 同个微应用之间的路由切换

直接使用 this.$router.push 即可。

3.2 不同微应用之间的路由切换

参照官网 https://qiankun.umijs.org/zh/faq#微应用之间如何跳转，有3种方式，最简单的方式就是通过 window.location.href 进行跳转，比如：

<template>
  <div class="micro-con">
    <div>micro1-app</div>
    <div @click="goMicro2()">点击，切换到micro2-app</div>
  </div>
</template>

<script>
export default {
  methods: {
    goMicro2() {
      // this.$router.push 方法只能在同个微应用中使用，微应用之间可以参照 https://qiankun.umijs.org/zh/faq#%E5%BE%AE%E5%BA%94%E7%94%A8%E4%B9%8B%E9%97%B4%E5%A6%82%E4%BD%95%E8%B7%B3%E8%BD%AC
      window.location.href = 'http://localhost:8080/micro2/index'
    }
  }
}
</script>

<style lang="scss" scoped>
.micro-con {
  width: 100%;
  color: red;
}
</style>

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

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

相关文章

springboot中根据id更新用户信息

springboot中根据id更新用户信息

根据查询到详情&#xff0c;进行回想到弹窗&#xff0c;然后修改信息&#xff0c;保存更新用户信息 实现效果 代码实现 controller代码 /*** 修改员工*/PutMappingpublic Result update(RequestBody Emp emp) {log.info("修改员工操作 {}", emp);empService.updat…
阅读更多...
深度学习（六）-循环神经网络

深度学习（六）-循环神经网络

标准CNN模型的不足 假设数据之间是独立的。标准CNN假设数据之间是独立的&#xff0c;所以在处理前 后依赖、序列问题&#xff08;如语音、文本、视频&#xff09;时就显得力不从心。这一类数 据&#xff08;如文本&#xff09;和图像数据差别非常大&#xff0c;最明显的差别莫…
阅读更多...
深度孤立森林 Deep Isolation Forest论文翻译（上）

深度孤立森林 Deep Isolation Forest论文翻译（上）

README 绝大部分是自己翻译自己手打的&#xff0c;少部分参考有道翻译&#xff0c;主要是想仔细再读一遍&#xff0c;顺便就打出来了。这篇论文内容比较多&#xff0c;有代码&#xff0c;原作者有github和知乎账号&#xff0c;感兴趣可以找一下。欢迎讨论和批评指正。 用于异…
阅读更多...
设计模式及创建型模式-python版

设计模式及创建型模式-python版

1 架构模式与设计模式 架构模式搞层次的设计模式&#xff0c; 描述系统整体结构和组织方式&#xff0c;设计模式是针对某个问题的解决方案&#xff0c;是一种解决问题的思路。 2 设计模式的分类 2.1 创建型模式 单例模式&#xff0c;工厂方法模式&#xff0c;抽象工厂模式&…
阅读更多...
无人机反制：无线电侦测设备技术详解

无人机反制：无线电侦测设备技术详解

无人机反制技术中的低空安全综合管理平台&#xff0c;作为守护低空安全的重要工具&#xff0c;集成了多种先进的技术手段和管理功能&#xff0c;实现了对无人机等低空飞行器的全方位、无死角监控与反制。以下是对该技术平台的详细解析&#xff1a; 一、技术架构与核心功能 低…
阅读更多...
HTB-bike(SSTI模版注入)

HTB-bike(SSTI模版注入)

前言 大家好&#xff0c;我是qmx_07,今天给大家讲解bike靶场 渗透过程 信息搜集 服务器开放了 22 ssh 和 http80端口 Wappalyzer 介绍&#xff1a;Wappalyzer是一种浏览器扩展程序&#xff0c;用于识别正在访问的网站所使用的技术栈和工具&#xff0c;比如使用的web框架&…
阅读更多...
紫光同创PDS自动构建

紫光同创PDS自动构建

1.开发背景 随着开发进度的不断迭代&#xff0c;需要对代码实行管控&#xff0c;FPGA代码管控也很重要&#xff0c;这个篇章主要是对紫光同创 PDS 开发环境下实现代码自动构建功能 2.开发需求 设计实验&#xff1a; 1&#xff09;点击一个脚本自动编译工程 2&#xff09;工程…
阅读更多...
Fréchet Inception Distance（FID）原理

Fréchet Inception Distance（FID）原理

原理概述&#xff1a; FID 的核心思想是通过比较真实图像和生成图像在 Inception 模型特征空间中的分布差异&#xff0c;来评估生成模型的性能。它假设从真实数据和生成数据中提取的特征都近似服从高斯分布。 具体步骤&#xff1a; 特征提取&#xff1a;使用预训练的 Incepti…
阅读更多...
动态加载使用Appsflyer报错Attribution data for this AppsFlyer ID is not available

动态加载使用Appsflyer报错Attribution data for this AppsFlyer ID is not available

1. 使用动态classloader加载AF SDK 日志&#xff1a;不能获取到非自然量 2024-09-03 18:07:22.350 2114-2114 ddup com.pn.cal I 找到AssetManager 2024-09-03 18:07:22.350 2114-2114 ddup com.pn.cal …
阅读更多...
免费分享：中国煤炭资源分布图

免费分享：中国煤炭资源分布图

数据详情 中国煤炭资源分布图 数据属性 数据名称&#xff1a;中国煤炭资源分布图 空间位置&#xff1a;中国 ​ 下载方法 打开数字地球开放平台网站&#xff0c;需要先注册登录&#xff0c;登录完成后&#xff0c;选择服务与支持下的资源下载&#xff0c;搜索并点击进入本…
阅读更多...
Python加载 TorchScript 格式的 ResNet18 模型分类该模型进行预测并输出预测的类别和置信度

Python加载 TorchScript 格式的 ResNet18 模型分类该模型进行预测并输出预测的类别和置信度

首先加载预训练的 ResNet18 模型。将模型设置为评估模式&#xff0c;以确保特定层&#xff08;如 Dropout 和 BatchNorm&#xff09;在评估时具有确定性的行为。创建一个形状为 (1, 3, 224, 224) 的随机张量作为示例输入。使用 torch.jit.trace 函数追踪模型在给定示例输入上的…
阅读更多...
渗透测试靶机----DC系列 DC-1

渗透测试靶机----DC系列 DC-1

渗透测试靶机----DC系列 DC-1 开启靶机&#xff0c;依旧是登陆窗&#xff0c;平平无奇 扫描ip&#xff0c;扫描端口&#xff0c;服务等信息 可以看到这里存在80服务&#xff0c;访问看看 非常明显&#xff0c;这里存在一个Drupal 的cms 并且是一个登录框&#xff0c;思路打开 …
阅读更多...
VMware Fusion 13.6 发布下载，新增功能概览

VMware Fusion 13.6 发布下载，新增功能概览

VMware Fusion 13.6 发布下载&#xff0c;新增功能概览 VMware Fusion 13.6 for Mac - 领先的免费桌面虚拟化软件 适用于基于 Intel 处理器和搭载 Apple 芯片的 Mac 的桌面虚拟化软件 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-fusion-13/&#xff0c;查看最…
阅读更多...
位运算专题——常见位运算位图的使用力扣实战应用

位运算专题——常见位运算位图的使用力扣实战应用

目录 1、常见位运算 2、算法应用【leetcode】 2.1 判断字符是否唯一【面试题 】 2.1.1 算法思想【位图】 2.1.2 算法代码 2.2 只出现一次的数字 III 2.2.1 算法思想 2.2.2 算法代码 2.3 丢失的数字 2.3.1 算法思想 2.3.2 算法代码 2.4 两整数之和 2.4.1 算法思想 2…
阅读更多...
C语言之猜数字小游戏

C语言之猜数字小游戏

哈喽&#xff0c;大家好&#xff01;我是冰淇淋加点糖。今天我们来用前面所学的知识来开发一个猜数字的小游戏&#xff0c;锻炼我们的编程能力和编程思维。 猜数字小游戏功能简介 1.随机生成一个1-100的数字。 2.玩家用户开始猜数字。 > 猜大了&#xff0c;提醒猜大了…
阅读更多...
【爬虫软件】采集抖音博主的主页发布作品

【爬虫软件】采集抖音博主的主页发布作品

这是我用python开发的抖音爬虫采集软件&#xff0c;可自动按博主抓取已发布视频。 软件界面截图&#xff1a; 爬取结果截图&#xff1a; 几点重要说明&#xff1a; 软件使用演示视频&#xff1a; https://www.bilibili.com/video/BV1Kb42187qf 完整讲解文章&#xff1a; ht…
阅读更多...
虚幻5|技能栏UI优化（3）——优化技能UI并实现显示背景UI，实现技能界面设计，实现技能栏的删除和添加

虚幻5|技能栏UI优化（3）——优化技能UI并实现显示背景UI，实现技能界面设计，实现技能栏的删除和添加

实现技能栏添加&#xff1a;将技能界面里的技能拖到技能栏格子 一.调整&#xff0c;在拖出技能的时候&#xff0c;还会有边框 1.打开拖拽的技能格子UI 除了技能按钮&#xff0c;下面的子级都放到垂直框的子级&#xff0c;然后删除技能按钮 2.将垂直框替换成包裹框 你会发现有…
阅读更多...
OS_线程

OS_线程

2024.07.01&#xff1a;操作系统线程学习笔记 第7节 线程 7.1 线程的基本概念7.1.1 单线程地址空间 vs 多线程地址空间 7.2 线程的状态与转换&#xff08;照搬进程设计&#xff09;7.2.1 线程的3种基本状态 7.3 线程管理中的数据结构7.3.1 线程的用户栈7.3.2 线程的内核栈 7.4 …
阅读更多...
用户时长进入“零和”时代，App们如何借Push胜出？

用户时长进入“零和”时代，App们如何借Push胜出？

作者 | 曾响铃 文 | 响铃说 激烈的市场竞争、快速变化的用户需求、层出不穷的新赛道新玩法……对如今移动互联网的App开发者而言&#xff0c;寻求用户增长的压力变得越来越大。 而与此同时&#xff0c;Push作为促进用户增长的关键手段之一&#xff0c;其执行过程中的诸多问题…
阅读更多...
坑——fastjson将字符串转到带枚举的java对象

坑——fastjson将字符串转到带枚举的java对象

fastjson将不同的字符串转换成带枚举的java对象时&#xff0c;不同的字符串值转换成java对象的结果不同&#xff1b; 测试用fastjson版本&#xff1a; <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <ver…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023