blue-song-tpl v1.0.1

组件开发说明

一、目录说明

|-- 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 相关配置

cover 组件预览图

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

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

cover-size 组件预览图的宽高

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

tags 组件标签

1. 用于分类，方便查找

cName 组件中文名称

coverStyle 预览图的其它样式（非必填）

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

coverStyle: 'marginLeft: 100px; marginRight: 100px;'

mdx 文档

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