Advertisement

qiankunTestByWu:基于qiankun的微前端方案测试,涉及主应用与子应用由vue-cli 3构建的替换测试案例

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型:ZIP


简介:
qiankunTestByWu是一个用于验证Qiankun框架下微前端方案功能的项目。该项目通过使用Vue-cli 3技术创建并切换不同的主应用和子应用,以测试其在实际部署中的兼容性和稳定性。 针对Node.js v12.13.0版本,在主应用采用vue-cli脚手架的情况下,重新创建了一个名为demo的项目。该项目包含两个主要的应用:admin-wu 和 microfrontend-demo;同时有两个子应用分别为sub-app1和sub-app2。 已经解决了以下问题: 1. 子应用与主应用、子应用之间的跨域访问。 2. 将主应用程序改造为基于webpack的Vue应用。 3. 实现了通过路由切换来加载不同的子应用功能。 4. 确保每个子应用都能够正确地加载qiankun框架,并利用其生命周期管理特性。 5. 设计并实现了在单独的子应用内部进行路由切换的功能。 6. 部署方面,对于子应用程序可以沿用以前的标准发布流程部署而无需特别处理。 当使用vue-cli3生产环境部署时遇到了跨域问题,通过调整nginx配置解决了此问题。此外,在qiankun框架下实现了JS变量的隔离(利用了JS Sandbox功能),确保每个子应用都有独立的生命期管理,并且在任何时候只会有一个活动的子应用实例存在。然而需要注意的是,window对象无法被完全隔离,因此建议不要将任何重要逻辑绑定到原型上以避免潜在的问题。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • qiankunTestByWuqiankunvue-cli 3
    优质
    qiankunTestByWu是一个用于验证Qiankun框架下微前端方案功能的项目。该项目通过使用Vue-cli 3技术创建并切换不同的主应用和子应用,以测试其在实际部署中的兼容性和稳定性。 针对Node.js v12.13.0版本,在主应用采用vue-cli脚手架的情况下,重新创建了一个名为demo的项目。该项目包含两个主要的应用:admin-wu 和 microfrontend-demo;同时有两个子应用分别为sub-app1和sub-app2。 已经解决了以下问题: 1. 子应用与主应用、子应用之间的跨域访问。 2. 将主应用程序改造为基于webpack的Vue应用。 3. 实现了通过路由切换来加载不同的子应用功能。 4. 确保每个子应用都能够正确地加载qiankun框架,并利用其生命周期管理特性。 5. 设计并实现了在单独的子应用内部进行路由切换的功能。 6. 部署方面,对于子应用程序可以沿用以前的标准发布流程部署而无需特别处理。 当使用vue-cli3生产环境部署时遇到了跨域问题,通过调整nginx配置解决了此问题。此外,在qiankun框架下实现了JS变量的隔离(利用了JS Sandbox功能),确保每个子应用都有独立的生命期管理,并且在任何时候只会有一个活动的子应用实例存在。然而需要注意的是,window对象无法被完全隔离,因此建议不要将任何重要逻辑绑定到原型上以避免潜在的问题。
  • qiankun-vue:提供一套适Vue开发qiankun
    优质
    qiankun-vue是一款专为Vue.js框架设计的微前端解决方案。它提供了全面的库和工具,帮助开发者轻松实现单体应用向微前端架构的转变,有效提升系统灵活性与可维护性。 简介 分享此demo旨在帮助学习及解决项目开发中的问题。该示例仅使用了VUE框架,并且整个项目的插件安装统一通过最外层的package.json文件来保证一致性,对于特定第三方插件则单独在项目对应的package.json中进行配置。路由模式主要采用history + [hash || history]的方式,部分子项目还采用了CDN加速。 此demo解决了以下问题: - 多应用间公用组件开发 - 统一的VUE配置环境开发 - 切换应用后无需重新加载 安装步骤如下: ```bash $ npm install $ npm run projects:install $ npm run projects:start ``` 主应用地址为:`http://localhost:8090` 打包命令: ```bash $ npm run projects:build ``` 目录结构说明: - root 目录下包含 common 子目录,其中 components 文件夹存放公用组件; - layouts 用于布局文件管理; - dist 是构建后的输出目录。
  • Vue实现——乾坤(qiankun)
    优质
    乾坤(Qiankun)是一款专为Vue.js应用设计的微前端框架,它允许开发者将大型单页应用程序拆分为多个独立可维护的服务,并通过动态加载的方式整合运行,从而提高开发效率和系统灵活性。 功能说明:1. 此实例包含有一个`qiankun-main`主应用和一个名为`qiankun-vue-child`的Vue子应用进行演示。2. 主应用能够跨域访问子应用系统。3. 项目中没有预安装node_modules,请执行npm install命令来安装所需依赖包。更新时间:2021-03-26。
  • qiankun-micro-app:qiankun实践部署
    优质
    本项目展示了如何使用Qiankun框架进行微前端架构的应用开发和部署,包括多个独立应用在同一个页面内的并行加载和卸载技术。 在使用 Qiankun 进行微前端应用开发与部署的过程中,主要涉及到主应用和子应用两部分的处理。 **代码仓库结构及编译命令** 假设你的项目有三个仓库:`portal`, `app1`, 和 `app2`. 在这些目录中执行相应的命令来启动或构建应用程序: - 开发模式: - 对于 portal 应用,运行 `yarn install` 然后使用 `yarn start`. - 对于 app1 或者 app2, 运行 `npm install`, 接着运行 `npm run dev`. - 生产模式: - 在 portal 目录中执行构建命令为 `yarn build`. - 而对于子应用(app1 和 app2),则分别使用 `npm run build` 来进行打包。 **主应用配置** 在你的主应用的 JavaScript 文件里,你需要引入 Qiankun 并注册各个子应用。同时,在 HTML 页面中添加导航逻辑以支持不同页面间的跳转: ```html QianKun Example
  • Vue CLI 3解决实现
    优质
    本文介绍了如何使用Vue CLI 3来构建适用于多种终端的应用程序,包括技术方案和实践方法。 在处理应用场景页面的PC端与移动端兼容性问题时,我以前的做法是通过媒体查询来判断设备大小,并编写两套或三套CSS代码以适应不同屏幕尺寸,这种方法虽然有效但稍微有些繁琐。后来了解到flexible.js脚本并稍作修改后,基本能满足我的需求。 为了进一步优化样式单位的处理,可以使用postcss-px2rem插件将像素值转换为相对长度单位(REM),这有助于提高页面在不同设备上的适应性。要在Vue项目中应用此插件,请确保已安装`postcss-px2rem`并配置到`vue.config.js`文件中: ```javascript module.exports = { css: { // 启用 CSS modules (默认为 false) modules: false, loaderOptions: { postcss: { plugins: [ require(postcss-px2rem)({ remUnit: 16, // 可根据实际情况调整 }), ], }, }, } } ``` 这样配置后,项目中的像素值会自动转换为REM单位,从而简化了响应式布局的开发过程。
  • 程序
    优质
    《应用程序测试方案》是一份系统性文档,详细规划了软件开发过程中应用的各项测试策略、流程及标准,旨在确保最终产品的质量和稳定性。 APP测试文档,仅供个人参考使用。如有雷同,纯属巧合。
  • 企业网络题含答
    优质
    本书《企业网络构建与应用测试题》提供了丰富的试题及其详细解答,旨在帮助读者深入理解并掌握企业级网络的设计、配置和优化技术。通过大量的练习题,读者可以全面检验自己的学习成果,并为实际工作中的挑战做好准备。适用于希望提升自身技能的IT专业人士及在校学生。 企业网络搭建及应用试题附答案,全国职业学校技能大赛计算机类比赛的试题。
  • 程序——通
    优质
    《应用程序测试方案——通用版》是一套全面的应用程序质量保障工具书,涵盖功能、性能及安全等多方面测试方法与策略。适合软件开发团队参考使用。 大体上的APP测试方案通常适用于一般的应用软件。
  • 为Web软件
    优质
    本课程专注于教授如何为Web应用程序开发有效的软件测试用例,涵盖测试策略、方法及最佳实践。适合希望提升Web应用质量保证技能的学习者。 为Web应用程序创建软件测试用例 本段落将涵盖以下内容: 1. jWebUnit简介 2. jWebUnit API:进一步观察 3. 下载jWebUnit,并在Eclipse中配置它 4. 构建示例应用程序 5. 运行示例应用程序 6. 结束语 如果您正在寻找一种将自动测试技术应用于web开发的方法,本段落或许可以帮到您。