独立使用 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 文档。

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