二、Ant Design Pro 布局、菜单、新增页面、CSS Modules和services

一、开发

1、区块(block)

• 区块是研发资产的一种，它是一系列快速搭建页面的代码片段，它可以帮助你快速的在项目中初始化好一个页面，帮助你更快速的开发代码。当前的区块都是页面级别的区块，你可以理解为它是一些项目中经常会用到的典型页面的模板，使用区块其实相当于从已有的项目中复制一些页面的代码到你当前的项目中
  • 以前开发一个页面：创建 JS -> 创建 CSS -> 创建 Model -> 创建 service -> 写页面组件。
  • 现在开发一个页面：下载区块 -> 基于区块初始化好的页面组件修改代码。

• 使用区块：Ant Design Pro 中，使用 umi ui 进行区块管理
  • 在 Pro 中资产被分为了两种，区块和模板。区块可以类比为一个组件，而模板代表一个页面。区块现在支持所有 antd 中的 demo，可以更加快速的将 demo 导入到项目中去

2、布局

页面整体布局是一个产品最外层的框架结构，往往会包含导航、页脚、侧边栏、通知栏以及内容等

• 在 Ant Design Pro 中，我们抽离了使用过程中的通用布局，都放在 layouts 目录中，分别为
  • BasicLayout：基础页面布局，包含了头部导航，侧边栏和通知栏
  • UserLayout：抽离出用于登录注册页面的通用布局
  • BlankLayout：空白的布局

• 配置路由来使用 Ant Design Pro 布局：通常布局是和路由系统紧密结合的，所以定义了布局，还需要配置路由。如配置下面的 config/config.ts ，通过如下配置定义每个页面的布局。
  • 路由里面的第一级数据就是我们的布局，后面的子路由，都嵌套在布局里面

// 这下面就有两个布局，一个是BasicLayout，另一个是UserLayout
routers: [
  {
    path: '/',
    component: '../layouts/BasicLayout', // 指定以下页面的布局
    routes: [
      // dashboard
      { path: '/', redirect: '/dashboard/analysis' },
      {
        path: '/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' },
        ],
      },
    ],
  },
  {
    path: '/user',
    component: '../layouts/UserLayout',
    routes:[...]
   }
];

3、路由和菜单

路由和菜单是组织起一个应用的关键骨架，pro 中的路由为了方便管理，使用了中心化的方式，在 config.ts 统一配置和管理

• 基本结构：脚手架通过结合一些配置文件、基本算法及工具函数ÿ