Skip to content

a1029563229/micro-front-template

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

微前端架构模板

介绍

微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。

本项目是基于 qiankun 搭建的微前端架构 Demo,你也可以当成 qiankun-quick-start 来使用。

本项目使用 Vue 作为主应用基座,嵌入了 VueReact 两个子应用,架构图和效果图如下:

架构图

效果图

如何运行

本项目使用的端口为 9999、10100、10200,运行前请确保这几个端口的空闲。

本仓库基于 qiankun 实现微前端架构,运行命令如下:

yarn install
yarn examples:install
yarn examples:start

分支说明

master 为稳定分支,其他分支根据 qiankun 实战系列教程 划分:

  • master:稳定分支,可以直接作为 qiankun-quick-start 使用;
  • feature-communication:官方通信方案;
  • feature-communication-sharedShared 通信方案;

大家可以根据自己的需求切换分支。

关于跨域

由于 qiankun 内部使用的是 Fetch HTML 的方式加载子应用,所以会遇到跨域问题。我们需要先解决跨域问题,使我们的主应用可以正常加载子应用相关资源。

在开发环境下,本项目配置了跨域解决方案,所以在直接运行项目并不会遇到跨域问题。

About

微前端架构模板

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published