Giter VIP home page Giter VIP logo

micro-front-template's Introduction

微前端架构模板

2022.2.9 更新说明

更新 yarn.lock 文件,修复部分依赖安装失败问题。

需要 yarn 的版本 >= 1.13.0

2021.4.26 更新说明

将 Static 应用的网络请求更换成 mock 请求。

梳理微前端新系列文章大纲

2021.3.3 更新说明

因服务器到期,所有网络请求均已更换成 mock 请求。

教程案例统一以最新的 master 分支为主,其余分支未更新。

介绍

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

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

本项目使用 Vue 作为主应用基座,嵌入了 Vue、React、Angular、Jquery... 等等多个技术栈的微应用,架构图和效果图如下:

架构图

效果图

如何运行

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

全量启动项目会比较慢(Angular 微应用第一次启动会很慢),需要耐心等待一会儿,适合只查看项目运行效果的童鞋。

如果需要调试项目查看效果,建议手动启动主应用和所需的微应用。

本仓库基于 qiankun 实现微前端架构,运行命令(全量启动)如下:

yarn install
yarn examples:install
yarn examples:start

系列教程

本系列配套教程:

本系列其他文章计划一到两个月内完成,点个 Star 不迷路。

计划如下:

  • 生命周期篇;
  • IE 兼容篇;
  • 性能优化、缓存方案篇;

分支说明

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

  • master:稳定分支,可以直接作为 qiankun-quick-start 使用;
  • feature-inject-sub-apps:主应用基座搭建、微应用接入方案;
  • feature-deploy:应用部署发布方案;
  • feature-communication:官方通信方案;
  • feature-communication-sharedShared 通信方案;

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

关于跨域

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

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

生产环境的跨域问题可以参考 应用部署篇 的方案。

micro-front-template's People

Contributors

a1029563229 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

micro-front-template's Issues

yarn examples:install 报错

yarn run v1.22.10
$ npm-run-all --serial install:*
$ cd micro-app-main && yarn
error An unexpected error occurred: "Cannot create property 'program-files-nodejs-node-cache' on string '{"program-files-nodejs-node-cache":""}'".
info If you think this is a bug, please open a bug report with the information provided in "D:\VScode\material\素材\work\qiankun dom\micro-front-template\micro-app-main\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "install:main" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

关于license

挺不错的项目,license可以否添加下呢~

子应用按需加载无效

我留意到在首次加载某个子应用时,比如Vue主页,同时发起了其他子应用的资源请求,这导致子应用首次加载的白屏时间比较长,响应较慢(后续在各子应用之间切换无需再发起请求,切换响应比较迅速)。不能实现按需加载吗?未访问的子应用资源不加载。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.