前端环境antdumidva用umi的requesthttps://github.com/umijs/umi-request/blob/master/README_zh-CN.md前端代码：request

React的变化很快，在我之前用习惯了直接hashHistory、browserHistory，而react-router4改变后就不习惯了，索性就直接使用了阿里的umijs。

上图描述了qiankun微前端的运行过程,父子应用之间可以独立运行.没有子应用,不影响父应用的运行.没有父应用,子应用也是可以独立运行.qiankun官网描述步骤非常详细:https://qiankun.umijs.org

一些大的项目，需要一个前端中台，承载各项目组开发的应用，本篇文章是在工作实践后所写，网上找了好多例子也少，记录下来后面供自己预览qiankun是一个基于single-spa的微前端实现库umi插件，提供了@umijs

1.配置式路由在配置文件（.umirc.ts或者config/config.ts）中通过routes配置路由，就是配置式路由。如果没有routes配置项，则自动对src/pages目录生成约定式路由。

1.配置首先，我们前面提到过，Umi的配置在.umirc.ts或config/config.ts(二选一，.umirc.ts优先级更高)文件中。配置按约定进行，例如，需要适用AntDesign布局的话，就设置layout配置，需要多语言配置，就设置locale:layout:{name:'AntDesign'},locale:{default:'zh-CN'},

经过技术调研和讨论，最终ui框架确定使用AntDesign，所以前端底层框架就选择了UmiJS。Umi整合了阿里的Dva，AntDesign，可以说是阿里前端工具

1.配置首先，我们前面提到过，Umi的配置在.umirc.ts或config/config.ts(二选一，.umirc.ts优先级更高)文件中。配置按约定进行，例如，需要适用AntDesign布局的话，就设置layout配置，需要多语言配置，就设置locale:layout:{name:'AntDesign'},locale:{default:'zh-CN'},

需要了解的目录及文件：建立第一个umi项目并启动后，可能会有一个疑问：这个项目的启动文件在哪呢？一般来说，我们通过react的脚手架建立的项目中，在src文件夹的根目录会有一个index.js文件，在index.js里我们通过ReactDOM的render命令来启动项目。然而在umi的项目中，src根目录下并没有index.js文件，也找不到render这样的指令代码。查看package.json

经过技术调研和讨论，最终ui框架确定使用AntDesign，所以前端底层框架就选择了UmiJS。Umi整合了阿里的Dva,AntDesign，可以说是阿里前端工具

需要了解的目录及文件：建立第一个umi项目并启动后，可能会有一个疑问：这个项目的启动文件在哪呢？一般来说，我们通过react的脚手架建立的项目中，在src文件夹的根目录会有一个index.js文件，在index.js里我们通过ReactDOM的render命令来启动项目。然而在umi的项目中，src根目录下并没有index.js文件，也找不到render这样的指令代码。查看package.json

文章目录UmiJS上手一、安装环境二、目录结构2.1目录结构2.2根目录2.2.1package.json2.2.2.umirc.ts2.2.3.env2.2.4dist目录2.2.5mock目录2.2.6public

前置条件react，这里使用umiJs脚手架使用redux数据流，这里使用dvaJS数据流创建页面「TestPage」，作为例子页面创建按钮组件「MyInput」，作为例子按钮部分代码目录Demo/node_modules

前置条件react，这里使用umiJs脚手架使用redux数据流，这里使用dvaJS数据流创建页面「TestPage」，作为例子页面创建按钮组件「MyInput」，作为例子按钮部分代码目录Demo/node_modules

参考：环境变量多环境多份配置https://v2.umijs.org/zh/config/#define我的需求：在不同环境（dvl、sit）下打包，请求基础地址也需要随环境的变化而改变遇到的困难：umiv3

father：https://github.com/umijs/fatherumi-plugin

1.创建umi3工程命令行yarncreate@umijs/umi-app2.安装umi3的qiankun插件创建的umi3并不包含qian

qiankun是一个基于single-spa的微前端实现库umi插件，提供了@umijs/plugin-qiankun供umi应用一键切换成微前端架构系统。

-当点击商品质量时：目录文件这里运用了yarn，这里有详情：https://classic.yarnpkg.com/zh-Hans/docs/install/Umi的官网也有教安装依赖https://umijs.org

这里我们传入自定义变量REGION，值为'th'REGION=th umidev2.config.js内使用define透传(文档：https://umijs.org/config#define)exportdefault

DvaJS，它是处理数据流的一个react应用框架，在开发React时有不理解State，view，Action，connect，dispatch的必看这个UmiJS，它是一个企业级react应用框架，

redux-saga、umijs、dvajs实战入门教程—2人已学习课程介绍redux-saga，一个用于管理redux应用异步操作的中间件；umijs，可插拔的企业级react应用框架；dvajs，Reactandreduxbased

webpackhot.jpg写在前面在现在前端工程化的大背景下，webpack成为了最常用的打包工具之一，有一社区或者优秀团队，也都以Webpack为基础构建自己的脚手架，比如我们所熟知对的vue-cli，umijs

新项目开始使用umijs3.0后，其目前只有typescript版本，所以也全面尝试使用typescirpt。

前言react（https://react.docschina.org/）umi--路由配置（https://umijs.org/）dva--数据流方案（https://dvajs.com/guide/

首先简单认识一下：官网地址：https://umijs.org/zh/guide/umi，中文可发音为乌米，是一个可插拔的企业级react应用框架。

一、父项目的搭建//1.新建项目yarncreate@umijs/umi-app//2.下载依赖yarn//3.在packjson的devDependencies中添加qiankun依赖yarnadd@

前提，用umi建立两个项目，参考链接一、父项目1.package.json//yarnadd@umijs/plugin-qiankun-D"devDependencies":{"@umijs/plugin-qiankun

项目关联(以后在说吧，没有想好)大厂基本在使用的美团https://tech.meituan.com/2019/12/26/meituan-bifrost.html阿里https://qiankun.umijs.o

本系列教程源码地址：Github一、搭建react框架环境这里，我们选择阿里的UmiJS+DvaJ

://zhuanlan.zhihu.com/p/...两个月前，我们正式发布了qiankun2.0，在经历了15+beta版本及大量的内部打磨之后，今天我们将正式发布基于qiankun2.0的全新的@umijs

1、什么是umi，为什么是umi？Umi是蚂蚁金服的底层前端框架,以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

1、什么是umi，为什么是umi？Umi是蚂蚁金服的底层前端框架,以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

ps:多的废话就不说了，反正就是使用react技术的选择此框架绝对没错，666666；二、环境准备：你的本地环境需要安装yarn、node和git，使用到的技术栈基于ES2015+、React、UmiJS

demo地址：https://github.com/umijs/umi-dva-user-dashboard语法学习网站：http://www.runoob.com/react/react-tutorial.html

放上参考文档:https://github.com/umijs/umi-requestrequest.ts文件import{extend}from'umi-request';import{notification

网络请求数据走向；1.在utils/request.js封装网络请求；/***request网络请求工具*更详细的api文档:https://github.com/umijs/umi-request*/

这次以@umijs/use-request为例子，分析其功能思路与源码。

umi.js中有运算符Safari和低版本Chrome报错，参考umijs.org文档，配置正确的targets在umirc.js中配置targets2.1.0+配置浏览器最低版本，会自动引入polyfill

需求描述进入某一个页面，如果鉴权失败，则跳转到登录页面进行登录，登录成功，返回之前的页面实现方式umijs官方文档，在.umirc.js自定义路由的时候，添加wrapper，实现鉴权拦截然而折腾很久，还是没实现

介绍umi官方宣称是一个可插拔的企业级react应用框架。umi以路由为基础的，支持类next.js的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，目前内外部加起来已有50+的插件。umi是蚂蚁金服的底层前端框架，已直接或间接地服务了600+应用，包括支持java、node、

介绍UMIjs在前端的范围内算是比较广泛选择的技术栈，因为其开箱即用而且集合了大部分前端开发中的常用工具，并且整合了Antd，对前端开发，特别是类似于控制台的开发都有较大的优势。

目录啥是tyarn啥是UmiJS安装UmiJS安装命令解决步骤测试啥是tyarn1分钟浏览解决答案https://blog.csdn.net/Delicious_Life/article/details

@umijs/plugin-locale封装了react-intl,api与react-intl基本相同，并做了封装使用起来更加方便。全部api

收集资料相关网站1、umijs学习链接（https://umijs.org/）；2、dva学习链接（https://dvajs.com/）；3、antd学习链接（https://ant.design/）

官方API：https://github.com/umijs/umi-request或者https://www.npmjs.com/package/umi-request二者文档说明差别不大。

html-tutorial.htmlantd-mobilehttps://mobile.ant.design/index-cnantdhttps://ant.design/index-cnumijshttps://umijs.org

1.umi安装详见这里：https://umijs.org/zh/guide/getting-started.html#%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%872.umi

1创建项目我们选择使用UmiJS作为构建工具。

本文举例用的Demo是用的umi+@umijs/plugin-qiankun的组合，项目结构是一个主应用mainSystem，两个子应用subSystemA，subSystemB。