前面使用了 11 篇文章分享基于 vue3 、Monorepo 的组件库工程完整四件套（组件库、文档、example、cli）的开发、构建及组件库的发布。本文属于这 11 篇文章的扩展 —— 如何发布到 GitHub 上以及如何快速利用 GitHub 发布组件库文档。这样优雅哥的《组件库框架》系列便形成了一个闭环：从开发，到开源。在开始本文之前，请...

回顾第一篇文章中谈到的组件库的几个方面，只剩下最后的、也是最重要的组件库的打包构建、本地发布、远程发布了。1 组件库构建组件库的入口是 packages/yyg-demo-ui，构建组件库有两个步骤：添加 TypeScript 的配置文件： tsconfig.json添加 vite.config.ts 配置文件，配置打包方式。1.1 tsconfig.json在 packages/yyg-d...

上文创建了一堆 utils、component-info，并实现了新组件模块相关目录和文件的创建。本文继续实现后面的内容。1 组件样式文件并导入在 src/service 目录中创建 init-scss.ts 文件，该文件导出 initScss 函数。由于 .vue 类型的组件的样式就直接写在了 style 中，故首先判断组件类型是否是 tsx，tsx 类型的组件才进行这一...

上文搭建了组件库 cli 的基础架子，实现了创建组件时的用户交互，但遗留了 cli/src/command/create-component.ts 中的 createNewComponent 函数，该函数要实现的功能就是上文开篇提到的 —— 创建一个组件的完整步骤。本文咱们就依次实现那些步骤。（友情提示：本文内容较多，如果你能耐心看完、写完，一定会有提升）

前面的文章分享了组件库的开发、example、组件库文档，本文分享组件库 cli 开发。1 为什么要开发组件库 cli回顾一个新组件的完整开发步骤：1 在 packages 目录下创建组件目录 xxx： {代码...} 2 在组件库的入口模块 packages/yyg-demo-ui： {代码...} 3 packages/scss/components/ 目录： {代码...} 4 组件库文档： {代...

前面完成了组件库的开发环境搭建和 example，咱们可以在 example 中通过业务驱动组件的开发和完善。但组件库开发的目的是给其他开发人员使用，这时候就需要通过文档来展示组件库的使用以及各个组件的 API、方法、插槽等。本文在前面文章的基础上继续实现组件库文档的开发和构建。组价库的文档咱们使用 vitepress 来实现...

前面用了大量篇幅介绍组件库的开发环境搭建，包括：创建组件、创建组件库入口、组件库样式架构、组件库公共包，做了一大堆工作，还不能预览示例组件 foo，本文便搭建 example 开发环境和打包构建，并在 example 中使用组件库。

本文继续组件库开发环境的搭建，前面两篇分别介绍了组件库中组件项目的初始化、组件库 CSS 架构，本文介绍通用工具库的搭建。在组件开发过程中，可能会调用一些通用的工具函数，这些工具函数便可以提取到一个独立的 npm 包中。

常见的 CSS 架构模式有很多：OOCSS、ACSS、BEM、SMACSS、ITCSS 等，其中 SMACSS 和 ITCSS 很相似。我在企业级项目中最常使用的是简化版的 ITCSS + BEM + ACSS，所以本文首先介绍这三种模式，其他模式大家自己上网查看。