Zeal Cube
Fork antd@3.10.1 并集成了自定义样式以及pro-antd@2.0.0的部分组件. API文档
安装
npm install zeal-cube --save
示例
import DatePicker from 'zeal-cube';ReactDOM;
引入样式:
import 'zeal-cube/dist/zeal-cube.css'; // or 'zeal-cube/dist/zeal-cube.less'
你也可以 按需加载组件。(针对联通客户中心脚手架说明如下)
需要三步
第一,安装'babel-plugin-import'
第二,在config.js 增加配置如下
extraBabelPlugins: require 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 | |--- indexzh-CNmd # 必须要有,用于生成API文档 | |--- demo # 必须要有,否则api文档无法生成对应的demo | | |--- linemd # demo1 | | |--- numbermd # demo2 | |--- indexjsx # 组件源码 | |--- style # 组件样式必须放在style目录下,否则无法实现按需加载 | | |--- indexless # 样式 | | |--- indextsx # 必须是tsx格式,且必须引入style组件和当前组件的indexless 否则无法实现按需加载 | |--- indextestjs # 测试
- 组件样式,应使用唯一的命名空间,格式如:
cube-组件名
。
// 禁止使用
- 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; screen and max-width: @screen-xs width: 100%;
error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
.eslintrc.js
添加"linebreak-style": 0