Code Monkey home page Code Monkey logo

qiankun-umi's Introduction

umi + qiankun 搭建微前端架构

用umi框架实现qiankun相对简单一点,只需配置.umirc.ts一个文件

前端技术栈

React:javascript框架,Facebook开源
Umijs: 插件化的企业级前端应用框架,阿里开源
qiankun: 微前端解决方案,阿里开源
Ant-design pro: Ant Design和umi封装的企业级中后台前端/设计解决方案
Redux: 状态共享库
Hooks: 不写class情况下使用状态
Typescript

1、最简实现umi + qiankun

主要参考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可以访问子应用

2、基座登陆功能

  • 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需要走网关才能测试

qiankun-umi's People

Contributors

cc3213252 avatar

Watchers

 avatar

qiankun-umi's Issues

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.