组件开发说明

一、目录说明

``
|-- build --------编译脚本
|-- src
|-- components --------组件目录
|--index.jsx --------组件首页
|-- utils --------公共方法目录
|-- index.jsx --------组件导出（开发可以不需要动）
|-- index_dev.jsx --------组件效果预览首页（开发可以不需要动）
|-- script --------发布脚本以及mdx文档
|-- .eslintrc.js --------eslintrc
|-- .gitignore --------git忽略文件
|-- babel.config.js --------babel配置
|-- index.js --------组件导出（开发可以不需要动）
|-- LICENSE --------协议文件
|-- package.json --------
|-- postcss.config.js --------
|-- README.md --------readme文档
|-- webpack.dull.js --------
`

二、相关命令

1. knpm install 安装依赖
2. npm run dev 本地启动开发环境
3. npm run build 然后 git 提交后，npm run cola-publish 提交组件（提交到knpm，注册至 voo、cola）

三、关于适配

1. 我们使用 px2rem 按照 750 设计稿进行等比适配，书写样式的时候在设计稿量的多少就写多少即可，单位直接用 px
2. 通过 js 进行样式赋值的时候，可以使用 utils/common.js 中的 px2rem 方法进行转换
3. 需要产品配置宽高等数值的时候，皆要求产品填入按照750设计稿量出的数值，组件中注意使用 px2rem 方法进行适配，例如：
`
const style = {
fontSize: px2rem(this.props.fontSize),
color: this.props.color,
paddingLeft: px2rem(this.props.paddingLeft),
paddingTop: px2rem(this.props.paddingTop),
paddingRight: px2rem(this.props.paddingRight),
paddingBottom: px2rem(this.props.paddingBottom),
textAlign: this.props.textAlign
}
`

四、关于组件审核

为了提高组件质量，并不是说运行了 npm run cola-publish 命令之后，组件就马上会出现在 voo 和 cola 的组件列表上
在 Voo 平台上还有一个组件审核的环节，符合要求的组件才可入坑
提交之后可以催促 @曾文富 @陈方正 进行组件审核

五、关于样式类命名

为了避免样式冲突，样式类域名需要遵循如下规则：
`
cola-[comName]-*
`
例如，组件 text，的样式命名可以为：
`
cola-text-wrap
cola-text-content
`

六、package.json 相关配置

$3

1. 用于 Voo 平台可视化的通过组件合成模板时候的预览，请按照 750 的比例出图。
2. 如果组件有多种状态，请提供多个预览图，按照逗号分隔，供合成时候勾选

> 该预览图是组件的门面，决定了组件合成模板的预览体验，请一定认真慎重提交，否则审核不过的。非常重要！非常重要！非常重要！

$3

1. 基于 750 设计稿的数值
2. 宽高用逗号隔开，例如：750,300
3. 重要性同上

$3

1. 用于分类，方便查找

$3

$3

1. 除了 coverSize 以外，预览图的其它样式属性，目的是提高预览体验
2. 样式依然基于 750, 使用 px 单位，写法如：
`
coverStyle: 'marginLeft: 100px; marginRight: 100px;'
``

$3

1. 位置：script/doc.mdx
2. mdx 语法有兴趣可以搜索了解下，不想了解的话，按照案例写下来也问题不大
3. 这主要是上传到 cola 之后的展示