【亲测免费】 Arco Design Pro 使用教程

1. 目录结构及介绍

Arco Design Pro 的项目结构设计旨在支持高效的企业级应用开发，其典型结构如下：

├── public                   # 静态资源文件夹，包括 favicon.ico, index.html 等
├── src                      # 主要源代码存放目录
│   ├── components           # 自定义组件目录
│   ├── pages                # 页面组件目录，包含了多个场景如表单、列表、仪表盘等页面模板
│   ├── layouts              # 布局相关文件，定义了全局或特定部分的布局结构
│   ├── utils                # 工具函数集合，用于辅助开发
│   ├── styles               # 全局样式文件，包括主题相关的CSS或SCSS文件
│   ├── app.tsx              # 应用的入口文件，初始化设置和路由配置
│   └── index.tsx            # 程序的主入口点，通常导入app并运行
├── .gitignore               # Git忽略文件列表
├── package.json             # 项目依赖和脚本命令配置
├── README.md                 # 项目说明文档
├── tsconfig.json            # TypeScript编译配置文件
├── yarn.lock                # Yarn依赖版本锁定文件（或npm的package-lock.json）
└── jest.config.js           # 测试配置文件（如果有单元测试集成）

2. 项目的启动文件介绍

app.tsx 是关键的启动文件之一，它扮演着至关重要的角色。在这里，你会定义路由配置、全局状态管理（如果有的话）、以及任何应用级别的高阶组件（HOCs）或中间件。此外，还可以进行初始主题设置和国际化的配置。通过这个文件，你可以控制应用程序的主要流程和结构。

index.tsx 则是程序的真正入口点，它主要负责引入app.tsx来启动整个应用。尽管在一些简单的项目中这可能看起来相当直接，但对于大型应用，它依然是一个必要的抽象层，确保启动过程的清晰和可维护性。

3. 项目的配置文件介绍

package.json

这是一个核心的配置文件，列出了项目的依赖项、脚本指令以及其他元数据。它让你能够执行各种任务，如启动开发服务器 (npm start 或 yarn start)，构建生产环境代码 (npm run build)，或者运行测试 (npm test)。

.gitignore

定义了哪些文件或目录不被Git跟踪，这对于避免将不必要的文件（如node_modules、日志文件等）纳入版本控制至关重要。

tsconfig.json

TypeScript配置文件，决定了TS编译器的行为，包括编译目标、模块解析方式、是否启用严格类型检查等，是确保TypeScript正确编译成JavaScript的关键。

这样的结构和配置不仅保证了项目的组织性和可扩展性，也为团队协作提供了明确的指导和规范。