项目自荐 | 字节跳动企业级设计系统 Arco Design

[PengJiyuan]

项目推荐

• 项目地址：https://github.com/arco-design/arco-design

• 类别：JS

• 项目后续更新计划：由字节跳动官方团队维护，每周五发版。

• 项目描述：

  ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统，是字节内部使用量最大的设计系统。

  基于 ArcoDesign 的 React UI 组件库和 Vue UI 组件库，包含 60 多个开箱即用的高质量组件，还提供了可视化的样式配置平台，可用于快速构建企业级管理后台。

  https://user-images.githubusercontent.com/19399269/141435899-e453cf75-d50f-4549-b8d0-37daebe46c36.mp4

• 推荐理由：

  • 完善的组件, Arco 提供了 67 个以上的基础组件。
  • React 和 Vue 同步支持，Vue 组件库基于 Vue 3.0 开发。
  • 科学的暗黑模式，Arco 支持一键开启暗黑模式，无缝切换，流畅体验。
  • 开箱即用的体验，Arco 提供了最佳实践 Arco Pro，帮助用户更快速地从 0 到 1 搭建项目。
  • 极致的个性化定制能力，Arco 将影响组件视觉的样式都抽离为上千个独立的 token 变量，通过这些 token 变量可以对组件库进行任意配置。同时，Arco 也提供了样式可视化编辑的「风格配置平台」，用户可以所见即所得的对组件进行配置，实现「ArcoDesign to Any Design」。

• 示例代码：

  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'));

• 截图：

  

[521xueweihan]

@PengJiyuan 请勿大段复制内容，用于填充推荐理由和项目描述。

请修改后 @我，否则将不收录到月刊。

[PengJiyuan]

@PengJiyuan 请勿大段复制内容，用于填充推荐理由和项目描述。

请修改后 @我，否则将不收录到月刊。

这个原版的内容也是我写的，如果是多的话我删减一些。

[PengJiyuan]

@521xueweihan Hi，我修改删减了一版，麻烦看下可以不～

[521xueweihan]

@PengJiyuan 您辛苦了。由于本期月刊时间点有些特殊，所以明天就会发布。

很抱歉，目前月刊已经合刊，所以贵项目只能下期安排收录和发布了。

最后，关于项目描述和推荐理由，月刊每个项目描述的因篇幅有限（不易超过 256 字），所以没有办法面面俱到，只能提炼出关键字眼。下面是我写的欢迎讨论和修改。

基于 ArcoDesign 的 React UI 组件库，可用于快速构建企业级管理后台。
包含 60 多个开箱即用的高质量组件，还提供了可视化的样式配置平台

[PengJiyuan]

@521xueweihan 好的，您辛苦，我再修改一下哈，争取下次能收录～

[PengJiyuan]

@521xueweihan 我之前写的时候太考虑排版了，写的有点多，抱歉。我已经改完了，现在推荐理由在 200 字以下了，这次无法收录的话麻烦下次收录一下，非常感谢～

[521xueweihan]

@PengJiyuan 收到，没问题。ArcoDesign 将收录在下一期月刊发布。👍

[521xueweihan]

@PengJiyuan 您推荐的项目，已成功发布在 HelloGitHub 第 69 期，并把您添加到了贡献者列表中。

欢迎继续推荐如此优秀的项目、告诉其他小伙伴加入到 HelloGitHub 项目中，没有 star 本项目的请 star 一下。谢谢 🙏