zoukankan      html  css  js  c++  java
  • 《.netCore + Vue框架搭建之旅》前端篇:微前端架构设计(2)

    心之所向,勇往直前!
    记录开发过程中的那些小事,给自己加点经验值。

    前言

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

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

      

    nprogress安装
    npm install --save nprogress
      import NProgress from 'nprogress'
      import 'nprogress/nprogress.css'
    
    

      

      演示

      

    封装RemoteMoudleLoader 

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

     

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

     

    使用

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

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

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

     

     

     

    结语

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

  • 相关阅读:
    Docker Registry 管理镜像
    Dockerfile 构建镜像
    制作docker镜像
    docker 使用及基本命令
    centos7 安装 docker
    spring-boot-devtools 热部署
    mysql库复制
    windows下安装和设置gradle
    springboot项目搭建
    下载和安装
  • 原文地址:https://www.cnblogs.com/AssertionBird/p/12522143.html
Copyright © 2011-2022 走看看