「连载八」「大型应用前端展示」大型应用前端解决方案

大型应用前端展示

应用开发文档

  • 应用开发文档 基于 Vue + ElementUI + Axios + Webpack + Babel 快速搭建微前端应用

应用开发脚手架

  • Vue 脚手架 基于 vue & vuex & vue-router & axios & element-ui 的微前端子应用脚手架工程模板
  • React 脚手架 基于 create-react-app & webpack & redux & react-router 的微前端子应用脚手架工程模板

应用注册中心

聚合应用门户

  • 聚合应用门户 集成脚手架应用,进行统一的生命周期、权限管理和展示

微前端实践原理

原理简要说明(约定:Portal 聚合应用门户,简称 Portal;React、Vue 子应用,简称 ChildApp):

  1. Portal 首页,加载所有的 ChildApp 信息
  2. ChildApp 实现 Portal 的生命周期
  3. ChildApp 打包配置:定义 SERVICEID(由字母和数字组成的唯一应用ID),所有打包后的文件,都放置于 ${SERVICEID}/ 目录,并以 ${SERVICEID}-[name].* 命名,准备集成到 Portal
  4. 配置 nginx 变量,保证 ChildApp 根据 SERVICEID,自动匹配路径
  5. 配套设施:ChildApp 脚手架开发文档和在线集成、权限配置、菜单配置、主题配置等等工具

React 独立部署:http://child.portal.michaelxu.cn/REACTCHILDAPP/
Vue 独立部署:http://child.portal.michaelxu.cn/VUECHILDAPP/#/
Portal 集成部署:http://portal.michaelxu.cn/
Portal 配置中心:http://register.portal.michaelxu.cn/

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×