Ant Design Pro快速入门——项目搭建

纯前端菜鸡，只有一些HTML、CSS和JavaScript的基础，最近配合的前端跑路了，想用Ant Design Pro来快速搭建一套中后台来管理数据，只能自己上了，主要自己也想试试水，从后端的视角看前端，整体偏向于实战。

Ant Design Pro

Ant Design Pro 是猫厂贡献，基于Ant Design和Umi封装的一整套企业级中后台前端/设计解决方案，帮助你快速搭建企业级中后台产品。

创建

可以按照以下步骤初始化项目：

# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp
# 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4
  umi@3
# 如果选择了 umi@3，还可以选择 pro 的模板，pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，不太适合当基础模板来进行二次开发

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

cd myapp && npm install

项目创建完成后，运行npm run start即可启动项目，运行yarn run build即可编译项目，编译后的压缩包位于dist目录中。不过，在学习期间，为避免每次启动都要鉴权，可以修改app.tsx中的getInitialState方法来跳过鉴权：

  const fetchUserInfo=async()=>{
    return{
      name:'admin',
      avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
      userid:'000001',
      access:'admin',
      email:'admin@qq.com'
    } as API.CurrentUser;
  };

还有一些比较常用的命令如：npm run lint查看代码有哪些问题，npm run i18n-remove移除国际化等。

用不到国际化，执行i18n-remove时，需要删除routes.ts中的import component from "@//bn-BD/component";引用，否则可能执行失败。

项目结构

├── config                   # umi 配置，包含路由，构建等配置
│   ├── config.ts            # 项目主配置，路由、主体、代理等
│   ├── routes.ts            # 路由配置（替代旧版的router.config.js）
│   ├── proxy.ts             # 开发环境api代理配置（解决跨域）
│   ├── defaultSettings.ts   # 全局默认设置（主题色、布局模式等）
├── mock                     # 本地模拟数据
├── public                   
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 全局公共组件
│   ├── layouts              # 通用布局
│   ├── models               # 全局状态管理 dva
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
│   └── access.ts            # 控制
│   └── app.tsx              # 运行时配置
├── tests                    # 测试工具
├── README.md
└── package.json

路由

Ant Desgin Pro中使用了UMI作为底层框架，统遵循约定式路由​（文件即路由）和配置式路由两种模式，默认使用约定式路由。

一、约定式路由（文件即路由）

Umi 会根据项目 src/pages 目录下的文件结构自动生成路由，无需手动配置。

基本规则

文件路径	路由路径	说明
src/pages/index.tsx	/	根路由
src/pages/users/index.tsx	/users	嵌套路由的目录索引
src/pages/users/profile.tsx	/users/profile	普通路由
src/pages/users/[id].tsx	/users/:id	动态路由（参数）
src/pages/users/[...slug].tsx	/users/*	通配符路由（匹配任意路径）

但因为Ant Design Pro下存在config/routes.ts，按照Umi的设计原则，路径需要手动配置，不会再自动生成路由。

二、配置式路由（手动配置）

如果项目根目录存在 .umirc.ts 或 config/config.ts，可通过 routes 字段自定义路由：

export default {
  routes: [
    { path: '/', component: '@/pages/index' },
    { 
      path: '/users', 
      component: '@/layouts/user', // 嵌套布局
      routes: [
        { path: '/users/profile', component: '@/pages/users/profile' },
        { path: '/users/:id', component: '@/pages/users/[id]' },
      ],
    },
  ],
};

Charts

https://x6.antv.antgroup.com/tutorial/getting-started

https://x6.antv.antgroup.com/tutorial/basic/events

https://x6.antv.antgroup.com/tutorial/basic/events