Front end of. NETCORE + Vue framework building journey: Micro front end architecture design (2)

Time:2020-10-30

What you want, go ahead!
Record the small things in the development process and add some experience value to yourself.

preface

The first part of the “journey to build a.netcore + Vue framework”: Micro front end architecture design “describes the core idea of the design. This article mainly talks about the remote loading module (dynamic loading JS, CSS). The whole architecture is mainly implemented in this way, so separate records are extracted.

The first part is about loading through jQuery, which is not perfect in Vue projects. Therefore, Vue components are used to load modules, and nprogress is added to display progress.

  

Nprogress installation
npm install --save nprogress
  import NProgress from ‘nprogress’
  import ‘nprogress/nprogress.css’

  

  demonstration

  

Encapsulating remotemoudleloader 

1. Encapsulate the module components, temporarily determine whether all loading is completed by comparing the number of loaded files, and call back done() of the progress bar after completion

 

2. The sub components loaded by JS and CSS are not written separately, but loaded directly through the render function. Listen to the load method of on, call back addcompletecount method to stack after each file download is completed (no matter success or failure temporarily), and finally monitor completecount through watch to judge the progress.

 

use

1. The checkmodel method is used to resolve the address mode of the first level menu URL

2. Loadmoudle makes a request for URL and sends HTML to parsenghtml for parsing

3. Parsinghtml passes the file path to the component and loads it in the document.

 

 

 

epilogue

This is the end of this article. If you have any questions or corrections, please post them in the comments section.