从 0 到 1 搭建 Vue 组件库框架

文档是组件库的一个非常重要的能力，本文将介绍如何在 vite 生态下搭建一个具有用例展示、API 说明、演练场功能的组件库文档网站。

文档是组件库的一个非常重要的能力，本文将介绍如何在 vite 生态下搭建一个具有用例展示、API 说明、演练场功能的组件库文档网站。

经过上半篇的探索，我们完成了所有实现组件库的样式方案的前期准备，下半篇我们将正式开始实践样式方案的实现、集成、优化、验证，逐步完善 @openxui/styles 模块。

我们的组件库样式方案中，除了会使用到经典的 CSS 预处理器，还会纳入一个很新的 CSS 工具——UnoCSS。样式方案需要建立在先前构建方案的基础之上，甚至还需要对已有的构建方案做出改进。

本章，我们为自己的组件库定制专门的打包体系。将重复部分抽取为预设、集中管理构建配置、提高自动化程度、支持复杂的构建行为

本期我们会给自己的组件库接入全套完善的 Lint 工具链，这一期的分享对于普通项目也具有极高的参考性，任何前端项目都可以按照这样的方法实现代码风格的规范化。

上半部分，我们通过集成构建工具 Vite 使组件库能构建出产物。下半部分，我们将要集成 TypeScript，为组件库的开发注入类型系统的支持。

在上一章节中，我们完成了“新建文件夹”的操作，使用 pnpm 为我们的组件库搭建了 monorepo 目录结构。在本章节，我们的组件库工程会开始初成体系——加入构建工具 Vite，实现产物生成。

讲述 pnpm、monorepo、包管理的前置知识以及相关技术的选型理由，并搭建出 monorepo 组件库项目的目录结构。

以组件库搭建的实战入手，逐步掌握工程化的思路与实践，最终不仅仅是搭建组件库的程度，而是可以灵活地组合各种工具，自由地定制前端工程的各种细节，当然也包括日常 Web 应用的架构。