微前端qiankun的基本使用（vue-element-admin作为项目模版）

qiankun架构特点

• 技术栈无关
• 主框架不限制接入应用的技术栈，微应用具备完全自主权
• 独立开发、独立部署
• 增量升级
• 利于实施渐进式重构
• 微应用仓库独立，前后端可独立开发，主框架自动完成同步更新
• 微应用独立运行
• 微应用之间状态隔离，运行时状态不共享
• 劣势：接入难度高、移动端少，管理端多

主应用netmoni_master改造

工程项目目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 图片等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── micro  （重点）         # qiankun微前端配置
│   ├── router （重点）         # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局 主题（白天/黑夜）样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   ├── permission.js          # 权限管理
│   └── settings.js  （重点）   # 项目配置
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

子项目配置：子应用注册

注意上述目录中重点标注的几个目录，其中子项目配置文件：
src/micro/app.js

const arr = window.origin.split(':')
const origin = arr[0] + ':' + arr[1]export function getApps(){return [/*** name: 微应用名称 - 具有唯一性* entry: 微应用入口 - 通过该地址加载微应用,注意与对应子应用配置保持一致* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用*/{name: 'netmoni_child1',entry: origin + ':31325',container: '#child1_frame',activeRule: '/sub/child1'//路由模式mode对应是history}]
}

启动文件：src/micro/index.js

mport {registerMicroApps, // 注册子应用方法addGlobalUncaughtErrorHandler, // 添加全局未捕获异常处理器start // 启动qiankun
} from 'qiankun'// 获取子应用信息
import { getApps } from './app'export function startMicroApps() {// 注册微前端const apps = getApps()console.log('startMicroApps', apps)registerMicroApps(apps,