本文介绍了作者开发个人组件库Onionl-UI的历程。该项目并非为了重复造轮子，而是为了深入学习前端工程化实践。文章详细阐述了技术选型，包括Vue 3 + Vite的黄金搭档，以及UnoCSS原子化CSS引擎的应用。同时，文章还介绍了组件库的打包策略，以及如何使用Vitest进行单元测试。作者强调了实践的重要性，并表示将不断完善项目。尽管目前项目还处于早期阶段，但作者希望通过此项目得到成长，并与读者共勉。

关键要点

• 🛠️ 技术选型：项目采用Vue 3作为基础框架，Vite作为构建工具，并选择了轻量灵活的UnoCSS作为样式解决方案。Vite因其高效的开发体验和底层使用Rollup的特性而受到青睐，UnoCSS则因按需生成特性而减小了样式文件体积。

• 📦 组件库打包策略：打包过程包含三个核心任务：收集源文件、构建不同格式的输出、复制必要的文档文件。打包配置使用RollupOptions和Vite的插件，并生成类型声明文件，确保组件可以被其他开发者有效使用。

• 🧪 组件单元测试：使用Vitest作为测试框架，并结合happy-dom模拟DOM环境，以及@vue/test-utils测试工具集，对组件进行了单元测试。以Button组件为例，测试了其默认内容，确保了组件的基本功能和渲染效果。