构建 Vue3 组件库 - 如何开始

发布于：

构建 Vue3 组件库系列，只是单纯记录与分享我开发组件库过程中有意思的思路、设计等，

它没有办法手把手教你搭建，因为这需要你自己来实践，

同样，我的实践，不一定是最适合你的，你需要通过实践来拥有适合自己的最佳实践，

如果对你有任何帮助，我会很开心。 🎉

通过下方的目录可以快速浏览整个专题，

通过下方的源码可以查看原始代码和文档实例。

Table of contents

展开目录

目录

源码

直到现在单元测试还没开始写。

在编码开始之前，我还花费了数个月的时间调研和尝试了几套构建库的模式，期间遇到了许多问题，诸如：

monolith multirepo monorepo 到底该选哪一个？

网上铺天盖地的文章，不约而同的推荐你使用 monorepo + pnpm workspace 来构建一个组件库：

monorepo
 ┣ docs
 ┣ packages
 ┣ start
 ┣ scripts
 ┣ .eslintrc
 ┣ .prettierrc
 ┣ package.json
 ┗ pnpm-workspace.yaml

对于 pnpm 零经验 的小伙伴来讲，你可能需要从 文档 开始学习一下 pnpm，

然后你又会遇到一系列的问题：

**灵魂拷问**

  • 你真的需要 monorepo 吗？

  • 你真的会持续的维护组件库吗？

  • 你真的会持续的构建组件库相关生态吗？

  • 你真的会持续的解决 issue 吗？

  • 真的会有人使用你的组件库吗？

在调研期间，我购买了一本小册 《基于 Vite 的组件库工程化实战》，评论下面，学员各种环境问题颇多，这个跑不起来，那个不生效的比比皆是。

能跟着把小册啃完，而后折腾出成果的不多，在 🚀 学员优秀实践汇总 中，大部分学员们的成果，基本就是写了 <Button />，而后发布一次 npm，就结束了。

其中最健壮的 Fighting Design，我从这个仓库借鉴了许多，如 eslint utils props 等，这是一个非常棒的仓库，如果你仍然想用 monorepo 试试，可以参考它，当然 Element Plus 也是个不错的选择。

i-want-easy-to-play

正如 JsLin 所说，既然大部分人只是想尝试开发库的过程，那我们便直接按照 monolith 的形式来搭建项目。

完整的制作一个组件库，至少需要三个目录或者项目来支撑整个开发：

./docs/：

用来编写所有的文档和示例，并且需要单独部署。

./start/：

用来本地调试组件，不需要部署，只需要能实时的监听组件源码变化，而后渲染组件到页面，能看到效果即可。

也可以命名为 ./play/

./src/：

组件的源码目录，里面囊括了所有跟组件相关的东西：styles/SFC/hooks/utils/etc...。

monolith
 ┣ docs
 ┣ src
 ┃ ┣ avatar
 ┃ ┃ ┣ src
 ┃ ┃ ┃ ┣ avatar.vue
 ┃ ┃ ┃ ┣ interface.ts
 ┃ ┃ ┃ ┗ props.ts
 ┃ ┃ ┗ index.ts
 ┃ ┣ _hooks
 ┃ ┣ _styles
 ┃ ┣ _utils
 ┃ ┗ index.ts
 ┣ start
 ┣ package.json
 ┣ vite.config.css.ts
 ┗ vite.config.ts

vite + vitepress 只需要这两个库，便可以支撑这三个目录的运作：

接下来，在后面的文章中，将从安装依赖开始，逐步完善整个组件库的构建。