之前有给大家分享一个抖音系开源的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组件库，是个不错的选择。