一觉醒来 Arco Design 开源了

前沿

 今天打开论坛一看，全是字节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进行授权，下图是成功运行的标志。

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?client_id=8b2e98ddbd37b4e0cd36&access_type=online&response_type=code&redirect_uri=https%3A%2F%2Farco.design%2Fapi%2Fauth%2Fgithub%2Fredirect&scope=read&state=eyJyZWRpcmVjdFVybCI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzMzMy9sb2dpbl9yZXN1bHQiLCJhcmNvVG9rZW4iOiJ4Nk9jYnh2aHpXeGt0QWRsZXBBWWoifQ%3D%3D

登录成功，当前用户：Never13zt

创建项目

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
******************************************************************

项目目录

运行项目

npm run dev

最后

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