项目介绍

我开发的是一个社交软件，现在支持了四个用户，动态，聊天，扩列四个模块，项目已上生产，但不保证插件系统的思路百分百正确，也在验证中

亮点

这个项目区别于其他开源项目的亮点是他可以作为一个插件存在， 一般开源项目都是提供一个项目模板，别人基于这个模板去二开，而我这个项目可以作为插件嵌入到别人已有的vue项目当中，和使用vue插件是一模一样的，不需要改动原项目，只需要加个路由页面，使用项目提供的 view（页面组件就行）

开源地址

社交联盟

体验地址

为什么要把业务模块做成可插拔模式

因为我做的目标是做一个可运营的开源社交产品， 想让其他开发者可以基于我这个开源项目的基础上二次开发其他的满足运营条件的社交软件，方便其他人二次开发时复用逻辑，和方便使用，当成一个插件使用，而不是一个项目模版使用，可以在任何已有项目上加入此项目

技术栈

1. 支持原生h5和uniapp两个平台，h5使用element-plus，uniapp不支持vue-router，所以没有用uniapp开发h5，关于磨平差异化 看这里->socialuni-native模块
2. lerna 分包管理
3. 没有使用pinia，而是直接使用的reactive()包装对象作为store，因为多个包使用同一个pinia我没找到好办法， 差异详见 # 为什么我认为 Vue3 不再需要三方的 store，pinia，直接使用 reactive 对象就行？

export const socialuniPluginsModule: UnwrapNestedRefs<SocialuniPluginsModule> = reactive(new SocialuniPluginsModule())

1. npm跨模块中通信使用 mitt vue的发布订阅插件

2. 未来还想尝试组件的注入，还没有很好的思路，恳请各位大佬给建议

上代码结构

socialuni项目

socialuni项目为基础插件项目，所有子项目都需要引入这个项目，也是插件系统的核心代码

socialuni插件声明文件中，负责调用其他子模块注册的插件，把插件信息保存到插件store中并触发他们启动钩子函数

包含一个插件store文件SocialuniPluginsModule.ts

这个文件的核心功能是存储各子模块注册的插件信息，插件接口声明了一些插件支持的回调，比如项目启动时的回调，收到消息的回调，websocket连接成功的回调，请求的回调等等

socialuni-native模块

这个模块负责磨平平台差异化，插件支持 h5原生和uniapp两个平台，通过加载不同的模块来区分平台

socialuni-user模块

user模块的插件，注册了插件的回调函数

比如在user模块的插件声明中，写上请求时追加token的代码，在请求出错时，根据错误码判断，可以跳转至登录页

跨npm模块通信

当用户需要登录时，发出通知，监听此事件的其他模块，可以触发相应方法

总结

目前看起来原理不难，但是我是个小菜鸟，自己一步一步摸索，用了一个多月时间，属实不易了 哈哈，没少找chatGPT帮忙