pibupi / micro-frontend-demo

微前端 DEMO

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

微前端 DEMO

本 DEMO 使用的是微前端框架 qiankun。包含了三个应用:

  • main:主应用,使用 vue-cli 创建。
  • vue:子应用,使用 vue-cli 创建。
  • react: 子应用,使用的 react 16 版本。

主应用其实就是一个底座,没什么功能,只有跳转到子应用的功能。

安装

在三个目录下分别执行

npm i

开发

在三个目录下分别执行

npm run dev

然后打开网页,访问主应用 http://localhost:8000/

子应用也可单独访问:

  • Vue 子应用:http://localhost:8001/
  • React 子应用:http://localhost:8002/

部署

将三个应用打包后的文件复制到 main-staticvue-staticreact-static 目录,然后运行三条命令:

  • node main-server.js
  • node vue-server.js
  • node react-server.js

即可开始访问页面。

访问主应用 http://localhost:8000/

访问子应用:

  • Vue 子应用:http://localhost:8001/
  • React 子应用:http://localhost:8002/

About

微前端 DEMO


Languages

Language:JavaScript 53.7%Language:HTML 31.7%Language:Vue 13.5%Language:CSS 0.9%Language:Shell 0.2%