微应用乾坤框架，整合多种项目真香（持续更新）

微前端的优势

微前端的优点：

1.技术栈无关，主框架不限制接入应用的技术栈，微应用具备完全自主权
2.独立开发、独立部署：微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
3.增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
4.独立的运行时：每个微应用之间状态隔离，运行时状态不共享

入口文件 main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import { DatePicker, TimeSelect } from 'element-ui'
import { directives, filters, momentTools } from '../../utils/comMicroApps'
import 'openlayers-ext/dist/ol-ext.js'

Vue.config.productionTip = false // 关闭生产日志文件

if (momentTools?.length > 0) { // momentTools一般用于全局通用的图表，或时间组件，如moment和echarts
  momentTools.forEach(v => {
    Vue.prototype[v.name] = v.value
  })
}

if (directives?.length > 0) { // 指令方法可全局通用
  directives.forEach(v => {
    Vue.directive(v.name, v.value)
  })
}

if (filters) { // 使用全局过滤器
  Object.keys(filters).forEach((key) => {
    Vue.filter(key, filters[key])
  })
}
Vue.use(TimeSelect) // 使用elementUI的日期组件
Vue.use(DatePicker)

window.myGlobalStore = store
window.ol = ol

Vue.mixin({
  methods: {
    // 这里可全局注入公用方法
  }
})

new Vue({
  router,
  store,
  render: h => h(App),
  created () {}
}).$mount('#app')

comMicroApps文件示例

import dayjs from 'dayjs' // 时间插件
import echarts from 'echarts' // 图表插件
import vLazyLoad from '@/assets/myUtils/vLazyLoad' // 懒加载
import * as filters from '@/assets/myUtils/filter' // 自定义的过滤器

const directives = [
  { name: 'lazyLoad', value: vLazyLoad }
]

const momentTools= [
  { name: '$dayjs', value: dayjs },
  { name: '$echarts', value: echarts }
]

export {
  directives,
  filters,
  momentTools
}

常用API 说明

API 用处 类比
registerMicroApps 主应用用来注册多个子应用的函数 类似于 Vue 和 React 的路由
start 启动主应用 类似于 React.js 的 render 函数和 Vue.js 的 new Vue()
loadMicroApp 手动加载子应用 也类似于 React.js 的 render 函数和 Vue.js 的 new Vue()，只不过更自由了
prefetchApps 预加载子应用 类似于 Webpack 的 prefetch 功能
addGlobalUncaughtErrorHandler 页面报错时可以用于上报
removeGlobalUncaughtErrorHandler 移除时的错误监听
initGlobalState 初始化全局状态 类似于 Redux 的 createStore 和 Vue 的 new Vue.Store()