这段时间一直在看微前端方面的内容，调研了比较热门的框架qiankun，也看了很多大佬的帖子，文章等，根据这两天自己的Demo实践，记录下学习内容。
本文举例用的Demo是用的umi+@umijs/plugin-qiankun的组合，
项目结构是一个主应用mainSystem，两个子应用subSystemA，subSystemB。
项目都是用umi的脚手架生成的，比较简单基础 ：
yarn create umi
注意：demo用的版本如下，不同版本的umi会有一些比较大的差异，具体的可以看下umi官网
"umi": "^2.7.7","@umijs/plugin-qiankun": "^1.3.1"
注意： 如果是刚开始接触的话，可以把项目放到根目录下先进行配置下，这里的话我是后面为了部署时 尝试项目在非根目录下的情景来配的；/h5/
主应用配置：
// mainSystem/.umirc.jsexport default {treeShaking: true,routes: [{path: '/',component: '../layouts/index',routes: [{ path: '/', component: '../pages/index' }, { path: '/subSystemA' }, { path: '/subSystemB' }]}],// base: 'h5/mainSystem',// publicPath: '///',base: '/h5/mainSystem', // 部署时非根目录需要配置路径前缀publicPath: '/h5/mainSystem/',outputPath: '../dist/mainSystem',plugins: [// ref: /plugin/umi-plugin-react.html['umi-plugin-react',{antd: true,dva: true,dynamicImport: { webpackChunkName: true },title: 'mainSystem',dll: true,locale: {enable: true,default: 'en-US'},routes: {exclude: [/models\//, /services\//, /model\.(t|j)sx?$/, /service\.(t|j)sx?$/, /components\//]}}],['@umijs/plugin-qiankun',{master: {apps: [{name: 'subSystemA',// entry: '/h5/subSystemA',entry: '//localhost:8001/subSystemA',base: '/h5/mainSystem/subSystemA',path: '/mainSystem/subSystemA',mountElementId: 'root-slave',props: { loading: true }},{name: 'subSystemB',// entry: '/h5/subSystemB',entry: '//localhost:8002/subSystemB',base: '/h5/mainSystem/subSystemB',path: '/subSystemB',key: 'subSystemB',mountElementId: 'root-slave'}],jsSandbox: true,prefetch: true}}]]};
子应用配置：
// subSystemA/.umirc.jsexport default {treeShaking: true,routes: [{path: '/',component: '../layouts/index',routes: [{ path: '/', component: '../pages/index' }]}],base: '/h5/mainSystem/subSystemA', // 部署时非根目录需要配置路径前缀runtimePublicPath: false,publicPath: '/h5/subSystemA/',outputPath: '../dist/subSystemA',mountElementId: 'subSystemA-root',plugins: [// ref: /plugin/umi-plugin-react.html['umi-plugin-react',{antd: true,dva: true,dynamicImport: { webpackChunkName: true },title: 'subSystemA',dll: false,locale: {enable: true,default: 'en-US'},routes: {exclude: [/models\//, /services\//, /model\.(t|j)sx?$/, /service\.(t|j)sx?$/, /components\//]}}],['@umijs/plugin-qiankun/slave', {}]]};
内容比较简单，，应为插件都给做好了，要做的是熟悉下api进行主应用，子应用的配置，简单demo版的就这样，后续还需要实际看下研究下
demo地址：
/gaomeng965/SelfStudy.git
