前端架构微前端qiankun

系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机

对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。

rabbit_it·2024-09-15 17:12

qiankun 结合 vue3，小白快速上手体验

一、主应用改造首先需要维护一份微应用列表，里面包含了微应用的名称、入口和生效规则，若需要给子应用传递内容，可以在props传入对应的内容//app.jsconstapps=[{name:'micro-vue-app3',entry:'//localhost:3013',container:'#micro-vue-app3',activeRule:'/micro-vue3-app3',props:{

陈y_d·2024-09-14 19:30

前端架构师招聘

前端架构师（薪酬50-80W）所属部门：医美云事业部级别：T4岗位职责：1.负责事业部前端技术选型、关键技术决策；2.负责为技术VP前端相关技术决策提供建议和支持；3.负责组织实施内部UI库、内部基础研发工具和研发依赖的开发和实施

qq_42801150·2024-09-11 04:02

前端架构师的职责

前端架构师的职责没有文档的代码=放弃治疗作为前端架构师,首先要解决的问题就是让日益膨胀的代码可控,因此你需要梳理代码,建立架构,组织文档,管理架构的更新和维护,评审技术方案对架构的影响,核心模块的方案设计

acigt0531·2024-09-11 04:00

基于微前端qiankun的多页签缓存方案实践

本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。一、多页签是什么？

JavaMonsterr·2024-09-10 01:25

基于 React & TypeScript & Webpack 的微前端应用模板

m-fe/react-ts-webpack在Web开发导论/微前端与大前端一文中，笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。

weixin_33806300·2024-09-08 02:48

【微前端】ReactJS实现微前端的代码架构

【微前端】ReactJS实现微前端的代码架构目录【微前端】ReactJS实现微前端的代码架构通用步骤基于微前端的应用典型树结构：示例代码Webpack设置：Babel设置：配置Webpack别名：依赖管理

小涵·2024-09-08 01:43

layuiAdmin - 一个强大的后台管理框架

layuiAdmin-一个强大的后台管理框架layuiAdminlayuiAdmin后台管理模板完全由layui自建的一套前端架构实现而成的通用型后台管理模板系统项目地址:https://gitcode.com

潘惟妍·2024-09-06 03:37

使用脚本一键打包并上传docker镜像

笔者搞了一年多微前端项目，一个团队管理十个微应用，换成docker镜像部署后，发布操作一下从原来的脚本直连服务器的1分钟变成了几十分钟，尤其上传每个应用到各自的阿里云仓库。

春深是蔚蓝·2024-09-03 11:09

【面试题】2024前端面试真题_中国电信前端面试(1)

reactmemo效果，react.meno第二个参数是什么pureComponent手写代码实现一个有状态的倒计时浏览器强缓存，cacle-control有哪些字段浏览器缓存原理微信原生小程序性能指标有没有看过qiankun

2401_84437604·2024-08-30 12:05

项目搭建使用qiankun（乾坤），入门篇，以及遇到的坑与解决

微前端架构具备以下几个核心价值：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时

喂！大掌柜·2024-08-30 11:02

普元EOS-微前端的base基座介绍

1前言微前端开发的时候要使用base基座。这个base基座到底是什么？base基座能提供哪些功能？本文将进行简单的介绍。

小崔爱读书·2024-08-26 11:19

微前端插件 v-micro-app-plugin

v-micro-app-plugin是一款基于京东MicroApp框架的微前端插件，旨在帮助开发者快速地将微应用集成到不同的系统中，实现高效、灵活的前端模块化开发。

小白探索世界欧耶！~·2024-08-23 03:11

基于AngularJS的企业软件前端架构

2019独角兽企业重金招聘Python工程师标准>>>这篇是我参加QCon北京2014的演讲内容：提纲：企业应用在软件行业中占有很大的比重，而这类软件多数现在也都采用B/S的模式开发，在这个日新月异的时代，它们的前端开发技术找到了什么改进点呢？B/S企业软件前端开发模式大体上与桌面软件类似，都是偏重量级的，在前端可能会有较多的业务逻辑，这些业务逻辑如何被合理模块化，与界面分离，以便测试，成为这个领

weixin_33980459·2024-08-22 09:49

qiankun项目填坑：隐藏菜单和header

最近接了一个项目，架构是qiankun，需要在这基础上进行修改；找到对应的项目后，运行该项目就消耗了很多精力；好不容易运行起来了，单纯的运行子项目是能将菜单和header隐藏:layout中设置{headerRender

撒库拉-琳琳·2024-03-20 19:00

前端架构: 脚手架通用框架封装之添加测试框架(教程六)

添加测试框架接上文，仍旧在abc-cli项目中参考：https://blog.csdn.net/Tyro_java/article/details/136438882现在要在脚手架项目中安装测试工具，选择jest文档：https://www.npmjs.com/package/jest数据：WeeklyDownloads19,759,155(动态)可见是一个比较流行的测试库，现在安装它$npmij

Wang's Blog·2024-03-10 14:42

前端架构: 脚手架框架之commander从基础到高级应用教程

commander1）概述commander是一个更为知名的脚手架框架进入它的npm官网:https://www.npmjs.com/package/commander目前版本:12.0.0WeeklyDownloads133,822,797(动态数据)最近更新：15daysago(npm)说明这是一个更优质的库同时使用commander的案例也更为知名:vue-cli,webpack-cli,c

Wang's Blog·2024-02-20 16:17

【NextJS】nextjs+qiankun遇ReferenceError: window is not defined

实验环境：qiankun:^2.10.16next:14.1.0react:^18.2.0根据官方手册快速上手教程(链接)构建主程序实验代码：qiankun部分：//file:micro-base/plugins

陀螺蚁·2024-02-20 13:29

2018-05-07

你的专注力，决定你可以走多远，走多久，node后端，前端架构师，混合开发，多学一些是优势。图片发自App图片发自App

无欲而为·2024-02-20 04:22

micro-app的简单学习

1、在基座中调用子应用在了解完微前端之后，我们知道，微前端是由一个基座和多个子应用构成的，那么如何在基座中调用子应用呢？官网中如下介绍：//官网中看到

笑到世界都狼狈·2024-02-20 04:48

京东开源项目micro-app初体验

二、使用步骤1.下载总结关于micro-app2021年7月由京东开源的微前端框架官方文档micro-appgit地址了解micro-app一、micro-app使用版本以及使用场景？

辣鸡队员·2024-02-20 04:48

微前端qiankun从头写一个demo，包含主微应用、微微应用通信用例

文章目录qiankun微前端demo说明1.路由说明：1.1hash路由：1.2history路由：路由切换2.LifeCycles:3.父子通讯3.1主应用与微应用的通信3.2微应用之间的通信4.手动加载微应用

Yoyo_Yan·2024-02-20 02:58

个人简历补充

个人简历补充1.对工作的认识2.八股文和知识面3.框架/架构角度深扒3.1前端3.1.1mPaaS（移动领域）3.1.2普通前端项目框架3.1.3微前端3.2后端持续更新1.对工作的认识2.八股文和知识面前端

Xiaobaiforgod·2024-02-19 12:02

前端架构: 调试本地脚手架最佳实践梳理

脚手架本地调试标准流程1）链接本地脚手架就是当我们这个脚手架开发好还没上线的时候可以进入到脚手架的一个目录,通过npmlink完成这个操作$cdyour-cli-dir$npmlink这个操作的含义是将当前的项目链接到node全局的node_modules中作为一个库文件,并且还会解析我们的bin配置,去配置可执行文件通过npmlink的时候,它就会在当前node全局的依赖当中创建一个脚手架可执行

Wang's Blog·2024-02-15 07:32

前端架构: 实现脚手架处理简单的命令注册和参数解析

实现简单的命令注册和参数解析1）概述这里不会使用任何第三方工具，而是给大家讲解一下参数解析的一个实现原理实现两个目标第一目标是注册一个命令$xyzcliinit这个命令就可以完成一个自己的操作第二个是实现参数解析希望能够实现--version的一个参数解析以及init-name这样的一个参数解析2）实现那么问题来了，如何能识别到这个init命令$xyzcliinit在nodejs中有一个proce

Wang's Blog·2024-02-15 07:01

基于 qiankun 的微前端最佳实践（图文并茂） - 应用部署篇

micro-app写在开头微前端系列文章：基于qiankun的微前端最佳实践（万字长文）-从0到1篇基于qiankun的微前端最佳实践（图文并茂）-应用部署篇基于qiankun的微前端最佳实践（图文并茂

明源云链前端团队·2024-02-15 05:44

前端架构: 简易版脚手架开发

开发一个简易版脚手架将脚手架命名为:xyzcli,这个名称比较随意，截止在目前，我看到npm上没有这个包，尽量避免重名初始化$mkdirxyzcli$cdxyzcli$npminit-y新建bin/index.js#!/usr/bin/envnodeconsole.log('xyzcli')回到package.json中配置{"bin":{"xyzcli":"bin/index.js"}}发布到n

Wang's Blog·2024-02-13 06:05

前端架构: 本地调试脚手架的2种方式

一、调试简单的脚手架方式假定脚手架名称是xxx1）方式1在xxx脚手架项目目录的上一级，执行npmi-gxxx这时候，就可以本地调试脚手架，在前文中已经说明软链的作用参考：https://blog.csdn.net/Tyro_java/article/details/136102674这种方式，可以用到已经发版上线的脚手架项目中2）方式2在未发过版的脚手架项目的根目录中，也就是xxx/下执行$np

Wang's Blog·2024-02-13 06:33

前端架构: 脚手架开发流程中的难点梳理

脚手架的开发流程1）开发流程创建npm项目创建脚手架入口文件，最上方添加：#!/usr/bin/envnode配置package.json,添加bin属性编写脚手架代码将脚手架发布到npm2）使用流程安装脚手架npminstall-gyour-own-cli使用脚手架your-own-cli3）脚手架开发难点分包:将复杂的系统拆分成若干个模块，并且合并成一个复杂系统命令注册，如：$vuecreat

Wang's Blog·2024-02-11 05:11

Vue 和 React 大厂面试通关指南.pdf

前百度/360前端架构师大圣老师给出了一个解决

zz_jesse·2024-02-10 12:38

谈谈虚拟 dom 在 Vue 和 React 中的应用

前百度/360前端架构师大圣老师给出了一个解决

全栈修炼·2024-02-10 12:08

从 16 个方向逐步搭建基于 vue3 的前端架构

我认为前端架构核心工作是定制一套适合当前业务需求的解决方案，从而降低需求的增加而带来的技术实现的复杂度。下面我将从16个方向，逐渐带领大家搭建一套属于你自己的脚

codexu_461229187·2024-02-09 06:46

基于Vue的前端架构，我做了这15点

我认为前端架构核心工作是定制一套适合当前业务需求的解决方案，从而降低需求的增加而带来的技术实现的复杂度。下面我将从16个方向，逐渐带领大家搭建一套属于你自己的脚

codexu_461229187·2024-02-09 06:45

前端架构之路（3） - 前端开发规范

前端开发规范1.为什么需要“前端开发规范”规范不是强制性的，对代码的编写和程序的运行不会有致命的问题，但是没有规范会有一系列的问题，比如：缺乏规范，第一个问题就是团队编码风格不一，增加了成员之间代码的阅读成本，加大了团队协作成本和维护成本；随着团队人员的变化（多人开发一个应用，或者应用更换开发人员），如果缺乏规范，项目可能会变得一团糟，甚至失控；即便是个人开发，规范也是需要的，当把项目转给其他人的

senntyou·2024-02-09 03:55

前端架构: 脚手架的开发流程和常用框架

脚手架的开发流程脚手架的创建$npminit脚手架的开发分包分包是指当我们一个脚手架比较复杂的时候，不可能把所有的js代码全部写在一个脚手架当中势必会把它建很多的不同的模块package，通常我们会把它称之为一个分包的过程会和实际的这个项目一样，去做这个项目的分包参数解析脚手架通常不可能一个命令就能完成所有的功能，一定要一些辅助参数比如说创建项目的时候，要起一个项目的名称，比如--name像这些参

Wang's Blog·2024-02-08 13:37

前端架构: 从vue-cli探究脚手架原理

从使用角度理解什么是脚手架脚手架本质是一个操作系统的客户端在终端中去执行一个命令，这个命令本身它就是一个客户端我们其实可以把脚手架理解为操作系统的一个客户端通过命令去执行它的时候，这个命令往往是这样的一个构造，如下比如：要创建一个vue的项目的时候,$vuecreatevue-test-app上面这条命令由3个部分组成主命令:vuecommand:create这个command是子命令，实际上它向

Wang's Blog·2024-02-08 13:05

DDD学习笔记---从后端到前端：微服务后，前端如何设计？

从单体前端到微前端为了解决单体前端的问题，我们可以借鉴微服务的设计思想，引入微前端概念。将微服务理念扩展到前端，解决中台微服务化后，前端由于仍为单体而存在的逻辑复杂和臃肿的问题。

激流勇进_·2024-02-07 00:44

前端架构: 脚手架在前端研发流程中的意义

关于脚手架脚手架=command-lineinterface基于文本界面，通过中断输入命令执行常见的脚手架：npm,webpack-cli,vue-cli拿npm这个脚手架来说在终端当中输入npm命令,系统就会通过文本方式返回npm的使用方法它这种通过命令行执行的操作方式效率很高，所以非常适合用来执行前端任务在前端开发的过程中，常常会把脚手架应用在前端研发提效当中举一个的例子，$npminstal

Wang's Blog·2024-02-06 08:52

qiankun 微前端介绍、安装

文章目录一、介绍什么是微前端微前端架构具备以下几个核心价值：qiankun的核心设计理念它是如何工作的为什么不是iframe特性二、快速上手主应用1.安装qiankun2.在主应用中注册微应用微应用1.

南乔几经秋_·2024-02-06 00:07

micro-app（微前端框架）

https://gitee.com/helibin/micro-appmicro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度

朱朱是个小太阳·2024-02-05 16:36

（已解决）Vue前端架构建设与数据传输，Vue如何使用，如何更改vue端口，如何设置路由，vue中如何进行html套用，vue如何跳转页面，Node.js下载安装，Vue cil下载安装，npm是什么

1.前言为什么要使用VUE：Vue就是简化js的dom书写的（官方语言的解释都搜得到，不说了）都开始学vue了，那些简单的肯定会了，大部分原因就是时代在进步喽，各种技术栈的更新，安全性，维护便利性的提高等等....要求我们去学更新的技术......(vue已经是老技术了，IT行业前景不好，内卷严重，哥找工作的时候咋活啊QAQ)咳咳，说多了，进入正题吧2.安装Node.jsVue有一套标准的模板来进

BrianGriffin·2024-02-04 23:35

京东微前端框架MicroApp简介

一、MicroApp1.1MicroApp简介MicroApp是由京东前端团队推出的一款微前端框架，它从组件化的思维，基于类WebComponent进行微前端的渲染，旨在降低上手难度、提升工作效率。

xiangzhihong8·2024-02-04 16:37

物流平台架构设计与实践

一、物流平台架构设计1.前端架构设计物流平台的前端页面应该注重用户体验，提供清晰、易用、美观的界面，同时还需要考虑响应式设计，以便用户能够在不同终端上访问。

007php007·2024-02-04 09:24

nuxt.config.js 配合微前端qiankun打包配置

constCompressionPlugin=require('compression-webpack-plugin')consttimeStamp=newDate().getTime();exportdefault{/***Nuxtrenderingmode**Seehttps://nuxtjs.org/api/configuration-mode*/mode:'spa',ssr:false,/

小贵子的博客·2024-02-03 12:02

less的使用小技巧以及vite 如何配置less全局变量

1.变量-属性可用于统一修改，比如特殊节日置灰等@primaryColor:#f2f2f2;//使用color:@primaryColor2.变量-选择器添加项目标识(可用于微前端的样式隔离)@nameSpace

原谅我不够洒脱·2024-02-01 11:00

single-spa原理

single-spa原理也大同小异，也可以类比的理解为一种模块化开发的单页应用，只不过在单项目的单页应用中划分的模块是各种组件，而在微前端中各个模块就是各个独立的子

Icewen·2024-02-01 06:24

vite + postcss-prefix-selector 增加统一作用域

在前端开发中，随着项目规模的扩大，特别是在使用微前端架构后，基座应用和子应用之间的样式冲突和作用域管理成为了一项挑战。

天問_·2024-01-31 10:42

第十章（应用场景篇） Single-SPA微前端架构深度解析与实践教程

文章目录Single-SPA微前端架构深度解析与实践教程1、Single-SPA介绍2.1Single-SPA是什么2.2Single-SPA的特点2、Single-SPA核心原理3.1路由机制3.2生命周期管理

球球不吃虾·2024-01-31 08:24

第九章（应用场景篇）Qiankun微前端深度解析与实践教程

文章目录Qiankun微前端深度解析与实践教程引言一、微前端概述二、Qiankun简介三、Qiankun核心原理四、Qiankun实践1.创建主应用2.注册子应用3.路由配置4.子应用开发5.应用通信五

球球不吃虾·2024-01-31 08:49

第八章（应用场景篇）中大型项目的解构：从单体应用到微前端

文章目录中大型项目的解构：从单体应用到微前端一、从单体应用到微前端1.1单体应用的困境1.2微前端的优势1.3解构过程二、案例分析3.1项目背景3.2解构过程1.项目分析2.架构设计3.技术选型1.主应用配置

球球不吃虾·2024-01-30 22:58

推荐频道