DEV Community
·
React中的设计系统——脚手架和设置（第0部分）
💡
原文英文，约2500词，阅读约需9分钟。
📝
内容提要
本文介绍了创建和维护UI库或设计系统的方法，使用React和Tailwind进行演示。通过Vite创建项目，使用Storybook开发UI，添加Tailwind样式，以及使用Prettier和ESLint保持代码风格一致。最后，介绍了使用Plop生成组件脚手架。
🎯
关键要点
- 创建和维护UI库或设计系统是复杂的。
- 使用React和Tailwind进行演示，适用于其他库。
- 使用Vite创建项目，安装依赖并运行开发命令。
- 使用Storybook作为UI开发的标准工具，支持多种库。
- 添加Tailwind样式，配置文件以扫描所需文件。
- 使用Prettier和ESLint保持代码风格一致。
- 定义第一个组件并创建导出文件。
- 使用Storybook编写组件故事以展示组件。
- 使用Plop生成组件脚手架以简化开发过程。
- 在下一部分将探讨测试、视觉回归和原子设计。
➡️
