Qiankun

rabow——umi-qiankun微服务框架企业实践(4)

rabowl命令解析项目初始化完成后，可以直接在主目录下通过npmlink生成rabowl全局命令。也可以通过yarn在主目录执行rablow命令。本文通篇将使用yarnrabowl来讲解rabowl命令。获取命令行目录yarnrabowl-h。指令:cca(create-child-app)创建子应用Options:--app要创建的子应用名称--targetDir子应用所在目录，默认是./pa
Rasir·2023-09-07 02:36

基于qiankun的微前端最佳实践-通信篇（Vuex）

大家好~~在开始介绍qiankun的应用通信之前，我们需要先了解微前端架构如何划分子应用。在微前端架构中，我们应该按业务划分出对应的子应用，而不是通过功能模块划分子应用。
彩云Coding·2023-09-06 03:19

微前端qiankun在子应用中引入百度地图时报错解决

报错：解决办法：修改主应用中的start方法start({prefetch:false,strictStyleIsolation:true,})修改为start({prefetch:false,strictStyleIsolation:true,excludeAssetFilter:(assetUrl)=>{constwhiteList=[];constwhiteWords=['baidu','m
前端的南姐·2023-09-05 06:15

Umi + qiankun 实现动态加载子应用路由

前言  最近在做项目重构的事情，原来的一个Vue项目有几十个菜单，项目大的令人发指，所以准备重构，使用了umi+qiankun的方式，子应用使用了vue和react两个类型的框架。
恪晨·2023-09-04 23:06

vue3+ts+qiankun

vue3+ts+qiankun项目：https://gitee.com/robotchange/robot-ts-micro.git脚手架工具：robot-auto-script操作栏详情.png弹框详情
robotking·2023-09-03 23:40

解决阿里qiankun微应用资源无法加载

本文说下我们在用阿里微前端框架qiankun，遇到的一些问题，以及一些巧妙的解决办法。背景因为接入微前端很长时间了，导致现在的微应用变成了实际意义上的主应用，主应用反而没有多少功能。
洲上牧童·2023-08-31 11:22

qiankun 子应用选择器失效问题

场景在基于qiankun的微前端架构下开发时，子应用代码内的选择器全部失效。例如getElementById()等方法是获取不到子应用的元素的。
鹤仔z·2023-08-29 03:42

使用vite-plugin-qiankun插件， 将应用快速接入乾坤（vue3 vite）

qiankun官网vite-plugin-qiankun插件github地址：vite-plugin-qiankun主应用1、安装乾坤$yarnaddqiankun#或者npmiqiankun-S2、在主应用中注册微应用
菜鸟小记·2023-08-23 18:46

giankun+vue微前端实战配置流程详解，包含基座配置、子应用配置、参数传递

qiankun集成指引文档qiankun是一个生产可用的微前端框架，它基于single-spa，具备js沙箱、样式隔离、HTMLLoader、预加载等微前端系统所需的能力。
我是小菜鸟1219·2023-08-20 15:40

【qiankun】微前端在项目中的具体使用

1、安装qiankunnpminstallqiankun--save2、主应用中注册和配置qiankun在主应用的入口文件main.ts中，引入qiankun的注册方法：import{registerMicroApps
湛海不过深蓝·2023-08-20 06:55

微前端 - qiankun

qiankun是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。本文主要记录下如何接入qiankun微前端。
沉默lu·2023-08-19 11:04

可能是多端适配性最好的微前端框架

引子对微前端方向有了解的同学可能都看过qiankun的文档，深入的同学估计也去翻过其代码和single-spa的源码。
·2023-08-16 17:16

微前端框架 之 qiankun

qiankun文档:快速上手微前端:是最近一年国内前端领域被频繁提及的关键字，虽然它并不是一个全新的领域/技术，但很显然在当今越来越多的前端应用即将步入第3个、第5个甚至更久的年头的背景下，如何给巨石应用
stubborn丶lili·2023-08-15 17:14

qiankun源码深挖

使用qiankun也有一段时间了，但是在使用的过程中，总会遇到各种问题，面对这些问题最终虽然解决了，但是总感觉心里面不踏实，想要去看看qiankun的源码，加深一些理解，学习一下qiankun内部的实现原理
彩云Coding·2023-08-15 11:04

基于vue3+webpack5+qiankun实现微前端

一主应用改造（又称基座改造）1在主应用中安装qiankun(npmiqiankun-S)2在src下新建micro-app.js文件，用于存放所有子应用。
alice--小文子·2023-08-12 06:13

qiankun-微前端--vue2

项目结构主应用技术：vue2子应用技术：vue2项目目录这里是特意将主子项目分开来的，方便管理主应用安装qiankunnpminstallqiankun重新定义一个启动端口，防止和其它子应用共用同一个端口（vue.config.js）定义子应用在主应用中的出口，下面这两个地方都需要进行定义（main.js和模板组件）注意：我这里定义的子应用的挂载节点是在HomeView.vue这个页面上，放在这里
阿Q--小黑·2023-08-12 00:02

从零搭建qiankun

在说qiankun之前先了解下Single-spa,Single-spa是一个将多个单页面应用聚合为一个整体应用的JavaScript微前端框架。
Wombat-·2023-08-11 23:36

前端微服务qiankun使用基础及应用传参

一，主应用入口文件importVuefrom'vue'importappfrom'./App.vue'importrouterfrom'./router/index.js'//引入状态管理机importactionsfrom'./action.js'//引入乾坤中需要的模块注册应用，设置默认应用import{registerMicroApps,start,setDefaultMountApp}fr
[email protected]·2023-08-11 18:19

阿里 qiankun 微前端框架实践

假如你接手了一个技术栈又老体积又大而同时又不能停下进行更新迭代的项目，如果你要进行重构你会怎么办？微前端可以说是这个问题的满分答案。什么是微前端微前端架构具备以下几个核心价值技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权独立开发、独立部署：子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新独立运行时：每个子应用之间状态隔离，运行时状态不共享总结：结合开头的问题，可知
小丶侯·2023-08-11 04:06

搭建qiankun Demo

so，今天开始尝试阿里qiankun，并搭建一个demo。
山上有桃子·2023-08-07 15:43

qiankun单个微应用集成的demo

qiankun单个微应用集成的demo这里改造的主应用和微应用都是Vue的项目，但是qiankun本身不限制技术栈，不同子应用可以是不同的技术栈，并且为了简单，方便大家搭建，这里的主微应用全部都是利用Vue-cli
彩云Coding·2023-08-07 00:50

微前端框架 之 qiankun

文章目录一、介绍1.1qiankun的优点/特点二、源码解读2.1框架目录结构2.2有料的package.json2.3示例项目中的主应用2.4启动示例项目三、示例项目3.1主应用3.1.1webpack.config.js3.1.2
fmk1023·2023-08-03 13:25

pnpm安装依赖，webpack版本过高，api找不到问题

Cannotreadpropertiesofundefined(reading'tapAsync')ExternalModuleFactoryPlugin.js:59ExternalModuleFactoryPlugin.apply[qiankun
xxsjan·2023-08-03 02:02

qiankun使用文档

基于vue的主应用+vue微应用+react微应用一、qiankun主应用（vue）1.安装qiankun$yarnaddqiankun#或者npmiqiankun-S2.注册微应用并启动（参考官方文档
枫沂·2023-08-02 10:11

微前端

微前端实现方案微前端的实现方案有挺多，比如说：1、qiankun，i
6f2f71ece809·2023-08-02 00:02

qiankun 与vue-router4 不兼容导致路由显示 undefined 问题

在路由前置守卫中监听to及from的变化，发现router.push跳转路由时，会发现打印出两次以上的to、form对象，只有第一次打印的from对象是正确的，而后两次都是由于qiankun与vue-router
王——小喵·2023-07-26 20:58

vue3+vite项目如何作为微应用接入qiankun主应用

pnpminstallvite-plugin-qiankun//vite.config.js importqiankunfrom"vite-plugin-qiankun"exportdefault({mode
王——小喵·2023-07-26 20:28

无星的微前端之旅（三）——qiankun改造

微前端改造这里以Vue3为例子，主应用和子应用均使用vue3路由的话，建议主应用和子应用使用相同模式，即均为history或者均为hash以下先使用为history模式讲解，最后会写如何使用hash模式。History模式主应用改造一般情况下，我们会将带导航的layout的部分，直接放在主应用中。当然不是说不能拆，是能拆的，因为导航的layout明显是个路由不敏感部分，完全可以拆解为单独的子应用。
无星灬·2023-07-26 19:38

rabowl——umi-qiankun微服务框架企业实践(7)

rabowl的gitsubmodule版本子应用的多git库也可以使用gitsubmodule来进行管理。添加子应用在主应用目录下执行命令gitsubmoduleadd-bfeature/xxx/xxxx--nameapp1http://xxxxx.git(子应用git地址)packages/app1添加子应用后在主应用目录下会自动生成一个.gitmodules文件。里面会自动添加一条记录[sub
Rasir·2023-07-26 10:22

vue项目qiankun框架主应用和子应用用nginx部署

主应用打包工具是vite子应用打包工具是vuecli主应用和子应用部署在一个服务器端口下注意点主应用的vite.prod.config.ts配置文件的base字段，这个字段和nginx部署的文件结构有关，base表示打包后的主应用文件放到服务器的哪个文件夹中，默认是base:"/",默认将主应用文件放在服务器的根目录中在main.ts中注册子应用时的配置对象entry字段是nginx服务器中子应用
深一海·2023-07-24 02:06

qiankun框架vue3主应用和子应用生产环境打包部署nginx

首先下载nginx,进行最小化配置用vscode打开nginx.conf文件在http模块的server模块里进行配置listen字段监听端口号http的默认端口号是80(nginx的端口号可以随便写)server_name字段是ip地址lochhost就是127.0.0.1lacation字段是在浏览器的地址栏http协议+ip地址+端口号后面的url在location字段里进行配置跨域的代码l
深一海·2023-07-24 02:35

JavaScript读源码系列--微前端之import-html-entry

最近网络上对于微前端讨论的愈加激烈，qiankun就是一款由蚂蚁金服推出的比较成熟的微前端框架，基于single-spa进行二次开发，用于将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用
照物华·2023-07-23 10:46

两个umijs/max项目使用微前端简单示例

本人使用umijs/max搭建项目（内置了qiankun插件）主应用.umirc.ts中defineConfigqiankun:{master:{apps:[{name:'app1',entry:'//
KAGHQ·2023-07-21 20:27

qiankun：react18主应用 + 微应用 react18 + vue3

一：主应用搭建react项目npxcreate-react-appreact-qiankun-main安装Antdnpminstallantd–save在index.js中引入import{ConfigProvider
weixin_43503080·2023-07-21 05:44

微前端（micro-app）使用手册

并且由于自定义ShadowDom的隔离特性，micro-app不需要像single-spa和qiankun一样要求子应用修改渲染逻辑并暴
StoneHui_·2023-07-19 14:10

4.基于qiankun的微应用示例（Vue及传统应用混合）一 传统应用

准备环境express我们安装express，只是为了应用一下express的静态服务资源。随便安装一下...npmiexpress-g新建app.jsvarexpress=require('express');varpath=require('path');varapp=express();//app.all('',function(req,res,next){//res.header("Acc
小白菜的白菜·2023-07-17 07:50

微前端之 二 常用框架对比

官方文档：https://qiankun.umijs.org/zh/优点:在同一页面上使用多个前端框架而不用刷新页面独立部署每一个单页面应用新功能使用新框架，旧的单页应用不用重写可以共存改善初始加载时间
一锦一瑟思华年·2023-07-16 22:07

vue 配置前端项目npm一键启动，前端项目批量启动

最后选择了蚂蚁金服开源的微前端框架qiankun。开发过程中发现每天都要同时启动多个项目，打包也得同时打包多个。一个一个点开，再运行命令确实比较麻烦，因此有了一键启动，一键打包的想法。
东扯葫芦西扯瓜·2023-07-15 16:28

手把手教会你微前端开发（vue-qiankun）

什么是微前端引用qiankun里的解释简而言之，微前端就是可以将多个模块或者多个项目合并到一个项目中。a项目里可以嵌入b项目的页面，并且可以交互通信。
蛋蛋的老公·2023-07-15 01:02

我理解的微前端

独立部署怎么破3，项目中有老的应用代码怎么破解决方案：single-spa:优点：实现了路由劫持和应用加载缺点：没有处理样式隔离和js执行隔离（没有js沙箱的机制，css也不隔离），不够灵活，不能动态加载js文件qiankun
bypwan·2023-07-05 16:43

微前端（micro-app）使用手册

并且由于自定义ShadowDom的隔离特性，micro-app不需要像single-spa和qiankun一样要求子应用修改渲染逻辑并暴
StoneHui·2023-06-25 16:52

rabowl——umi-qiankun微服务框架企业实践(3)

##目录结构解析这里不赘述`umi`的相关内容。只讲`rabowl`框架新增重要的目录结构```rabowl----libraries----rbui----src----components----rbutils----es----lib----src----packages----App1----App2……----config.json----rabowl----src----bin----
·2023-06-24 08:57

某马 qiankun 公开课 学习记录

端午早晨阳光正好，起来学习一小下客观评价一哈：此视频适合不了解qiankun的朋友入门观看，更详细的使用方法还是推荐qiankun官网哦，老师讲的生动活泼，值得萌新一听某马qiankun公开课-bilibiliovo
Lyrelion·2023-06-22 18:23

qiankun微服务怎么用，怎么实现集成react和vue

Qiankun是一个能够帮助开发者实现微前端的框架，它可以支持多种前端框架的混合开发，包括React、Vue等。下面我将详细介绍如何使用Qiankun实现集成React和Vue。
珎珎啊·2023-06-16 22:34

微前端——qiankun配置方法

什么是微前端微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。一般呢，微前端多应用于企业中的中后台项目中，因为企业内部的中后台项目存活时间都比较长，动辄三五年或者更多，最后
小曲曲·2023-06-16 00:34

【几乎最全/全网最长的 2 万 字】前端工程化完整流程：从头搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）

文章目录一、完整构建流程1、在指定目录下执行pnpminit，初始化package.json2、执行pnpminstallvite-D，安装vite。3、package.json中增加启动、构建命令4、新建index.html5、根目录下新建src文件夹，并在其下方新建main.ts6、安装vue：pnpminstallvue7、根目录下新建env.d.ts文件，输入内容用以支持其他文件引入vue
碳学长·2023-06-13 20:42

qiankun在主应用、子应用均为vue3+vite+typescript中的使用

介绍什么是微前端微前端是一种架构风格，通过将一个单体应用程序拆分成多个小型独立应用程序来实现。每个小型应用程序都专注于一项特定功能，并且可以独立部署、扩展和维护。为什么需要微前端复杂性管理大型单体应用程序随着时间的推移变得越来越复杂，难以维护团队独立性微前端允许团队根据其能力和需求独立工作，而不需要干扰其他团队技术多样性使用不同的技术堆栈开发各个独立应用程序，而无需考虑整体应用程序的技术选型核心价
m0_37653407·2023-06-12 15:11

single-spa 源码学习

学习目的：qp---基于--->qiankun---基于--->single-spa；面向工作热爱学习简要概述：single-spa是一个前端微服务框架，有如下特点：1.技术栈无关2.渐进式增加应用3.
itLeeyw·2023-06-11 08:25

微前端——乾坤qiankun Demo

微前端——qiankun（乾坤）实例一、什么是微前端微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！
Mr老朝·2023-06-10 08:30

Vue微前端乾坤(qiankun)解决子应用静态资源加载问题

安装file-loader：npminstallfile-loader在子应用vue.config.js中进行配置，//定义静态路由地址,根据子应用项目静态资源地址自行配置，打包后会根据publicPath对图片路径进行拼接constpublicPath='http://localhost:8081';chainWebpack:(config)=>{config.module.rule('font
萧紫陌·2023-06-09 21:18
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他