《.netCore + Vue框架搭建之旅》前端篇:微前端架构设计(2)

心之所向,勇往直前!

记录开发过程中的那些小事,给自己加点经验值。

前言

上篇 《 .netCore + Vue框架搭建之旅》前端篇:微前端架构设计 》 讲了一下设计的核心思想,这篇主要说一下远程加载模块(动态加载js、css)。整个架构主要利用这个方式来实现,所以就单独再抽出来记录。

上篇讲的是通过jquery来加载,在vue项目里面貌似不太完美,于是就改成通过Vue组件来加载模块,同时增加NProgress显示进度。

nprogress安装
npm install --save nprogress

import NProgress from ‘nprogress’

import ‘nprogress/nprogress.css’

演示

《.netCore + Vue框架搭建之旅》前端篇:微前端架构设计(2)

封装RemoteMoudleLoader

1. 封装模块组件,暂时通过比对加载的文件数量确定是否全部加载完成,完成后回调进度条的done()

《.netCore + Vue框架搭建之旅》前端篇:微前端架构设计(2)

2. js和css加载的子组件就不单独写,直接通过render函数加载。监听on的load方法,每个文件下载完成后回调addCompleteCount方法进行叠加(暂时不论成功还是失败),最后通过watch监听completeCount来判断进度。

《.netCore + Vue框架搭建之旅》前端篇:微前端架构设计(2)

使用

1. checkModel方法用来解析一级菜单Url的地址模式

2. loadMoudle对Url发起请求,并将html传给parsingHtml进行解析

3. parsingHtml将文件路径传入组件,加载在文档中就完成。

《.netCore + Vue框架搭建之旅》前端篇:微前端架构设计(2)

《.netCore + Vue框架搭建之旅》前端篇:微前端架构设计(2)

《.netCore + Vue框架搭建之旅》前端篇:微前端架构设计(2)

结语

本篇到此结束,如果有任何疑问或者指正,请发表在评论区。

原文 

https://www.maiyewang.com/archives/85960

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 《.netCore + Vue框架搭建之旅》前端篇:微前端架构设计(2)

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址