start.zh-CN.md

开发指南

# 快速上手

跟随以下的步骤，快速上手组件库的使用。

import ACCard from '../src/widget/Card';

<ACCard
  title="ArcoPro 最佳实践"
  description="使用 ArcoPro，快速构建现代网页。"
  link="https://pro.arco.design"
  icon="ArcoPro"
  buttonText="立即使用"
/>

安装

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

// npm
npm i @arco-design/web-react

// yarn
yarn add @arco-design/web-react

通过 CDN 使用

除了可以通过 npm 安装之外，你也可以直接使用 CDN 资源，我们提供了 umd 格式的代码产物。

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

不过，我们不建议通过 CDN 使用，因为 CDN 会引入全量的组件代码，这样会影响页面加载速度。

基础使用

以 Button 组件为例。

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";

ReactDOM.render(
  <Button type="primary">Hello Arco</Button>,
  document.querySelector("#root")
);

<div style={{ padding: 20, borderRadius: 4, backgroundColor: 'var(--color-neutral-2)' }}>
  <iframe src="https://codesandbox.io/embed/reverent-voice-v2yzx?fontsize=14&hidenavigation=1&theme=dark"
    style={{ width: '100%', height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }}
    title="reverent-voice-v2yzx"
    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
  ></iframe>
</div>

按需加载

@arco-design/web-react 的组件默认支持 tree shaking, 使用 import { Button } from '@arco-design/web-react'; 方式引入即可按需加载。

如果按需加载失效，或者需要样式按需加载以及图标按需加载的可使用以下两种方式处理：

使用 Arco 官方插件

Arco 的 官方插件库 提供的插件功能如下：

• 组件库样式按需加载
• 组件库图标按需加载
• 风格配置平台导出的主题引入
• 组件库的图标库替换

插件列表

具体使用方式请点击插件链接到详情页中查看

• @arco-plugins/webpack-react 适用于 Arco react 组件的 webpack 插件
• @arco-plugins/vite-react 适用于 Arco react 组件库的 vite 插件
• @arco-plugins/vite-vue 适用于 Arco vue 组件库的 vite 插件

使用 babel-plugin-import

1. 安装

npm i babel-plugin-import -D

2. 添加配置

组件和样式的按需加载

在 babel 配置中加入：

plugins: [
  [
    'babel-plugin-import',
    {
      libraryName: '@arco-design/web-react',
      libraryDirectory: 'es',
      camel2DashComponentName: false,
      style: true, // 样式按需加载
    },
  ],
];

Icon 按需加载

在 babel 配置中加入：

plugins: [
  [
    'babel-plugin-import',
    {
      libraryName: '@arco-design/web-react/icon',
      libraryDirectory: 'react-icon',
      camel2DashComponentName: false,
    },
  ],
];

浏览器兼容性

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
Edge 16	31	49	31	36	last 2 versions