字节开源 Vue3+React 智能组件库Acro

原创2021-11-06 08:25·web前端进阶

之前有给大家分享一个抖音系开源的Semi产品系统。今天再分享一个字节开源的智能设计组件库Acro Design。

抖音开源Semi Design产品设计系统

 

acro-design 一款高质量的vue3+react产品组件库。超过60+组件，拥有丰富的生态平台。

 

目前在字节产品系都有应用该组件。

 

Vue版本

注意：vue >= 3.2.0

安装

# npm npm i @arco-design/web-vue -S # yarn yarn add @arco-design/web-vue --dev

引入组件

import { createApp } from 'vue' import App from './App.vue' import ArcoVue from '@arco-design/web-vue' import '@arco-design/web-vue/dist/arco.css' const app = createApp(App) app.use(ArcoVue) app.mount('#app')

 

 

React版本

需要同时安装 react >= 16.8 和 react-dom >= 16.8

安装

# npm npm i @arco-design/web-react # yarn yarn add @arco-design/web-react

引入使用

import React from 'react' import { render } from 'react-dom' import { Button } from '@arco-design/web-react' import '@arco-design/web-react/dist/css/arco.css' render(<Button>ArcoDesign</Button>, CONTAINER)

 

 

非常不错的一个开源体系组件库。不多说了，感兴趣的可以去一睹风采吧。

# 官网地址 https://arco.design/ # vue版 https://arco.design/vue # react版 https://arco.design/react # 仓库地址 https://github.com/arco-design

Ok，今天就分享到这里。如果项目需要用到vue和react组件库，是个不错的选择。