一觉醒来 Arco Design 开源了！！

---

theme: awesome-green

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前沿

今天打开论坛一看，全是字节ArcoDesign开源的消息，原谅我之前居然不知道这么强大的平台存在，就赶忙打开了官网膜拜一番。Arco集成了中后台，图标平台，物料市场，色彩配置平台为一体的生态系统，节省了工程师大部分设计和配置项目框架的时间，尤其是开箱即用的前端定制化，特别的吸引我，话不多说，直接就是一顿赋值，粘贴，造起来。

物料平台

目前Material Market大约有20多个开源的物料，所有都可以进行二次开发使用，大家练手的时候可以运行试试。

图标库

IconBox图标库虽然没有阿里图标库的丰富，但是在Arco项目中集成还是很方便的

主题配置

Arco Design Lab是一个旨在提升设计以及开发效率的主题配置平台。帮助用户更好的管理不同风格的个性化主题配置，提高工作效率。

中后台前端解决方案

下面的图，看着是不是有似曾相识的感觉，但是整体布局和风格还是字节的特色。

快速上手

环境

开始开发之前，请确认本地环境中安装好了 node， git 和 arco cli。arco cli 是安装项目模版的工具

npm i -g @arco-design/arco-cli or yarn add @arco-design/arco-cli -g

初始化环境

首次使用时，需要登录github进行授权，下图是成功运行的标志。 ```command.js PS F:\字节> arco init my-arco-pro

___                    ____            _
   /   |  ______________  / __ \___  _____(_)___ _____
  / /| | / ___/ ___/ __ \/ / / / _ \/ ___/ / __ `/ __ \
 / ___ |/ /  / /__/ /_/ / /_/ /  __(__  ) / /_/ / / / /
/_/  |_/_/   \___/\____/_____/\___/____/_/\__, /_/ /_/
                                         /____/

                                            v1.21.0

请先运行 arco env --switch 设置环境 PS F:\字节> arco env --switch

___                    ____            _
   /   |  ______________  / __ \___  _____(_)___ _____
  / /| | / ___/ ___/ __ \/ / / / _ \/ ___/ / __ `/ __ \
 / ___ |/ /  / /__/ /_/ / /_/ /  __(__  ) / /_/ / / / /
/_/  |_/_/   \___/\____/_____/\___/____/_/\__, /_/ /_/
                                         /____/

                                            v1.21.0

? 请选择使用的 Arco 物料平台版本 公共版本 已成功切换至公共环境 切换环境需要重新登录... 正在登录中... 请在浏览器中完成认证：https://github.com/login/oauth/authorize?clientid=8b2e98ddbd37b4e0cd36&accesstype=online&responsetype=code&redirecturi=https%3A%2F%2Farco.design%2Fapi%2Fauth%2Fgithub%2Fredirect&scope=read&state=eyJyZWRpcmVjdFVybCI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzMzMy9sb2dpbl9yZXN1bHQiLCJhcmNvVG9rZW4iOiJ4Nk9jYnh2aHpXeGt0QWRsZXBBWWoifQ%3D%3D

登录成功，当前用户：Never13zt ```

创建项目

```command.js PS F:\字节> arco init hello-arco-pro ? 请选择你希望使用的技术栈 React 关于项目类型的更多说明 https://arco.design/docs/material/project-template

? 请选择所要创建项目的类型 组件库 ? 请输入 NPM 包名 code1921-myarco ? 请输入物料标题 code1921 arco组件测试 ? 请描述你的物料 Code1921 Arco Design ? 请输入 NPM 包版本号 0.1.0

正在初始化项目于 F:\字节\hello-arco-pro √ 获取项目模板成功 √ 模板内容拷贝完成 √ 模板内容适配完成 √ 项目依赖安装完成

---

阅读 README.md 获取快速指引。执行如下命令，添加你的第一个组件 $ cd hello-arco-pro $ npm run add:component -- YourComponentName $ npm run dev

---

```

项目目录

运行项目

command.js npm run dev

最后

总体感觉rcoDesign是很强大的，但是它集成了StoryBook的框架，自己不是很熟悉，对代码结构还是有个小陌生，不过愈战愈勇，新知识的尝试，难免有些小坎坷，但是一旦用起来就会很顺利！乾坤未定，你我皆有可能！！