Ant Design Pro 简介

比较官方的定义：

  • Ant Design
    Ant Design 是一个流行的企业级 UI 设计语言和组件库，由蚂蚁金服（Ant Financial）开发和维护。它旨在帮助开发者快速构建美观、易用、高质量的前端界面。
  • Ant Design Pro
    Ant Design Pro 是基于 Ant Design 设计语言的企业级中后台前端解决方案。它提供了丰富的组件和模板，帮助开发者快速搭建现代化的中后台管理系统。

简单来说：

  • Ant Design –> 封装了 React 的组件库
  • Ant Design ProComponents –> 封装了 Ant Design，组合了常用的组件
  • Ant Design Pro 后台管理系统 –> Ant Deisn、React、Ant Design ProComponents、其他库组合而成

环境搭建

环境：

  • Node.js（这里我使用的 v16.20.2，npm 版本 8.19.4）
  • npm / cnpm 或 yarn / tyarn 工具
  • 任意前端 IDE（WebStrom、VSCode 等）

创建项目

这里使用 tyarn，速度较快。
首先，确保已经安装 tyarn：

1
2
3
4
# 安装
npm install tyarn -g
# 验证
tyarn -v

全局安装 pro-cli 脚手架：

1
2
3
4
# 安装
tyarn global add @ant-design/pro-cli
# 验证
pro -v

创建项目：

1
2
3
4
5
6
7
8
9
10
11
pro create 项目名

# 选择版本，这里我选择的 umi@3
? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
  umi@4
❯ umi@3

# 选择脚手架，这里我选择的 simple
? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
  complete

安装依赖

安装依赖：

1
2
3
cd 项目名
# 安装依赖
tyarn install

一些坑：

1
2
3
4
5
6
7
# 部分 error --> 试试清除缓存，然后再重新执行 install
tyarn cache clean

# warning @ant-design/pro-cli > @umijs/fabric > @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. --> 更新依赖
tyarn upgrade @ant-design/pro-cli

# error exit code 128，检查 node 和 npm 的版本

启动项目

使用 IDE 启动项目，打开根目录下的 package.json 文件，运行 start 脚本

总结

  • package.json --> Node.js 可以理解为 pom.xml --> Java

  • 执行 i18n-remove 可以删除自带的国际化（locales 包就可以删除了）

  • i18n：internationalization

  • mock 包中存放的是假数据

  • global.less 是全局的样式文件，不要轻易修改

  • app.tsx 程序入口