Fork [email protected] 并集成了自定义样式以及[email protected]的部分组件. API文档

安装

npm install zeal-cube --save   

示例

import { DatePicker } from 'zeal-cube';
ReactDOM.render(<DatePicker />, mountNode);

引入样式：

import 'zeal-cube/dist/zeal-cube.css';  // or 'zeal-cube/dist/zeal-cube.less'

你也可以 按需加载组件。(针对联通客户中心脚手架说明如下)

需要三步

第一，安装'babel-plugin-import'

第二，在config.js 增加配置如下

  extraBabelPlugins: [
    [
      require.resolve('babel-plugin-import'),
      {
        libraryName: 'zeal-cube',
        style:true
      },
    ],
  ],

第三，移除import 'zeal-cube/dist/zeal-cube.css'

以Button为例，如果整个应用只用到Button，配置前后能节省__1.1M__

发布NPM

npm run pub 

发布前需要更新package.json中的版本号，否则会报错

生成API文档

npm run predeploy 

命令执行结束，会生成_site目录，然后发布到线上服务器。如果只是本地预览可以执行 npm run start

关于组件封装

• 支持*.jsx，.tsx和.less
• 源码统一放在components文件夹，目录约定如下：

  |--- ellipsis                                 # 组件名。小写，以“-”连接。如: button、back-top                  
  |    |--- index.zh-CN.md                      # 必须要有，用于生成API文档 
  |    |--- demo                                # 必须要有，否则api文档无法生成对应的demo                  
  |    |    |--- line.md                        # demo1 
  |    |    |--- number.md                      # demo2
  |    |--- index.jsx                           # 组件源码  
  |    |--- style                                # 组件样式必须放在style目录下，否则无法实现按需加载     
  |    |    |--- index.less                      # 样式  
  |    |    |--- index.tsx                      # 必须是tsx格式，且必须引入style组件和当前组件的index.less 否则无法实现按需加载
  |    |--- index.test.js                       # 测试   

• 组件样式，应使用唯一的命名空间，格式如：cube-组件名。

// 禁止使用css module
.cube-ellipsis{

}

• commit源码之前，内部会自动调用lint进行校验，保证代码的规范

更多规范参考 Airbnb React/JSX Style Guide 英文 | 中文

国际化

参考 国际化文档。

支持环境

• 现代浏览器和 IE9 及以上。

| IE / Edge | Firefox | Chrome | Safari | Opera | Electron | | --------- | --------- | --------- | --------- | --------- | --------- | | IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions

FAQs

commit之前，构建工具会自动通过lint-staged命令对*.less、.jsx、.tsx和*md进行校验，保证代码的规范。如下是常见报错以及对于的修改方案

• Value must be omitted for boolean attributes

表示 默认 属性是true 不需要设置 xxx={true}

• Trailing spaces not allowed

后面的空格是不允许的

• .stylelintrc 配置"selector-pseudo-class-no-unknown": null,

允许less中使用:global

• at-rule-empty-line-before @import、@media 符号必须上面要空一行,且左边顶格

.cube-result {
  text-align: center;
  width: 72%;
  margin: 0 auto;

@media screen and (max-width: @screen-xs) {
    width: 100%;
}
}

• error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

.eslintrc.js 添加"linebreak-style": 0