一、Ant Design Pro介绍与文件结构

版本v4

一、入门

Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观。

基于上述目标和提供了以下的典型模板，并据此构建了一套基于 React 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型

技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd

npm相关命令升级依赖包：

npm update: 这个是npm自带的，只能按照 package.js 中标注的版本号进行更新对应的依赖

npm-check-updates升级插件：升级插件会自动帮你更改 package.js 里的版本号

npm -g outdated,查看当前依赖包的版本，和当前依赖包的最新版本是多少

npm view 依赖包名字 versions --json，查看指定依赖包对应的版本

安装：npm create umi, 要在cmd的窗口里面去安装，git的窗口问题太多了；但是有时候用cmd安装也会报错，spawn git ENOENT,这时候还是需要用git去安装

然后选择ant-design-pro。

然后npm install，这个install，一般就用cmd窗口来安装

报错：先清缓存npm cache clean --force，然后再安装npm install

再然后就可以开启项目了npm start

编译项目npm run build

展示依赖信息npm run analyze, 如果需要优化性能和包大小，你需要它，会自动在浏览器打开显示体积分布数据的网页

查看代码哪里有问题npm run lint, 提供了一系列的 lint 脚本，包括 TypeScript，less，css，md 文件，在 commit 中我们自动运行相关 lint

自动修复一些 lint 错误npm run lint:fix,

执行一系列测试，包括 e2e 测试npm test,

将所有的区块下载到当前项目中npm run fetch:blocks, 会得到与 https://preview.pro.ant.design/ 相同的界面

删除项目中所有的 i18n 代码npm run i18n-remove, 对于复杂的运行时代码，表现并不好，慎用

在不用mock数据的情况下运行 npm run start:no-mock, 这个还是很有用的，因为如果mock的路径和真实路径相同，那么请求的永远是mock的路径。这时候就需要关闭mock数据

// 项目目录
├── config                   
│   ├── config.js               # 整体的umi配置，包括webpack配置，编译时配置式路由，菜单配置等。路由里面的component 是相对于 src/pages 目录的
│   ├── plugin.config.js        # umi拓展的一些webpack配置，是需要导入到上面的config.js里面的
│   ├── router.config.js        # umi的编译时配置式路由，是需要导入到上面的config.js里面的。并且根据路由的name配置，来生成页面上面的菜单栏
├── mock                     # 本地模拟数据。此目录下所有 js 和 ts 文件会被解析为 mock 文件
├── public                   # 这个目录的文件不会被打包，会直接被copy到最后的输入目录
│   └── favicon.png
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件，这里面如果用到了models，则对应的文件依然是下面那个全局的models文件
│       ├── pageHeader                  # 这个就是通用的组件了，里面的index.js就为组件的内容
│           ├── index.js
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 页面整体的通用布局，即页面最外层的框架结构。路由里面的第一级路由数据就是我们的布局，后面的子路由，都嵌套在布局里面
│       ├── BasicLayout.js              # 基础页面通用布局，包含了头部导航、侧边栏、通知栏、内容、页脚。用了ProLayout 组件之后，菜单的布局配置是在下面的defaultSetting.ts里面
│       ├── UserLayout.js               # 抽离出用于登录注册页面的通用布局。这个和上面的一般是互斥的，都是第一级路由
│   ├── locales              # 国际化资源(即可以切换到不同的语言)
│       ├── zh-CN.ts                    # 切换到语言为zh-CN的时候。umi/locales中引入的FormattedMessage组件的id，对应的配置
│       ├── en-US.ts                    # 切换到语言为en-US的时候。umi/locales中引入的FormattedMessage组件的id，对应的配置
│   ├── models               # 全局 dva model，pages里面的所有组件都可以访问到这个model
│   ├── pages                # 业务页面入口和常用模板
│       ├── .umi                   # 代码运行了之后umi 的临时目录，可以在这里做一些验证，但请不要直接在这里修改代码。并且由于每次build的时候被重新生成，所以不要把这个上传到git
│       ├── user                   # 这个即业务组件文件夹，这里为实例的User组件
│           ├── components                # 这个即业务组件文件夹，里面单独抽离出来的组件，服务于当前的user组件
│               ├── PopAddModal.js
│               ├── PopDeleteModal.js
│           ├── models                     
│               ├── user.js                # 这个为，只有当前组件可以访问的model文件
│           ├── index.js                   # 登陆的js文件
│           ├── user.Less                 # 登陆的css文件，由于是CSS Modules，所以引入到js文件的时候，需要用css module的写法来获取对应的css类
│       ├── Authorized.js          # 配合路由里面的Routes使用，来进行权限控制，限制菜单栏的可见与隐藏
│       ├── document.ejs           # 入口模板文件，相当于index.html
│   ├── services             # 后台接口服务,即所有的请求都写在这里面
│       ├── api.ts              # 这个即，model里面的请求，就到这里面；然后这个需要调用下面的requese.js
│   ├── utils                # 工具库
│       ├── request.js          # 这个文件是用来封装请求的，里面用的es6的fetch()函数；services文件夹里面的所以请求，都要调用这个文件
│       ├── utils.less          # 这里可以放置一些工具函数供调用，比如清除浮动 .clearfix
│   ├── app.js               # 运行时配置文件。提供了几个函数，比如在组件的render生命周期执行之前被调用的函数；路由切换的时候被调用的函数；还有改变整个路由的函数等。具体使用请看umi的运行时配置
│   ├── defaultSetting.ts    # 这个是全局的页面主题配置，包括菜单位置等的配置。需要用ProLayout组件
│   ├── global.less          # 此文件不走 css modules，且会自动被引入，可以在这里写全局样式，以及做样式覆盖
│   └── global.ts            # 此文件会在入口文件的最前面被自动引入，可以在这里加载补丁，做一些初始化的操作等
├── tests                    # 测试工具
├── README.md
└── package.json

常见问题：

Ant Design React 和 Ant Design Pro 有什么区别: 可以理解为 Ant Design React 是一套 React 组件库，而 Pro 是使用了这套组件库的完整前端脚手架

更新 Ant Design Pro: <1>单独升级 antd 版本，用于更新基础组件。<2>直接在 GitHub 上拷贝最新的典型模板。<3>也可以尝试合并远程分支：git pull https://github.com/ant-design/ant-design-pro（注意，需要自行解决冲突）

修改默认 webpack 配置: 详见 umi 配置。

代理到后端服务器: Ant Design Pro 内置了 umi，umi 使用了 webpack-dev-server 来支持代理。你只需要在 config.js 中配置 proxy 属性。只要 proxy 和 mock 的 url 不同，是可以共存的

Git commit 时报错: 脚手架默认开启了 eslint 代码风格检查，请按照提示内容进行修改后重新提交，也可以手动 npm run lint 进行检查

{proxy:{
    '/server/api/': {
      target: 'https://preview.pro.ant.design/',
      changeOrigin: true, // 如果设置成true：发送请求头中host会设置成target·默认是false：请求头中host仍然是浏览器发送过来的host
      pathRewrite: { '^/server': '' }, // /server/api/currentUser -> /api/currentUser
    },},}

二、构建和部署

环境变量: 请看umi的配置

部署：Pro 默认提供了 mock 数据，但是在 build 之后 mock 数据将不再起作用。如果你仍想使用这些数据来搭建演示站点，你可以通过 umi-serve 来启动一个 express 服务。这个服务与 mock 的数据是相同的

部署到非根目录：假设我们要部署项目到 ${host}/admin 中。首先我们需要在 config/config.ts 中配置 base,base 是 react-router 的前缀。我们需要将 base 配置为 admin, 如果我们还需要将其部署到 /admin 目录中，我们还需要设置 publicPath

export default {
  // ... some config
  base: '/admin/',
  publicPath: '/admin/',
};

和java整合：将编译之后的文件复制到 spring boot 项目的 /src/main/resources/static 目录下

三、ProLayout 组件

ProLayout 组件是 Pro v4 中新增的组件，不是antd中的组件，与一般的组件不同，它非常重型，在其中集成了菜单，布局，页头，面包屑，设置抽屉等多种功能。

这组件贼好用，把菜单栏放到上面去，就是用的这个组件，还是不用这个了，搞得耦合度太高了

这个组件一般是用在src/layouts/BasicLayout.tsx文件夹里面,来做一个基础布局

// 需要先引入
import ProLayout, {MenuDataItem,
  BasicLayoutProps as ProLayoutProps,
  Settings,
  DefaultFooter,
} from '@ant-design/pro-layout';

<ProLayout
      logo={logo}
      menuHeaderRender={(logoDom, titleDom) => (
        <Link to="/">
          {logoDom}
          {titleDom}
        </Link>
      )}
      onCollapse={handleMenuCollapse}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children) {
          return defaultDom;
        }
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      breadcrumbRender={(routers = []) => [
        {
          path: '/',
          breadcrumbName: formatMessage({
            id: 'menu.home',
            defaultMessage: 'Home',
          }),
        },
        ...routers,
      ]}
      itemRender={(route, params, routes, paths) => {
        const first = routes.indexOf(route) === 0;
        return first ? (
          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        ) : (
          <span>{route.breadcrumbName}</span>
        );
      }}
      footerRender={footerRender}
      menuDataRender={menuDataRender}
      formatMessage={formatMessage}
      rightContentRender={rightProps => <RightContent {...rightProps} />}
      {...props}
      {...settings}
    >
      <Authorized authority={authorized!.authority} noMatch={noMatch}>
        {children}
      </Authorized>
    </ProLayout>

ProLayout上面的属性配置如下：

(1)title:

(2)logo:

(3)menuHeaderRender: 有更强的定制需求，(logo,title)=>ReactNode 属性

(4)siderWidth: 控制右侧菜单的宽度

(5)menuRender: 自定义整个菜单，和下面那个一起

(6)menuItemRender: 自定义整个菜单

(7)menuDataRender: 自定义菜单数据，你可以将其替换为从服务器获取的数据

(8)PageHeaderWrapper: 封装了 ant design 的 PageHeader 组件，增加了 tabList，和 content。根据当前的路由填入 title 和 breadcrumb。它依赖 Layout 的 route 属性

PageHeaderWrapper 必须要被 ProLayout 包裹才能自动生成面包屑和标题

嵌套布局

<ProLayout
  layout="topmenu"
  className="chenshuai2144"
  disableMobile
  rightContentRender={rightProps => <RightContent {...rightProps} {...settings} />}
  contentStyle={
   
   { margin: 0 }}
>
  <ProLayout navTheme="light" menuHeaderRender={false} {...props} {...settings}>
    <PageHeaderWrapper content="欢迎您的使用">{props.children}</PageHeaderWrapper>
  </ProLayout>
</ProLayout>

一、Ant Design Pro介绍与文件结构

一、入门

二、构建和部署

三、ProLayout 组件

Guess you like