独立使用 Pro 组件

Ant Design Pro 脚手架内提供了一套默认业务组件,这些组件抽象了控制台业务中的一些常见区块。我们将持续维护和迭代这些组件,为中后台业务提供比 Ant Design 基础组件更高级别的抽象。

如何使用#

Ant Design Pro 脚手架内用到的组件分为两种:

对于脚手架的用户,你可以在脚手架中直接引用/新增/改造 pro 的自带组件,具体方式可参考 新增组件

对于没有使用这套脚手架的开发者,我们提供了一种方式来调用这套内建组件。

默认业务组件会发布到 npm 的 ant-design-pro 上。

$ npm install ant-design-pro@latest --save
import 'ant-design-pro/dist/ant-design-pro.css'; // 统一引入样式

然后你就可以像使用 Ant Design 组件一样调用 pro 组件了。

import Result from 'ant-design-pro/lib/Result';

ReactDOM.render(<Result type="success" />, mountNode);

注意,pro 组件默认依赖于 antd@3.0,需要保证 antd 版本的一致性。

按需加载#

可以使用 babel-plugin-import 来进行按需加载,加入这个插件后,你可以这么写

import { Result } from 'ant-design-pro';

ReactDOM.render(<Result type="success" />, mountNode);

推荐使用这种方式。

babel-plugin-import 配置如下:

 {
    libraryName: 'ant-design-pro',
    libraryDirectory: 'lib',
    style: true,
    camel2DashComponentName: false,
}

文档和反馈#

你可以在 组件页面 找到所有的业务组件,以及相关的演示和 API 文档。

组件会随着脚手架的更新而不断迭代,有任何问题和需求可以反馈到 这里