前端UI框架Ant Design Pro

最新推荐文章于 2025-06-03 09:13:06 发布

转载最新推荐文章于 2025-06-03 09:13:06 发布 · 521 阅读

本文介绍AntDesignPro框架的使用，包括技术栈、安装步骤、目录结构解析及布局组件详解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直忙于工作，也没时间总结。现在有点零散时间把之前做的笔记整理一下。
目前项目使用的技术栈是,前端UI框架Ant Design Pro，数据交互使用react,后端使用的是springcloud,离线存储数据使用hadop(刚搭完还没开始用).后端的技术栈世面上基本稳定都用微服务这套，因为spring全家桶一直非常稳定。
Ant Design Pro目前蚂蚁金服和阿里巴巴内部上百个项目正在尝试 Pro 的研发模式

1.安装node和git

2.从 GitHub 仓库中直接安装最新的脚手架代码。

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

目录结构

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

本地开发

安装依赖。

$ npm install

如果网络状况不佳，可以使用 cnpm 进行加速。

$ npm start

image.png

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。

image.png

Ant Design Pro 的布局

在 Ant Design Pro 中，我们抽离了使用过程中的通用布局，都放在 layouts 目录中，分别为：

BasicLayout：基础页面布局，包含了头部导航，侧边栏和通知栏：

image.png

UserLayout：抽离出用于登陆注册页面的通用布局

BlankLayout：空白的布局

image.png

如何使用 Ant Design Pro 布局#

通常布局是和路由系统紧密结合的，Ant Design Pro 的路由使用了 Umi 的路由方案，为了统一方便的管理路由和页面的关系，我们将配置信息统一抽离到 config/router.config.js 下，通过如下配置定义每个页面的布局：

module.exports = [{
  path: '/',
  component: '../layouts/BasicLayout',  // 指定以下页面的布局
  routes: [
    // dashboard
    { path: '/', redirect: '/dashboard/analysis' },
    {
      path: '/dashboard',
      name: 'dashboard',
      icon: 'dashboard',
      routes: [
        { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
        { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
        { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
      ],
    },
  ],
}]

映射路由和页面布局（组件）的关系如代码所示，完整映射转换实现可以参看 router.config.js。

更多 Umi 的路由配置方式可以参考：Umi 配置式路由。

Pro 扩展配置#

我们在 router.config.js 扩展了一些关于 pro 全局菜单的配置。

···
{
name: 'dashboard',
icon: 'dashboard',
hideInMenu: true,
hideChildrenInMenu: true,
hideInBreadcrumb: true,
authority: ['admin'],
}
···