之前的文章介绍了鹅厂开源的企业级框架TDesign，搭了一个简单的demo，我们产品经理觉得不好看，说字节的框架不错，让我们调研一下字节的框架，看起来清新 、大方、简洁。然后我就决定把Arco Design记录一下。

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

github：https://github.com/arco-design

介绍

Arco Design 是字节开源的企业级设计框架，在字节体系里广泛应用。比如头条、抖音、西瓜视频等。有丰富的设计资源，组件众多，易于我们搭建企业web服务。而且提供了Arco CLI脚手架，方便快速上手。

提供了React、Vue版本，考虑的很周到啊。小伙伴们可以根据自己的喜好选择不同的版本。

最近又开源了Acro Design Mobile ，专门用于移动端开发，历时两年多的打磨，虽迟但到，可喜可贺。

快速上手

一、Acro Design

1、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 ReactDOM from "react-dom";
import { Button } from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";
//以Button为例
ReactDOM.render(
  <Button type="primary">Hello Arco</Button>,
  document.querySelector("#root")
);

官方也提供了CDN使用：

• 开发环境：https://unpkg.com/@arco-design/web-react@latest/dist/arco.development.js
• 生产环境：https://unpkg.com/@arco-design/web-react@latest/dist/arco.min.js

2、Vue版本

//vue >= 3.2.0
//npm
npm install --save-dev @arco-design/web-vue
//yarn
yarn add --dev @arco-design/web-vue

全部引入

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

按需引入

可以使用 unplugin-vue-components 、unplugin-auto-import 插件按需加载及自动导入。

3、Mobile

npm install @arco-design/mobile-react -S
//依赖
"peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0",
    "react-transition-group": ">=4.3.0"
}
//自适应
import setRootPixel from '@arco-design/mobile-react/tools/flexible';
setRootPixel();

页面展示

字节出品，必属精品！

好了，今天就介绍这么多了，喜欢Arco Design风格的可以在项目中使用了。说实话跟Ant Design差不多[捂脸]