This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

At the forefront of

I opened the forum today and found it was full of bytesArcoDesignOpen source news, forgive me for not knowing the existence of such a powerful platform, I quickly opened the official website to worship.ArcoIntegrated background, icon platform, material market, color configuration platform as one of the ecosystem, saving engineers most of the design and configuration of the project frame time, especially out of the box front-end customization, particularly attractive to me, not to say much, directly is a value assignment, paste, build up.

Material platform

At presentMaterial MarketThere are about 20 open source materials, all of which can be used for secondary development. You can run them when you practice.

Icon library

IconBoxAlthough the icon library is not as rich as Ali’s icon library, it is still easy to integrate into Arco projects

The topic configuration

Arco Design LabIs a theme configuration platform designed to improve design and development efficiency. Help users better manage different styles of personalized theme configuration, improve work efficiency.

Middle and back end solutions

The following image may sound familiar, but the overall layout and style are unique to bytes.

Quick learning

The environment

Before you start development, make sure you have Node, Git, and arco CLI installed in your local environment. The ARco CLI is a tool for installing project templates

npm i -g @arco-design/arco-cli
or
yarn add @arco-design/arco-cli -g
Copy the code
Initializing the Environment

To use it for the first time, you need to log in to Github for authorization. The following figure shows a successful operation.

PS: F \ byte > arco init my - arco - pro _____ _____ _ / | alarm / __ \ _____ _____ _____ _____ (_) / / | | / ___ / ___ / __ / / / / / _ \ / ___ / __ ` / __ \ / ___ | / / / / __ / / _ _ - / / / / / __ (__) / / __ / / / / / / _ / | _ / _ \ ___ / \ ____ / / \ _____ _____ _____ / _ \ __, / _ / _ / / consists of/v1.21.0 please run arco env - switch to set up the environment PS F: \ byte > arco env - switch _____ _____ _ / | alarm / __ / ___ _____ _____ _____ (_) / / | | / ___ / ___ / __ / / / / / _ \ / ___ / __ ` / __ \ / ___ | / / / / __ / / _ _ - / / / / / __ (__) / / _ / / / / / / _ / | _ / _ \ ___ / \ ____ / / \ _____ _____ _____ / _ \ __, __ / / __ / / consists of/v1.21.0? Select the Arco material platform version The public version has been switched to the public environment. You need to log in to the public environment again. Logging in... Please complete authentication in your browser: https://github.com/login/oauth/authorize?client_id=8b2e98ddbd37b4e0cd36&access_type=online&response_type=code&redirect_u ri=https%3A%2F%2Farco.design%2Fapi%2Fauth%2Fgithub%2Fredirect&scope=read&state=eyJyZWRpcmVjdFVybCI6Imh0dHA6Ly9sb2NhbGhvc 3 q6mzmzmy9sb2dpbl9yzxn1bhqilcjhcmnvvg9rzw4ioij4nk9jynh2ahpxegt0qwrszxbbwwoifq % 3 d % 3 d login is successful, the current user: Never13ztCopy the code

Create a project
PS F:\ bytes > arco init hell-arco-pro? Please select you want to use the technology stack React more instructions about the item type https://arco.design/docs/material/project-template? Please select the type to create a project component library? Please enter NPM package name Code1921 - myARco? Please enter material title code1921 ARCO component test? Please describe your material code1921 ARco Design? Please enter NPM package version number 0.1.0 while initializing the project F:\ bytes \hello-arco-pro √ Obtaining project template successfully √ Template content copied complete √ Template content adapted complete √ Dependency installation complete * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * to read the README in the md for quick guide. Run the following command: Add your first component $CD hello-arco-pro $NPM run add: Component -- YourComponentName $NPM run dev * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *Copy the code
Project directory

Run the project
npm run dev
Copy the code

The last

In general, rcoDesign is very powerful, but it integrates the StoryBook framework. I am not very familiar with it, and I am still a little strange to the code structure. However, the more I fight, the more I try to learn new knowledge, it is inevitable that a little bumpy, but once I use it, IT will be very smooth! The universe is uncertain, you and I can be!!