# Vue-MFE

✨ 基于Vue.js技术栈设计的微前端解决方案。

# What

• 通过中心化路由器 router: VueRouter 的 beforeHook 探测子应用
• 提供资源懒加载器 loader
• 提供远程模块加载 VueMfe.Lazy(SubApp.moduleName.propertyName: string)

# Why

• 支持动态注入路由到中心化路由器 router.addRoutes(routes: VueRoute[], parentPath: string)
• 支持懒加载子应用
• 支持嵌套子应用
• 支持懒加载组件或模块
• 支持独立开发和独立构建(将入口文件构建成 UMD 格式即可)

# How

Vue-MFE 实现的微前端原理是基于基座(VueMfe App)。

1. 当用户初次访问路由/prefix/*
2. 使用VueMfe.createApp(router)注册 微前端主应用App(即基座自身)
3. 判断当前app.$router是否存在路由prefix
4. 动态装载 微前端子应用SubApp 的静态资源和路由
5. 跳转到用户访问的路由prefix实现完整闭环

# installation

# CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-mfe/dist/vue-mfe.js"></script>

# CLI

# yarn

yarn add vue-mfe -S

# npm

npm install vue-mfe --save