Arco Design 开源项目教程

项目介绍

Arco Design 是一个基于 React 的全面 UI 组件库，旨在提供超过 60 个精心设计的组件，支持自定义主题和 TypeScript 友好。该项目由 Arco Design 团队维护，旨在帮助开发者快速构建高质量的 Web 应用。

项目快速启动

安装

首先，使用 npm 或 yarn 安装 Arco Design 包：

npm install @arco-design/web-react
# 或者使用 yarn
yarn add @arco-design/web-react

引入和使用

在项目中引入 Arco Design 的 Button 组件并使用：

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';

function App() {
  return (
    <Button type='secondary'>
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

应用案例和最佳实践

自定义主题

Arco Design 支持通过设计令牌自定义主题，提供了两种自定义方式：

1. 使用 less-loader 进行主题定制。
2. 使用 Design Lab 进行推荐的主题定制。

材料市场

材料市场提供了一个一站式解决方案，用于管理自定义材料，可以重用定制模块以提高开发效率。

典型生态项目

Arco Pro

Arco Pro 是一个解决方案，用于从零开始快速构建应用程序，提供了完整的项目模板和最佳实践。

Icon Box

Icon Box 是一个一站式平台，用于管理您的图标，提供了大量的图标资源和便捷的管理工具。

通过这些生态项目，Arco Design 不仅提供了一个强大的 UI 组件库，还构建了一个完整的开发生态系统，帮助开发者更高效地进行项目开发。