程序员经验分享-hwhale

搭配 umijs+vue的项目实战 以umijs为主应用+vue微应用

2023-11-16

搭配 umijs+vue的项目实战 以umijs为主应用+vue微应用

1、首先我们需要在项目中下载qiankun	


yarn命令 ： yarn add @umijs/plugin-qiankun -D
npm 命令 ：npm  i plugin-qiankun -S

umi.js配置qiankun

**第一步：**注册子应用 在.umirc.ts增加qiankun的配置项
在这里插入图片描述
如果你的项目page跟目录下存在document.ejs文件 需要把原有的div root注释
在这里插入图片描述

**第二步：**装载子应用 在 .umirc.ts routes配置
在这里插入图片描述

这里我们需要注意的是 name属性和microApp属性 保持跟注册子应用时的name属性一致
然后在项目根目录下创建app.ts
在这里插入图片描述
umi3qinakun配置参考文档
****

Vue2.x微应用

以 vue-cli 3+ 生成的 vue 2.x 项目为例
首先我们需要在src目录下新增 public-path.js
在这里插入图片描述
2入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。
在这里插入图片描述
3打包配置修改（vue.config.js）
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

javascript

前端

搭配 umijs+vue的项目实战 以umijs为主应用+vue微应用 的相关文章

随机推荐

  • Pytorch总结十三之 神经网络模型：批量归一化、ResNet、DenseNet

    Pytorch总结十三之 神经网络模型 ResNet DenseNet 本节将介绍批量归一化 batch normalization 层 它能让较深的神经网络的训练变得更加容易 在实战Kaggle比赛 预测房价里 我们对输入数据做了标准化处

  • 测试用例基础 12_02

    回顾 测试用例怎么写 测试点 不包含测试步骤 只有测试什么 只有测什么功能 预期的结果 为了提高作业的效率 测试用例只写测试点 直接写在Xmind 或者Excel 效率会比较高 面试的时候 就直接说测试点 是为了有限的时间 完整的测试用例

  • Ubuntu15.04 安装卡在logo界面不动

    Ubuntu15 04 安装卡在logo界面不动 进度点卡死不动 原因主要是双显卡 电源设置项默认不合理 导致安装失败 选择USB硬盘 uefi 进入到一个有四个选项的界面 分别是 1 try Ubuntu without install

  • ChatGPT颠覆的第三个行业-教育领域

    引言 随着人工智能技术的飞速发展 越来越多的行业受到了影响 ChatGPT作为一种领先的自然语言处理技术 在内容创作 在线客服等领域取得了显著的成果 如今 它正开始进入另一个领域 教育 本文将探讨ChatGPT如何改变教育行业 以及它为教育

  • 3D旋转 相册

    效果展示 代码逻辑

  • STM8 学习笔记15：SPI

    SPI 1 概述 SPI 串行外设设备接口 Serial Peropheral Interface 是一种高速的 全双工 串行 同步的通信总线 2 特性 主或从操作 8 或 16 位传输帧格式 通信速率一般在 50MHz 以下 可编程的时钟

  • mac 安装 php 与 hyperf 框架依赖的扩展并启动 gptlink 项目

    m系列 mac 安装 php 与 hyperf 框架依赖的扩展并启动 gptlink 项目 gptlink 项目是一个前后端一体化的 chatgpt 开源项目 gptlink 项目地址 https github com gptlink gp

  • 关于EPLAN二次开发，Visual Studio 2019开发环境设置

    关于EPLAN二次开发 Visual Studio 2019开发环境设置 您指的拥有 准备工作 参考入门操作 转载 参考入门 http blog sina com cn s blog 9a1ad43a01013n6v html 1 准备工具

  • Verilog对数据进行四舍五入（round）与饱和（saturation）截位

    设计经验 5 Verilog对数据进行四舍五入 round 与饱和 saturation 截位 一 软件平台与硬件平台 软件平台 操作系统 Windows 8 1 64 bit 开发套件 Vivado2015 4 2 Matlab2016a

  • ant design pro v5 req.body获取数据为空的问题

    问题描述 需要发送请求修改mock里面MaterialList的数据 在service的方法中可以打印出正确的需传递的参数 但是在mock里面使用 res send req body 返回的却是 原代码 services ant desig

  • 【电子电路】MOS选型技巧

    MOSFET选型技巧 导语 MOSFET是电路中非常常见的元件 常用于信号开关 功率开关 电平转换等各种用途 由于MOSFET的型号众多 应用面广 所以MOSFET的选型需要考虑的因素也比较多 许多工程师在选型时感觉无从下手 今天小编就来分

  • 爬虫之JS的解析

    JS的解析 学习目标 了解 定位js的方法 了解 添加断点观察js的执行过程的方法 应用 js2py获取js的方法 1 确定js的位置 对于前面人人网的案例 我们知道了url地址中有部分参数 但是参数是如何生成的呢 毫无疑问 参数肯定是js

  • 区块链开源实现HYPERLEDGER FABRIC架构详解

    写在前面 今天看了一篇讲解fabric架构的文章 感觉还不错 将fabric里的MSP和交易流程都讲的很明白 遂将文章在此分享 各位也可以直接看原文 也可以看我的 其中穿插了些本人拙见 原文地址 http www taohui pub 20

  • Going Deeper with convolutions

    Going Deeper with convolutions 转载请注明 http blog csdn net stdcoutzyx article details 40759903 本篇论文是针对ImageNet2014的比赛 论文中的方

  • 【原动力.降本增效】读后有感

    自我介绍 目前在一家算法加密公司担任项目经理 是从微信公众号火爆的那个年代开始接触 IT 互联网行业的 我的技术栈就不在这里介绍了 比较杂 因为前几家公司都是中小公司 那时候老板恨不得把设计也给开了 让你连画图带写页面 带写服务器后端功能

  • 慢SQL的致胜法宝

    大促备战 最大的隐患项之一就是慢SQL 对于服务平稳运行带来的破坏性最大 也是日常工作中经常带来整个应用抖动的最大隐患 在日常开发中如何避免出现慢SQL 出现了慢SQL应该按照什么思路去解决是我们必须要知道的 本文主要介绍对于慢SQL的排查

  • 【解决win10 64位系统下ISE14.7闪退问题】

    解决win10 64位系统下ISE14 7闪退问题 在FPGA开发中 使用Xilinx ISE设计工具可以快速进行开发 但是在使用win10 64位系统下的ISE14 7版本时 可能会遇到闪退的问题 这个问题很麻烦 但是可以通过一些简单的步

  • Cocos Shader实现纹理的动态波浪效果

    一 效果预览 通过滑动条可调节波浪频率的快慢 二 实现原理 对当前uv坐标进行线性 三角函数的混合变换 结合动态变化的时间值 得到一个新的采样坐标 使纹理呈现出动态 起伏不定的波浪形态 Shader中的关键代码如下 得到波浪效果的新坐标 v

  • VS code-设置问题

    起因 VS code本来是默认支持禁用非活动区域代码着色的 但我不知道怎么点取消了 今天又设置回来 因为感觉这样看代码方便点 方法 如果设置项旁边还有灰色小字提示与工作区不同 需要点一下将工作区设置也勾上 我就是只设置了用户区 没设置工作区

  • 搭配 umijs+vue的项目实战 以umijs为主应用+vue微应用

    这里写目录标题 搭配 umijs vue的项目实战 以umijs为主应用 vue微应用 umi js配置qiankun Vue2 x微应用 搭配 umijs vue的项目实战 以umijs为主应用 vue微应用 1 首先我们需要在项目中下载

热门标签