组件仓库

组件仓库好比一个数据源，我们可以通过 antd 中获取 button，那么 antd 就是作为 button 的仓库，而 button 则代表组件。那么我们可以通过不同的仓库即可获得不同的组件。目前有以下组件仓库：

  1. html
  2. antd (版本: 4.1.4)
  3. @ant-design/pro-layout (版本: 5.0.9)
  4. @ant-design/icons (版本: 4.1.6)
  5. ams (AMS 内置组件)
  6. ams/projects/cost-per-buy (AMS 定制项目: 买量后台)

阅读至此，开发者需要大致知道的是：

1. 所有的仓库名称必须小写。
2. 仓库名除了特殊对待的几个以外，其他均与 npm 线上仓库名称一致。 3. 仓库 base 代表基础仓库，即 AMS 内部自带的组件仓库

组件仓库 - html

html 组件仓库用于表示所有原生 html 元素组件集合，其中所有日常使用的 html 元素如：div、a、span 等。通常来说我们可以进行如下 json 表达， 表达式等效于注释部分：

  1. // <a></a>
  2. {
  3.   "$$$": "component",
  4.   "registryName": "html",
  5.   "componentName": "a",
  6.   ...
  7. }
  1. // <div></div>
  2. {
  3.   "$$$": "component",
  4.   "registryName": "html",
  5.   "componentName": "div",
  6.   ...
  7. }

组件仓库 - antd

antd (ant design) 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。AMS 完整的引入了 antd 并能够使用官网上的所有提供的组件案例。

Ant Design

这是一个最基本的使用样例。AMS 可以通过解析以下 json 还原出等效 React JSX 虚拟 dom 等效表达渲染。

  1. // import { Button } from 'antd';
  2. // <Button type="primary">Primary</Button>
  3. {
  4.   "$$$": "component",
  5.   "registryName": "antd",
  6.   "componentName": "Button",
  7.   "props": {
  8.     "type": "primary"
  9.   },
  10.   "children": [
  11.     "Primary"
  12.   ]
  13. }

Ant Design - Card

以下例子使用 Card 与 Card.Meta 的组件嵌套，只要我们能够正确理解 import { Card } from 'antd' 引入形式，我们也可以用同样的 json 表 等效表达出来。同样的，AMS 也能够支持 Card.Meta 的解析：

  1. // import { Card } from 'antd';
  2. // ReactDOM.render(
  3. //   <Card
  4. //     hoverable
  5. //     style={{ width: 240 }}
  6. //   >
  7. //     <Card.Meta title="Europe Street beat" description="www.instagram.com" />
  8. //   </Card>,
  9. //   mountNode,
  10. // );
  12. {
  13.   "$$$": "component",
  14.   "registryName": "antd",
  15.   "componentName": "Card",
  16.   "props": {
  17.     "hoverable": true,
  18.     "style": {
  19.       "width": 240
  20.     }
  21.   },
  22.   "children": [
  23.     {
  24.       "$$$": "component",
  25.       "registryName": "antd",
  26.       "componentName": "Card.Meta",
  27.       "props": {
  28.         "title": "Europe Street beat",
  29.         "description": "www.instagram.com"
  30.       }
  31.     }
  32.   ]
  33. }

组件仓库 - @ant-design/icons

具体使用方式请参考：https://ant.design/components/icon/

组件仓库 - @ant-design/pro-layout

具体使用方式请参考：https://prolayout.ant.design/

组件仓库 - ams

文档待补全。