1.对老的项目而言，一些成熟的产品或者说稳定的功能模块想直接复用，毕竟重新开发会增加项目的成本。

2.就将要开发的项目而言，“微"前端 ，是将一个的项目拆分成若干个小项目，每个小的项目有专门的团队去开发与维护。最终要将这些小的项目拼成一个大项目。

可能很多人都会面临着第一种中框，而我恰恰是考虑第二种状况的人。以下就是我使用vue+vue-router 实现微前端的一个简单的例子.

portal 相当与一个总的基座 将app1和App2两个应用加载到portal上

说下实现的思路：

1.将子应用打包成libiary 输出。如App1打包出来是childa。他就是整个vue项目的根实例，通过vue mount 我们就可以将实例挂载到页面上。
    
2.我们约定下前缀 比如说，'/childa' 分配给我们的childa服务 我们可以用vue-router去做监听，当路由发生变化时，当path 以'/childa'
开头，我们去加载childa服务，加载的方法很常见，将js引入进来。这个时候  我们就可以 直接通过 1.直接渲染完成了。

完事了，是不是很简单。

这个也是个人对微服务不同理解之处。后端的微服务是可以相互调用的。为什么我们前端没有呢？那么美好的东西，难道我们就不配拥有吗？

想到这里，不得不得前端确实存在缺陷，举个栗子，A和B两个子服务前端想相互调用，A和B说来你给我打开个窗口。这个时候如果 B正在运行，这件事是可以完成。如果不在呢？ 这就是重点，AB都运行在浏览器上，自由同时浏览过，才会启动服务。不像服务端，一直在那里运行。像什么时候用就什么时候用。

但是，有些东西也不是不可能的，因为咱们的portal是始终在的在啊，没有那么强大咱们可以少做一点嘛，举个栗子，最常见的用户登录后的token 菜单啊。。。。相关的一堆东西在我们登录portal的时候已经获取一遍了。如果子项目需要这些，我再请求一遍？我为什么能直接从portal拿。理论来说是可以的呀！ 在栗子中 我用的是 provide/inject的方式，将公共（获取X项目的vuex getters方法）方法注入到每个子项目的根节点。子项目随时项目就可以随时调用，非常的方便。

另外一个场景。子项目线基本上都是没有菜单的，子项目想打开其他菜单时候 需要找portal 进行帮忙，所有，在服务和服务之间增加了 事件调用。P项目 注册一个事件，A项目就可以进行调用了，至于同步还是异步，有无参数及返回值，这个慢慢协商。

其实我写的这个例子更多的是为了这两个问题。

一.数据可以共享

二。事件可以共用

能复用就复用吧，谁也不爱写无用的代码，为啥还要去写呢？

刚兴趣的可以下载代码看看，多交流！<br/>
感谢观看，喜欢的话 留下你们的评论和小爱心！

上述的贴图是我能想到的一些问题，

感兴趣的可以下载代码看看，有什么问题评论区交流或者邮箱a3145141@163.com！

感谢观看，留下你们小爱心呦！