Vue3 主流 UI 库方案分析
目的
如果想开发基于Vue3的组件库，那么参考现成主流的开源库技术方案肯定是首选。
组件库有哪些核心组成？
- 组件源代码
- 文档： 基本用例文档。
- Playground： 用于本地开发调试。
- 代码库管理： 存放代码的地方，目前主流的是Monorepo 和 Multi-repo方案，区别就是单库存储和多库存储。
Vue3 有哪些可用的组件库?
Vue3 组件构建工具有哪些？
- Vite： 基于Rollup，配置简单，能够兼容Rollup配置。
- Rollup： 需要比较熟练Rollup配置，配置比较复杂。
Vue3 组件库文档如何生成？以及使用什么技术？
- VitePress： 使用简单。
- Nuxt: 使用复杂。
Vue3 组件库使用哪种 Monorepo 方案？
- Pnpm Workspace（推荐）：轻量级依赖管理工具，适合小型到中型项目， 大多数开源组件库开始转用该方案。
- Lerna：广泛用于开源项目，适合中大型项目。
- Turborepo：由Vercel 推出，有点构建缓存和并行执行，适合大型项目。
- Rush：由微软推出，适合大型项目。
- Nx：一般用于复杂大型项目。
更全面的Monorepo比较可以参考 带你了解更全面的 Monorepo - 优劣、踩坑、选型。
对比
| 框架 | Element Plus | Nuxt UI | Radix Vue | Prime Vue | Flowbite Vue |
|---|---|---|---|---|---|
| 文档 | VitePress | Nuxt | Nuxt & Vite | Nuxt | VitePress |
| Playground | Vite | Nuxt | Nuxt & Vite | Rollup | 无 |
| 组件打包工具 | Vite | Nuxt Module Builder | Vite | Rollup | Vite |
| Monorepo | PNPM | PNPM | PNPM | PNPM | 无 |
总结
实现组件需要做很多基础的建设，比如文档构建，打包工具配置，文档和代码包的发布，版本的控制，Monorepo 的依赖管理，Comimit 规范，流水线的脚本的配置。