在多个项目中，如果有大量相同的业务模块（表单填写）是共用的，但有些业务模块会随着用户需求来增加或减少一些内容，这个时候这些相同的业务模块如何维护？
如何维护项目？
通俗的解决方案是：哪个项目需要这套业务界面就把代码 copy 到哪个项目，很明显这样做是不可取的，尤其是后期的维护成本，深不可测。所以我们想着把共用的模块封装出来，让其他项目引用，修改配置项即可。
对于 Element-plus UI库来说，它算是颗粒度最小的组件了，它有自己的 input、select、checkbox 等，所以，这是最底层的模块组件，不可再拆，我们需要根据自己各自的业务去整理并分拆逻辑单元。
这里存在一个取舍问题，组件越复杂，配置项越多，越臃肿；组件越小，业务逻辑越简单，越不值得单独维护。
对于不同的业务组来说，把共用的拆成「业务包」即可，也就是常说的「多包管理」，把相关的项目都放在一个仓库中。这种管理方式也可称为「monorepo」，我们就知道了面临着什么具体的技术问题，就要技术选型了，这个选型很简单。
看了看 Github，发现 vue/core 和 element-plus 的包管理使用的都是 pnpm monorepo 来管理的，所以就不需要犹豫了，直接用起来。
什么是 pnpm？可以去看下官网，有详细的介绍。接下来，我们来简单安装。
// 创建一个项目pnpm create vite vue-monorepo// 进入目录cd vue-monorepo// 增加一个文件touch pnpm-workspace.yaml
pnpm-workspace.yaml 的文件内容：
packages: # all packages in subdirs of packages/ and components/ - \\\'packages/**\\\'
按操作手册来看，我们需要在项目根目录建立一个 packages 文件夹，然后创建咱们想共用的模块文件，比如我需要创建一个 basic 的模块：
// 创建目录mkdir basic// 进入目录cd basic // 初始化 npm npm init
这里的初始化是针对于这个模块包的 package.json 初始化，初始化完成后，我们会得到当前这个模块的 package.json 文件，我们填写好模块名、版本号、入口文件、注释等等信息。
现在我们的目录共有两层。一层为根目录，当前的项目目录；另一层为 packages 目录，共用包目录。
当我们需要共有模块相互依赖的话，安装的时候就需要指定 –filter 。
pnpm i cuishunbiao-basic -r --filter cuishunbiao-patient
当我们把 basic 这个模块包开发完成后，就可以通过 npm 发布出去，大体逻辑就是这样。
上面的内容，可通过官网来操作下，很简单，困难的事情在后面，随后我会分享下关于 Vue 多包管理的代码逻辑。
以上代码都可在 Github 上找到，如果和现在代码有出入，那就是我又更新代码啦。https://github.com/cuishunbiao/vue-monorepo
图片授权基于 www.pixabay.com 相关协议
参考项目：
https://pnpm.io/zh/workspaces
https://donaldxdonald.xyz/post/programming/interesting/monorepopart2
https://github.com/vuejs/core
https://github.com/element-plus/element-plus
https://github.com/hug-sun/element3
原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34536.html
![[无效的]](https://www.sudun.com/ask/wp-content/themes/justnews/themer/assets/images/lazy.png)