微前端项目

最新推荐文章于 2023-06-16 04:40:28 发布
最新推荐文章于 2023-06-16 04:40:28 发布
阅读量466 收藏 1
点赞数 2
分类专栏： 前端领域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swe_ling/article/details/107214480
版权

微前端项目

微前端的产生

当前项目多数都是spa单页应用，随着业务的发展一个项目在开发过程中越来越大。
这时会将一个项目拆分成多个子项目

SPA项目 router

router 主项目 组件目录 增长业务 => components/growth 市场投放 => components/market 市场拉新活动 => components/activity 用户学习业务 => components/user 用户激励 => components/coin 用户学习 => components/leaning 单页应用 router 主项目 组件目录

按业务拆分项目

从nginx将一个项目拆分成多个子项目。每个项目独立的存在，解决了web-main项目冗大的问题。但项目模块之间的通信变得复杂

nginx 增长业务 市场投放 市场拉新活动 用户学习业务 用户激励 用户学习 /growth => /data/nginx/growth /market => /data/nginx/market /activity => /data/nginx/activity /user => /data/nginx/user /coin => /data/nginx/coin /leaning => /data/nginx/leaning nginx 增长业务 市场投放 市场拉新活动 用户学习业务 用户激励 用户学习

微前端模块拆分项目

1. 从Nginx拆分项目
nginx classroom userCenter /classroom => /data/nginx/classroom /userCenter => /data/nginx/userCenter nginx classroom userCenter
2. 提取通用模块
nginx classroom pageLogin moduleBase moduleSnippet moduleClassroom 登录页面模块 基础共用包 工具包 教室模块 nginx classroom pageLogin moduleBase moduleSnippet moduleClassroom
nginx userCenter pageLogin moduleBase moduleFunctor moduleUserCenter 登录页面模块 基础共用包 工具包 学习中心模块 nginx userCenter pageLogin moduleBase moduleFunctor moduleUserCenter
3.微服务模块使用方式
Created with Raphaël 2.2.0 开始 package.json install ？ npm install 将依赖模块下载到node_modules build ？ npm run build 将依赖模块进行编译 编译内容产出到dist目录 结束 yes no yes no
4.微服务模块使用方式【微前端版】
Created with Raphaël 2.2.0 开始 kone.json 微服务配置文件 install ？ npm install 微前端模块? 将依赖模块下载 到node_modules build ？ npm run build 微前端模块? 通过kone.json 取得模块对应的资源清单 将依赖模块注入 编译内容产出到 dist目录 将依赖模块进行编译 结束 yes no yes no yes no yes no

微前端模块开发

前端模块生成

NPM包开发

npm包开发模式 NPM 包开发规范

NPM包发布

src目录下为原文件，产出dist目录下为UMD模块

NPM包发布【微前端版】

将dist 目录内的资源发布到CDN上，同时在Kone平台上建立包版本与资源列表之间的关系，在资源注入时会使用。

模块使用

npm install 将资源加载到本地node_modules目录下

模块使用【微前端版】

在项目编译时将依赖的模块按版本注入到HTML中。可以资源打包时间，同时增强模块的使用。

模块开发流程

Created with Raphaël 2.2.0 开始 模块开发 npm模块 开发完成？ 编译后产出dist目录 发布到npm私库 微服务? 记录静态资源列表与模块的关系 静态资源发布到CDN 结束 yes no yes no
从未、淡定
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue微前端qiankun框架学习到项目实战,基座登录动态菜单及权限控制
qq_42696432的博客
09-22 4694
技术无关，独立开发，独立部署，增量升级，独立运行，微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。
微前端（qiankun）
qq_24832277的博客
03-29 5565
什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。、 微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。 微前端架构具备以下几个核心价值： 技术栈无关 主框架不限制接入应用的技术栈，微应用具备完全自主权 独立开发、独立部署 微应用仓库独立，前后端可独立开发，部署完成
微前端qiankun（vue）创建项目教程
qq_38814363的博客
02-09 1216
什么是微前端，乾坤（qiankun）创建项目
微前端在Vue项目的实践
前端精髓
03-02 4014
文章的参考：微前端在美团外卖的实践 我将讲解微前端如何在Vue项目中实践和应用，业务逻辑参考文中介绍的，文章中介绍的逻辑比较清晰，但是并没有提供过多的业务代码，对微前端如何应用到具体的项目我们就无从而知，为了介绍如何应用到项目中，我就写下了这篇文章，我们应用的工程是在Vue项目中。 如果你还不知道如何通过webpack配置Vue项目，请先参考这篇文章：自己搭建一个Vue项目工程 我的微前端项目...
什么是微前端？
weixin_43834338的博客
06-16 867
微前端的选型和技术难点
基于vue+qiankun微前端项目实战vue项目（新手学习）.zip
最新发布
03-03
基于vue+qiankun微前端项目实战vue项目.zip 本项目采用 vue + qiankun 实践微前端落地。 同时 qiankun 是一个开放式微前端架构，支持当前三大前端框架甚至 jq 等其他项目无缝接入。 此项目为了尽可能的简单易上手，...
spa-mf:单Spa微型前端项目
05-27
【标题】"spa-mf:单Spa微型前端项目"揭示了这是一个基于微前端架构的单一SPA（Single Page Application）项目。微前端是一种将大型前端应用拆分为多个小型、独立的子应用，然后在浏览器端进行组合的技术。这种架构...
micro-frontend:微前端项目
04-01
综上所述，微前端项目是一种现代前端开发的创新实践，它带来了更好的可扩展性、可维护性和团队协作效率。然而，实施微前端架构也意味着需要面对新的挑战，如路由管理、通信机制、样式隔离等，因此在选择微前端之前，...
MFE-Project:微型前端项目
03-08
【微型前端项目——MFE-Project】是一种现代前端开发架构模式，它将大型单页应用（SPA）拆分成多个小型、可独立部署的前端模块，每个模块称为微前端（Micro Frontend，MFE）。这样的设计使得团队可以并行开发，减少...
基于Vue实现微前端的示例代码
11-21
前端微服务化一直是前端社区的一个热门话题，早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓，个人认为基于Web Components的实现脱离整体打包逻辑的，难以工程化。直到遇到了vue-cli 3，子模块打包的...
微前端项目实战及原理
weixin_43522687的博客
06-14 5075
背景 使用微前端在项目中主要是解决使用iframe引入第三方页面时遇到的框架受限，页面交互不统一等问题，项目中遇到的问题大概如下： iframe 内部路由跳转，不会影响到外部的路由地址，无法记住当前访问的页面地址，iframe加载第三方公司应用，在 iframe 里面发生的页面跳转，外部的路由地址是不会变化的，如果我刷新页面，它又回到的之前的页面。 iframe 内部的弹窗遮罩问题，iframe内部的弹窗只在内部生效，这样看上去就和左侧菜单以及头部分离了，页面看起来不美观，与正常的UI交互不一致 ifra
qiankun 传统项目配置_记一次 微前端 qiankun 项目 实践 !!! 防踩坑指南
weixin_39600823的博客
12-21 915
导语最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈. 在此次将采坑部分都记录下来, 让更多的人少走点弯路 , 此项目使用 蚂蚁金服qiankun 为基础作为开发 . 话不多说 开讲 !!!那什么是 qiankun 呢?qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。什...
微前端项目搭建
qq_33203555的博客
01-28 544
本文主要介绍基于single-spa的微前端项目搭建 一、涉及技术及框架 single-spa：连接主项目与子应用的桥梁 systemjs：浏览器端异步加载模块 single-spa-vue：vue子应用连接主应用插件 二、主应用工程搭建 vue-cli搭建vue项目 vue create root-web 改造root项目使用systemjs加载子应用，以下是index.html的改造 <!DOCTYPE html> <html lang=""> <head&g
微前端架构
热门推荐
woyebuzhidao321的博客
03-27 2万+
一、前端(架构)发展史 最初，前端是没有架构的，因为功能简单的代码没有架构可言。通过操作DOM就能完成的工作，不需要复杂的设计模式和代码管理机制，也就不需要架构来支撑起应用。前端开发的发展历史分为以下几个阶段： ● 古典时期。由后端渲染出前端 HTML，用 Table 布局，用 CSS 进行简单的辅助。 ● 动效时期。前端开始编写一些简单的 JavaScript 脚本来做动画效果，如轮播广告。 ● Ajax 异步通信时期。2005年，Google 在诸多 Web 应用中使用了异步通信技术如 Google 地
阿里巴巴26个前端开源项目
weixin_30512089的博客
12-23 936
目录 1.数据驱动的高交互可视化图形语法 AntV - G2 2.企业级中后台 UI 解决方案 Fusion Design 3.设计语言 & 前端框架 Ant Design 4.基于 G2 封装的 React 图表库 BizCharts 5.企业级 Node.js 框架 E...
通过 git 实现微前端公共资源共享方案（subtree）
river、的博客
04-02 744
通过 git 实现微前端公共资源共享方案（subtree） 公共资源工程机构： |-----------web-portal | |------src | |------library |-----------web-sub1 | |------src | |------library |-----------web-sub2
GitHub上15W+的后台控制面板
johnhuster的专栏
01-10 1万+
转载自：https://mp.weixin.qq.com/s/DT22wky-3l13DbIOUXXlCw 运的是有很多开源免费的后台控制面板可以给开发者使用，那么有哪些优秀的开源免费的控制面板呢？我在 Github 上收集了一些优秀的后台控制面板，并总结得出 Top 10。 一、AdminLTE Github Star 数 26365，Github 地址： https://github....
从微前端到智能化：2020前端开源技术趋势
02-26 345
毫无疑问 TypeScript 将成为很长一段时间的主流，大型前端开源项目大都已经或正在全面拥抱 TypeScript，他能让我们拥有很多面向对象语言、强类型语言才具备的先进特性，能帮助我们提升代码质量，降低团队协作上的成本和风险，如果我们的项目还未转过来，是时候动手了。但一个开源项目的质量跟语言本身并无直接关系，更别说 TypeScript 本身依旧还只是带「静态类型检查」的「弱类型」语言，OO...
【前端微服务】qiankun
weixin_44719102的博客
03-03 2064
前端微服务目录main为主项目 app-vue-history vue-test 为子项目qiankun是什么？构建主项目修改主项目app.vue子项目构建修改vue.config.js创建文件public-path修改main.js项目内通信qiankun全局通讯全局组件使用父子项目store公用主项目传递全局参数关于vite 打包 技术栈：vue3、typescript、qiankun(阿里的微前端框架)、vue-cli4、vue2、webpack 目录 main为主项目 app-vue-hi
微前端架构体系-云时代的前端架构
11-01
前端为了与后端保持一致，提出了微前端的概念，以解决大型前端项目的管理和扩展问题。 2. **什么是微前端**：微前端是一种将前端应用视为一套可组合的子应用系统的方法。这些子应用可以独立开发、部署和更新，同时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

从未、淡定

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值