Advertisement

基于Vue的微前端实现方案——乾坤(qiankun)

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

简介：
乾坤(Qiankun)是一款专为Vue.js应用设计的微前端框架，它允许开发者将大型单页应用程序拆分为多个独立可维护的服务，并通过动态加载的方式整合运行，从而提高开发效率和系统灵活性。 功能说明：1. 此实例包含有一个`qiankun-main`主应用和一个名为`qiankun-vue-child`的Vue子应用进行演示。2. 主应用能够跨域访问子应用系统。3. 项目中没有预安装node_modules，请执行npm install命令来安装所需依赖包。更新时间：2021-03-26。

全部评论 (0)

还没有任何评论哟~
客服
客服
客服关闭
  • 基于Vue的微前端实现方案——乾坤(qiankun)
    优质
    乾坤(Qiankun)是一款专为Vue.js应用设计的微前端框架，它允许开发者将大型单页应用程序拆分为多个独立可维护的服务，并通过动态加载的方式整合运行，从而提高开发效率和系统灵活性。 功能说明：1. 此实例包含有一个`qiankun-main`主应用和一个名为`qiankun-vue-child`的Vue子应用进行演示。2. 主应用能够跨域访问子应用系统。3. 项目中没有预安装node_modules，请执行npm install命令来安装所需依赖包。更新时间：2021-03-26。
     
  • qiankun乾坤：简洁快速的微前端完整解决方案
    优质
    简介：Qiankun是一款旨在提供微前端架构的JavaScript库，它能够帮助开发者以更高效的方式管理多个单页面应用（SPA），实现组件级别的拆分和独立部署。通过其简洁、灵活的设计理念，使得各个前端应用可以无缝集成在一个统一的应用框架中，从而极大地提升了开发效率与用户体验。 qiankun（乾坤）是一个用于实现微前端架构的库，它允许开发者将多个单页面应用聚合到一个主应用中运行。通过 qiankun，不同团队可以独立开发、部署各自的前端模块，并且这些模块可以在同一个浏览器窗口内相互通讯和协作。 该框架提供了丰富的配置选项来满足不同的业务场景需求，比如支持动态加载微应用、定制化资源预加载策略以及细粒度的生命周期管理等。此外，qiankun 还具备良好的兼容性和扩展性，能够与现有的前端技术和工具链无缝集成，为用户提供更加灵活和高效的应用开发体验。 总体而言，借助 qiankun（乾坤），企业可以更轻松地构建大规模、复杂度高的分布式前端系统，并且在保证业务连续性的前提下实现各个模块之间的解耦合。
     
  • vite-plugin-qiankun：保持Vite ES特性，轻松集成乾坤微前端子应用
    优质
    vite-plugin-qiankun是一款插件，它使在Vite环境中利用ES模块特性的乾坤微前端框架能够无缝集成，并简化了子应用的开发流程。 简介vite-plugin-qiankun：这是一个帮助应用快速接入乾坤的Vite插件，保留了Vite构建ES模块的优势，并提供一键配置功能，不会影响已有的Vite配置。 **快速开始** 1. 在 `vite.config.ts` 文件中安装并使用该插件： ```typescript // vite.config.ts import qiankun from vite-plugin-qiankun; export default { // 这里的 myMicroAppName 是子应用名，主应用注册时的 AppName 需保持一致 plugins: [qiankun(myMicroAppName)], // 生产环境需要指定运行域名作为base base: http://xxx.com/, } ``` 2. 在入口文件中添加乾坤生命周期配置： ```typescript // main.ts import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun; renderWithQiankun(qiankunWindow.__POWERED_BY_QIANKUN__); ``` 通过以上步骤，可以快速将应用接入乾坤微前端框架。
     
  • 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 是构建后的输出目录。
     
  • 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
     
  • 基于Vite4+Vue3+TypeScript+Monorepo的乾坤微前端后台管理系统（含OpenAI）项目.zip
    优质
    本项目为一个集成Vite 4、Vue 3和TypeScript技术栈，并采用Monorepo管理方式开发的乾坤微前端后台系统，内置与OpenAI接口交互功能。 基于vite4+vue3+TypeScript+qiankun2 +pnpm+ monorepo 构建的项目包括一个首页，该页面包含与OpenAI相关的功能。该项目封装了动态表单和表格列表，并提供了使用jsx(tsx)的示例代码。这是一个用于管理后台系统的微前端应用，在腾讯云上运行。
     
  • 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对象无法被完全隔离，因此建议不要将任何重要逻辑绑定到原型上以避免潜在的问题。
     
  • qiankun-simple-main-app-web: 基于React的微前端聚合系统（qiankun.js）
    优质
    qiankun-simple-main-app-web是一个基于React框架构建的微前端解决方案，采用qiankun.js实现应用模块化与独立开发部署，促进代码重用及团队协作。 主系统采用乾坤集成的React技术栈，子系统的技术栈不限制，并使用Docker进行部署。预览的技术栈如下： - 主系统：React + Antd + qiankun - 子系统：Vue 搭建主系统设计框架时先创建基础代码： ```shell npx create-react-app simple-main-app-web ``` 然后通过以下命令暴露配置，以更好地优化webpack打包： ```shell npm run eject ``` qiankun常用API包括`registerMicroApps`服务注册方法。具体如下： - `app1`: - 微服务名：需要与子系统中package.json中的name保持一致。 - entry: 子系统的入口地址（注意，此处应填写具体的URL路径）。