如何快速上手OpenDesign：从安装到第一个组件的完整教程

如何快速上手OpenDesign：从安装到第一个组件的完整教程

【免费下载链接】opendesignThe repository of OpenDesign website项目地址: https://gitcode.com/openeuler/opendesign

前往项目官网免费下载：https://ar.openeuler.org/ar/

OpenDesign是openEuler社区推出的开源设计系统，提供了丰富的UI组件库和设计资源，帮助开发者快速构建美观、一致的用户界面。本教程将带你从环境搭建到成功使用第一个组件，轻松开启OpenDesign之旅。

📋 准备工作：环境要求与依赖安装

在开始使用OpenDesign前，请确保你的开发环境满足以下要求：

• Node.js 14.x 或更高版本
• npm 6.x 或 pnpm 5.x 包管理工具
• Git 版本控制工具

首先，通过Git克隆OpenDesign仓库到本地：

git clone https://gitcode.com/openeuler/opendesign cd opendesign

⚙️ 一键安装：项目依赖配置

OpenDesign采用pnpm workspace管理多包项目，安装依赖只需一个简单命令：

pnpm install

这个命令会自动安装所有子包（包括components组件库和portal文档站点）的依赖，无需手动进入各个目录操作。安装完成后，你会看到项目根目录下生成了node_modules文件夹和pnpm-lock.yaml文件。

🚀 启动开发服务器：实时预览组件效果

安装完成后，通过以下命令启动开发服务器：

pnpm dev

该命令会运行portal文档站点的开发模式，默认监听本地3000端口。启动成功后，访问http://localhost:3000即可看到OpenDesign的文档页面，包含组件示例、API文档和使用指南。

OpenDesign文档首页展示了丰富的组件和设计资源

🎯 第一个组件：使用Button按钮组件

OpenDesign提供了多种预设样式的UI组件，我们以最常用的Button组件为例，学习如何在项目中使用。

组件导入

Button组件的源代码位于packages/components/button/src/button.tsx，通过以下方式导入：

import OButton from '@opendesign/components/button';

基础使用示例

在Vue组件中使用OButton的基础示例：

<template> <div> <OButton type="primary" status="success"> 点击我 </OButton> </div> </template> <script setup> import OButton from '@opendesign/components/button'; </script>

组件属性说明

Button组件支持多种属性配置，主要包括：

• type：按钮类型，可选值为default、primary、text
• status：状态样式，可选值为success、warning、danger、info
• size：尺寸大小，支持small、medium、large
• disabled：是否禁用按钮
• animation：是否启用点击动画效果

OpenDesign提供多种样式的Button组件，满足不同场景需求

🔍 探索更多组件

OpenDesign组件库包含丰富的UI元素，除了Button外，还提供了：

• Card卡片组件（packages/components/card/）
• Checkbox复选框组件（packages/components/checkbox/）
• Radio单选框组件（packages/components/radio/）

每个组件都有完整的类型定义（如button-types.ts）和样式文件（如button.scss），确保使用时的类型安全和样式一致性。

📚 深入学习资源

• 组件源代码：packages/components/
• 全局样式变量：packages/components/style/
• 开发配置文件：tsconfig.json

通过本教程，你已经掌握了OpenDesign的基本使用流程。现在就开始探索更多组件，构建你的精美界面吧！如有任何问题，欢迎查阅项目文档或参与社区讨论。

【免费下载链接】opendesignThe repository of OpenDesign website项目地址: https://gitcode.com/openeuler/opendesign