pro-components2x 将 @ant-design/pro-xxx 全部修改为 @ant-design/pro-components
Table，Form，List 等组件没有带来新特性，主要是兼容 antd@4 和 css in js 的改造
提供了 @ant-design/pro-components 一个包来管理 procomonents

  • ProComponents 2.0 是一个兼容版本，会维护这个版本一段时间。
  • 在 antd@5x 占有率达到一定程度时，会发布 3.0 来去除 antd@4 的兼容

image.png

https://github.com/ant-design/pro-components/tree/master/packages
image.png

  1. yarn add @ant-design/pro-components
  3. import { SmileOutlined } from '@ant-design/icons';
  4. import {
  5.   FooterToolbar,
  6.   PageContainer,
  7.   ProForm,
  8.   ProFormDateRangePicker,
  9.   ProFormDigit,
  10.   ProFormRadio,
  11.   ProFormSelect,
  12.   ProFormText,
  13.   ProFormTextArea,
  14.   ProFormUploadButton,
  15.   ProLayout,
  16. } from '@ant-design/pro-components';
  18. import '@ant-design/pro-components/dist/components.css';
  19. // 使用 less，可以方便进行主题自定义，也可以做到按需加载
  21. // 等价于安装了以下组件
  22. "dependencies": {
  23.   "@ant-design/pro-card": "1.20.21",
  24.   "@ant-design/pro-descriptions": "1.12.5",
  25.   "@ant-design/pro-field": "1.36.5",
  26.   "@ant-design/pro-form": "1.74.5",
  27.   "@ant-design/pro-layout": "6.38.22",
  28.   "@ant-design/pro-list": "1.21.84",
  29.   "@ant-design/pro-provider": "1.10.0",
  30.   "@ant-design/pro-skeleton": "1.0.13",
  31.   "@ant-design/pro-table": "2.80.5",
  32.   "@ant-design/pro-utils": "1.45.3"
  33. },

pro-components源码

安装了 pro-components就不需要安装其他组件了，因为所有组件都聚合在这个 npm包里面
如果用不到这么多组件，就单独安装其中一个，整个包有些大

  1. export * from '@ant-design/pro-card';
  2. export * from '@ant-design/pro-descriptions';
  3. export * from '@ant-design/pro-field';
  4. export * from '@ant-design/pro-form';
  5. export * from '@ant-design/pro-layout';
  6. export * from '@ant-design/pro-list';
  7. export * from '@ant-design/pro-provider';
  8. export * from '@ant-design/pro-skeleton';
  9. export * from '@ant-design/pro-table';
  10. export * from '@ant-design/pro-utils';
  12. export * from './version';
  13. // version源码
  14. export var version = {
  15.   "@ant-design/pro-card": "2.0.8",
  16.   "@ant-design/pro-components": "2.3.11",
  17.   "@ant-design/pro-descriptions": "2.0.9",
  18.   "@ant-design/pro-field": "2.1.2",
  19.   "@ant-design/pro-form": "2.2.0",
  20.   "@ant-design/pro-layout": "7.1.1",
  21.   "@ant-design/pro-list": "2.0.9",
  22.   "@ant-design/pro-provider": "2.0.3",
  23.   "@ant-design/pro-skeleton": "2.0.3",
  24.   "@ant-design/pro-table": "3.0.9",
  25.   "@ant-design/pro-utils": "2.2.0"
  26. };

version

ProComponents 是其他组件的组合，功能是相同的，同时提供了 version 变量，可以在控制台中输出

  1. import { version } from "@ant-design/pro-components";
  2. console.log(version);
  4. {
  5.   "@ant-design/pro-card": "2.0.0-experimental.25",
  6.   "@ant-design/pro-components": "2.3.1",
  7.   "@ant-design/pro-descriptions": "2.0.0-experimental.26",
  8.   "@ant-design/pro-field": "2.0.0-experimental.24",
  9.   "@ant-design/pro-form": "2.0.0-experimental.26",
  10.   "@ant-design/pro-layout": "7.0.0-experimental.36",
  11.   "@ant-design/pro-list": "2.0.0-experimental.27",
  12.   "@ant-design/pro-provider": "2.0.0-experimental.14",
  13.   "@ant-design/pro-skeleton": "2.0.0-experimental.9",
  14.   "@ant-design/pro-table": "3.0.0-experimental.27",
  15.   "@ant-design/pro-utils": "2.0.0-experimental.23",
  16. };

proComponents

基于 antd，ts的封装组件
image.png
image.png