微信扫一扫article
README
🚀 Vibe设计系统
Vibe设计系统是一系列实用的包集合，旨在加速开发流程，同时显著提升用户体验。它通过提供丰富的组件、实用的样式以及详细的指南，助力开发者高效构建React.js应用程序。
🚀 快速开始
Vibe设计系统能有效提升开发效率，为React.js应用开发提供有力支持。以下是使用该系统的基本步骤。
📦 安装指南
你可以使用npm或者yarn来安装@vibe/core包：
npm install @vibe/core
# 或者
yarn add @vibe/core
为了加载所有相关的CSS令牌，你需要在应用程序根文件中导入令牌文件：
import "@vibe/core/tokens";
💻 使用示例
基础用法
从库的主入口点导入组件，以下是导入Button组件的示例：
import { Button } from "@vibe/core";
✨ 主要特性
Vibe设计系统拥有丰富的生态系统，涵盖多个实用的包，为开发提供全面支持：
- @vibe/core：核心组件库，提供基础组件支持。
- @vibe/icons：图标库，包含各种实用图标。
- @vibe/testkit：Playwright测试工具包，方便进行测试。
- @vibe/codemod：代码转换工具和CLI工具，提升开发效率。
- monday-ui-style：样式基础（包含在
@vibe/core中），提供统一的样式规范。 - vibe-storybook-components：Vibe Storybook组件，便于组件展示和调试。
- storybook-addon-playground：Storybook组件游乐场Addon，提供交互式的组件开发环境。
📚 详细文档
旧版本说明
Vibe 2（monday-ui-react-core）将不再接收新功能或改进，但会继续获得必要的关键错误修复。我们强烈建议你遵循迁移指南升级到正在维护的最新版本Vibe 3，该版本包含最新的改进、新组件和持续支持。有关版本2的文档，请访问vibe.monday.com/v2。
贡献说明
我们欢迎每一位贡献者！请阅读我们的贡献指南。