字節開源 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組件庫，是個不錯的選擇。