React项目引入Arco Design，以及Arco Design Pro 架构

创建项目

创建 react-arco 项目

pnpm create vite my-vue-app --template react

安装 @arco-design/web-react

安装 react 版的 arco-design

基础使用

添加一个按钮，App.tsx

import "./App.css";
import { Button } from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";

function App() {
  return (
    <div className="App">
      <Button type="primary">hello arcoButton>
    div>
  );
}

export default App;

按需加载

通过 vite 插件可以实现按需加载样式和图标。

pnpm i @arco-plugins/vite-react -D

引入，vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { vitePluginForArco } from '@arco-plugins/vite-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), vitePluginForArco()],
})

现在可以不用单独引入样式了！

// import "@arco-design/web-react/dist/css/arco.css";

Arco Design Pro 架构

Arco Design Pro 是开箱即用的中后台前端解决方案，要创建 Arco Design Pro 项目首先需要安装 Arco Cli。

Arco CLI

arco cli 是安装项目模版的工具，先运行以下命令安装之：

npm i -g arco-cli

下一步是以 Arco Design Pro 为模版创建一个新项目：

1. 进入 packages 目录，新建项目

arco init admin

2. 选择使用 React

? 请选择你希望使用的技术栈
❯ React
  Vue

3. 选择 arco-design-pro

? 请选择所要创建项目的类型
  业务组件
  区块
  页面
  组件库
  Lerna Monorepo 项目
❯ Arco Pro 项目

4. 选择开发框架 Vite

? 请选择你想要使用的开发框架 (Use arrow keys)
  Next (https://nextjs.org/)
❯ Vite (https://vitejs.dev/)
  Create React App (https://create-react-app.dev)

项目架构解析

目录结构说明

├── src
│   ├── assets                      # 静态资源
│   ├── components                  # 通用业务组件
│   ├── locale                      # 国际化语言包
│   ├── mock                        # 公共模拟数据
│   ├── pages                       # 页面模版
│   ├── store                       # redux状态管理
│   ├── style                       # 全局样式
│   ├── utils                       # 工具库
│   ├── context.tsx                 # 全局配置
│   ├── index.tsx                   # 入口文件
│   ├── layout.tsx                  # 布局页
│   ├── routes.ts                   # 路由配置
│   ├── settings.json               # 配置文件
│   ├── declaration.d.ts
│   └── vite-env.d.ts

国际化

分为全局和页面级别：

• 全局：locale/index.ts
• 页面：pages/xxx/locale/index.ts

mock

分为全局和页面级别：

• 全局：mock/index.ts
• 页面：pages/xxx/mock/index.ts

页面

pages自动注册为路由：

• example/index.tsx -> /example
• dashboard/workplace/index.tsx -> /dashboard/workplace

样式

基于less，分为全局和页面级：

• 全局：style/global.less
• 页面级：pages/style/xxx.module.less