Advertisement

qiankun-vue:提供一套适用于Vue微应用开发的qiankun方案

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


简介:
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 是构建后的输出目录。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • qiankun-vueVueqiankun
    优质
    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
  • qiankun:为型前端快速、简单完整解决
    优质
    Qiankun是一款用于构建微前端架构的JavaScript库,它提供了简洁而强大的功能,使开发者能够轻松实现多个应用的并行开发和独立部署。 在中国传统文化中,“乾”代表天,“坤”代表地,因此“乾坤”指的是宇宙。 微前端的目标是利用不同的JavaScript框架与多个团队合作构建现代Web应用程序的技术、策略和方法。模块化对于大型应用来说至关重要。通过将庞大的系统分解为独立的子应用,我们可以在产品之间以及必要的组合中实现有效的分而治之,尤其是在涉及多团队协作的企业级应用中更为重要。然而,如果您尝试自己搭建这样的微前端架构体系,则可能会遇到一些棘手的问题: 1. 子应用程序应如何发布静态资源? 2. 主应用程序应该如何集成单个子应用程序?
  • qiankunTestByWu:基qiankun前端测试,涉及主与子vue-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对象无法被完全隔离,因此建议不要将任何重要逻辑绑定到原型上以避免潜在的问题。
  • QiankunVue-Element-Admin服务构建指南 V1.01
    优质
    本指南详细介绍了如何使用Qiankun微前端框架结合Vue和Element-Admin模板来搭建高效的微服务体系,适用于开发人员进行模块化、可扩展的应用程序设计与实现。 【基于 qiankun+vue-element-admin 打造微服务使用说明 v.1.01】 在当前数字化时代,微服务架构已经成为企业级应用开发的重要趋势。本段落将详细介绍如何利用 qiankun 和 vue-element-admin 结合,构建一个高效的微服务框架。qiankun 是阿里开源的一个微前端解决方案,它允许我们在同一个浏览器窗口内运行多个独立的前端应用;而 vue-element-admin 则是基于 Vue.js 和 Element UI 的后台管理系统模板,提供了丰富的功能和优雅的界面设计。 1. 前言 微服务架构的核心思想在于将单一的应用程序拆分为一组小型、独立的服务。每个服务专注于业务的一个特定领域,并且可以独立部署与扩展。qiankun 提供了集成这些微服务的能力,而 vue-element-admin 则提供了管理这些微服务的界面设计。 2. 微服务基座说明 基座是整个微服务框架的基础部分,它负责管理和协调各个微应用的加载和通信。 2.1 基座说明 基座应用通常是一个空壳项目,用于启动并管理其他微应用。它提供公共配置、路由和服务,并且与子应用进行交互。 2.2 注入依赖 在创建基座项目时,需要引入必要的库文件支持微前端功能。 2.3 安装 qiankun 需通过 npm 或 yarn 在项目中安装 qiankun: ``` npm install qiankun --save ``` 或 ``` yarn add qiankun ``` 2.4 安装 tmvc-base tmvc-base 是一个基座模板,包含了预设配置和结构。 ``` npm install tmvc-base --save ``` 2.5 修改页面操作 为支持微服务,在基座项目中添加子应用的挂载节点,并修改相应的路由配置。 2.6 路由说明 基座路由不仅包含自身的路由,还需要处理子应用的路由跳转。确保用户可以在不同的微服务之间平滑切换。 3. 微应用注入说明 3.1 注入应用说明 每个微应用都需要在基座中注册,并提供其启动和卸载逻辑。 以上就是使用 qiankun 和 vue-element-admin 构建微服务框架的基本步骤与关键知识点。通过这样的组合,开发者可以构建出模块化、可扩展且易于维护的后台管理系统,同时享受到微服务架构带来的诸多优势。在实践中根据具体需求对这些步骤进行调整和优化,则能打造出更符合自身业务场景的解决方案。
  • qiankun乾坤:简洁快速前端完整解决
    优质
    简介:Qiankun是一款旨在提供微前端架构的JavaScript库,它能够帮助开发者以更高效的方式管理多个单页面应用(SPA),实现组件级别的拆分和独立部署。通过其简洁、灵活的设计理念,使得各个前端应用可以无缝集成在一个统一的应用框架中,从而极大地提升了开发效率与用户体验。 qiankun(乾坤)是一个用于实现微前端架构的库,它允许开发者将多个单页面应用聚合到一个主应用中运行。通过 qiankun,不同团队可以独立开发、部署各自的前端模块,并且这些模块可以在同一个浏览器窗口内相互通讯和协作。 该框架提供了丰富的配置选项来满足不同的业务场景需求,比如支持动态加载微应用、定制化资源预加载策略以及细粒度的生命周期管理等。此外,qiankun 还具备良好的兼容性和扩展性,能够与现有的前端技术和工具链无缝集成,为用户提供更加灵活和高效的应用开发体验。 总体而言,借助 qiankun(乾坤),企业可以更轻松地构建大规模、复杂度高的分布式前端系统,并且在保证业务连续性的前提下实现各个模块之间的解耦合。
  • 详解万字图文:全面解析前端框架 qiankun 源码 – qiankun
    优质
    本篇文章通过详细的万字图文解析,深入浅出地剖析了微前端框架qiankun的核心源码和实现机制。 本段落将深入解析微前端框架 qiankun 的源码,在此之前先介绍什么是微前端。微前端是一种类似微服务的架构模式,它把微服务的思想应用到浏览器端,即将单页面应用程序从单一的整体应用转变为由多个小型独立的应用程序聚合而成的一个整体。这些小程序可以单独开发和部署,并且可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或 Git Tag、Git Submodule 等方式进行管理。qiankun(乾坤) 是蚂蚁金服推出的一款较为成熟的微前端框架,基于 single-spa 进行了二次开发,用于将 Web 应用由单一的整体应用转变为多个小型独立的应用程序聚合而成的一个整体。