用umi框架实现qiankun相对简单一点,只需配置.umirc.ts一个文件
React:javascript框架,Facebook开源
Umijs: 插件化的企业级前端应用框架,阿里开源
qiankun: 微前端解决方案,阿里开源
Ant-design pro: Ant Design和umi封装的企业级中后台前端/设计解决方案
Redux: 状态共享库
Hooks: 不写class情况下使用状态
Typescript
主要参考umi官网创建项目
参考plugin-qiankun插件配置
- mkdir main-app && cd main-app
- yarn create @umijs/umi-app
- yarn add @umijs/plugin-qiankun -D
- .umirc.ts注册qiankun,配置路由
- mkdir sub-app-1 && cd sub-app-1
- yarn create @umijs/umi-app
- yarn add @umijs/plugin-qiankun -D
- .umirc.ts注册qiankun
- package.json增加应用名字
- yarn start方式先起基座再起子应用
- localhost:8000可以访问基座
- localhost:8000/sub-app-1可以访问子应用
- npm install --save ahooks(等同于yarn add ahook)
- yarn add qs
- pages下增加login页面
- services下增加user接口
- utils下增加token操作
- models下增加umi统一model管理
- src下新增app.ts,请求头加token,处理402跳登陆
注意,这块内容后台只起user一个服务即可,其中current_user和menu由于网关需要加入user_id需要走网关才能测试