1.0.0 • Published 5 years ago

super-ly v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

Fork antd@3.10.1 并集成了自定义样式以及pro-antd@2.0.0的部分组件. 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 / EdgeFirefoxChromeSafariOperaElectron
IE9, IE10, IE11, Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versionslast 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