热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

原创2021-11-0608:25·web前端进阶之前有给大家分享一个抖音系开源的Semi产品系统。今天再分享一个字节开源的智能设计组件库AcroDesign。抖音开源SemiDesign产品设计系统 acro-design 一款高质量的vue3+react产品组件库。超过60+组件,拥有丰富的生态平台。 目前在字节产品系都有应用该组件。 V

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

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

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

 

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

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

 

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

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

 

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')
字节开源 Vue3+React 智能组件库Acro

 

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

 

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>ArcoDesignButton>, CONTAINER)
字节开源 Vue3+React 智能组件库Acro

 

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

 

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

# 官网地址
https://arco.design/

# vue版
https://arco.design/vue

# react版
https://arco.design/react

# 仓库地址
https://github.com/arco-design

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


推荐阅读
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • Redux入门指南
    本文介绍Redux的基本概念和工作原理,帮助初学者理解如何使用Redux管理应用程序的状态。Redux是一个用于JavaScript应用的状态管理库,特别适用于React项目。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • 基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
    本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
  • 本文探讨了在React项目中实现子组件向父组件传递数据的方法,包括通过回调函数和使用React状态管理工具。 ... [详细]
  • 本文详细介绍了 React 中的两个重要 Hook 函数:useState 和 useEffect。通过具体示例,解释了如何使用它们来管理组件状态和处理副作用。 ... [详细]
  • 本文探讨了领域驱动设计(DDD)的核心概念、应用场景及其实现方式,详细介绍了其在企业级软件开发中的优势和挑战。通过对比事务脚本与领域模型,展示了DDD如何提升系统的可维护性和扩展性。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 前端开发:从底层到顶端的行业现象解析
    在编程领域,鄙视链现象屡见不鲜,从C语言到Java、.NET等,每个技术栈都有其独特地位。然而,前端开发者尽管常处于鄙视链底端,却在市场需求中备受青睐。本文深入探讨这一现象,并分析前端工程师如何在竞争激烈的市场中脱颖而出。 ... [详细]
  • 深入解析 Vue 的 Transition 组件与第三方动画库的结合使用
    本文详细介绍了 Vue 中的 Transition 组件,探讨其内置类名机制、触发时机及自定义类名的应用。同时,结合 animate.css 和 GSAP 等第三方库,展示了如何实现复杂的动画效果。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • 本文将指导如何向ReactJS计算器应用添加必要的功能,使其能够响应用户操作并正确计算数学表达式。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
author-avatar
郑云雪
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有