应用开发文档

http://guide.portal.michaelxu.cn/

基于 Vue + ElementUI + Axios + Webpack + Babel 快速搭建微前端应用

应用开发脚手架

Vue 脚手架

https://github.com/MichaelXu1983/portal-childapp-vue

基于 vue & vuex & vue-router & axios & element-ui 的微前端子应用脚手架工程模板

React 脚手架

https://github.com/MichaelXu1983/portal-childapp-react

基于 create-react-app & webpack & redux & react-router 的微前端子应用脚手架工程模板

应用注册中心

http://register.portal.michaelxu.cn/

应用集成，权限管理，菜单管理，主题管理等工具

聚合应用门户

http://portal.michaelxu.cn/

集成脚手架应用，进行统一的生命周期、权限管理和展示

实践步骤

约定：Portal 聚合应用门户，简称 Portal

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

实践展示

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/

閱讀更多 MichaelXu 的文章

關鍵字: 路由器 Nginx 前端