- 提供基本功能组件和通用业务组件 - 多语言功能支持 - 使用less编写样式
npm install enos-dplbash
npm install @enos/dpl --save
`
Usage
直接引入使用,更多使用说明可参见DPL主站点
`js
import { Input } from '@enos/dpl';
ReactDOM.render(, mountNode);
`
Development
- Fork DPL的master分支
- 在项目根目录下的components目录中,以组件名建立组件目录,命名建议简短清晰,能清楚描述组件功能
- 在组件目录下增加组件主入口文件,命名为index.js,在此export组件;增加style文件夹统一放置样式文件,并在其下新增index.js,在此引入组件涉及的样式文件,同时在此建立index.less,作为组件的主样式入口
- 在组件目录下增加文件index.zh-CN.md和index.en-US.md,分别填写组件的中英文说明,可参考已有格式。文件最上方需要填写组件文档的描述字段,如需新增category或type类型,需要在站点配置中增加额外配置,请联系DPL的Owner
示例:
`
---
category: Components // 说明文档的大分类,对组件而言都填写'Components'
subtitle: 输入框 // 组件在站点中的补充说明副标题,一般中文文档中需要填写
type: Data Entry // 组件的分类
title: Input // 组件在站点中显示的主名称
---
`
- 在组件目录下建立demo文件夹,在此编写组件的示例代码,可参考已有格式。文件最上方需要填写Demo的基本属性和中英文说明
示例:
`
---
order: 0 // Demo在文档中的顺序,按从小至大排序
title: // Demo的标题
zh-CN: 基本
en-US: basic
---
zh-CN // Demo的中文简介
最简单的用法,展示可勾选,可选中,禁用,默认展开等功能。
en-US // Demo的英文简介
The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
`
- 可在项目根目录下的demo目录中,以组件名建立开发调试用demo,并在root.js中引入该demo,以Input组件为例,引入方式如下:
`js
const demoMap = {
...
Input: asyncComponent(() => import('./input')),
...
};
`
- 可启动开发调试服务,用于开发组件
`bash
npm start
`
- antd组件样式的修改规范
1. 首先引入已有组件的样式,可用~表示node_modules目录,如:
`
@import'~antd/lib/input/style/index.less';
`
2. 涉及颜色,大小等参数变更,统一提取变量至components/style/themes/default.less,具体用到的地方引入主题文件,如:
`
@import "../../style/themes/default";
`
3. 如需使用其他组件中的mixin,需要单独引入,如:
`
@import '../../input/style/dpl-mixin.less';
`
- 开发完成后,可编写测试用例,放置于组件目录下的__tests__目录下,并运行测试,测试通过后方可提交PR
`bash
npm test
`
- 组件开发和测试完成后,发起PR,等待DPL的Owner进行Merge
Release
$3
如未登录过,使用指定账号登录公司内部npm
`bash
npm login
`
$3
发布前务必填填写好版本号和更新说明
- 提升package.json中的版本号version,版本号遵循Semantic Versioning 2.0.0语义化版本规范。
- 更新说明填入项目根目录下的CHANGELOG.zh-CN.md和CHANGELOG.en-US.md,具体可参考已有格式。
$3
`bash
npm run build
`
$3
`bash
npm run pub
`
DPL Site
$3
站点代码位于项目根目录下的site文件夹,同样基于DPL的组件开发,可在项目内通过如下指令启动站点的开发调试
`bash
npm run site-start
`
$3
通过如下指令构建站点代码,将输出至根目录下的_site目录,发布此目录即可
`bash
npm run site-build
``