cuke-ui
黄瓜 UI : 一个即插即用的 React UI 库
🎸 名字由来
cuke(黄瓜), 常见的一种蔬菜, 希望这个项目也成为常见的一个依赖(虽然这是不可能的), 其中黄瓜也符合 这个组件库的 宗旨 : 即插即用 其次 cuke 谐音 (cool ke) 很酷的李金珂的 意思 主题色 采用 黄瓜绿, 清新又可爱, 组件借鉴(抄袭)了 有牌面的 Ant Design, 抱着学习的目的,开发了这个组件库
🤘 在线演示
https://cuke-ui.github.io/cuke-ui/
⚡️ 安装
使用 npm
npm i cuke-ui --save
使用 yarn
yarn add cuke-ui
使用 cdn
📖 如何使用
- 全部引入
import React from "react"import Button from "cuke-ui"import "cuke-ui/dist/cuke-ui.min.css" Component { return <Button ="primary">黄瓜ui</Button> }
2 .按需引入
;;
// .babelrc.jsmoduleexports = plugins: "babel-plugin-import" "libraryName": "cuke-ui" "libraryDirectory": "es" "style": true 'cuke-ui' // 多个组件库moduleexports = plugins: "babel-plugin-import" "libraryName": "cuke-ui" "libraryDirectory": "es" "style": true 'cuke-ui' "babel-plugin-import" "libraryName": "antd" "libraryDirectory": "es" "style": true 'antd'
📝 更新日志
💖 感谢
😒 设计规范
高仿 Ant-Design
👯 谁在使用
- 勇敢的人
- 我自己
- 李金珂的小屋
📦 参考轮子
🔧 本地开发
请首先安装 npm i -g yarn
- 安装依赖
如果无法科学上网 可 使用 淘宝镜像 yarn config set registry https://registry.npm.taobao.org
git clone https://github.com/cuke-ui/cuke-ui.git
cd cuke-ui
yarn
- 启动开发服务器
基于 storybook 什么是storybook?
yarn dev
-
开发组件
参考
components/button
在 components
新建一个组件(组件名与文件名对应) 以 button
组件目录结构为例
- components
- button //组件文件夹
__tests__
//单元测试__snapshots__
// ui 快照index.test.js
//测试文件
index.js
//组件逻辑 -style.js
// 按需加载需要用到styles.less
//组件样式
- button //组件文件夹
然后 在 stories
目录下 新建一个 button.js
- stories
button.js
// storybook 的文档文件
//button.jsimport React from 'react';import storiesOf from '@storybook/react';import Button from '../components/button'; //引入你的组件import withInfo from '@storybook/addon-info';
最后 将 写好的 storybook 文件 添加到 配置里面
.storybook > config.js
; { ; //刚才写好的文件} ;
这样就完成了 storybook
会将你写好的组件 添加到页面上, 并且会自动生成说明文档 (其实本质上就是一个 webpack 的 dev-server)
最后的最后, 在 components/index.js
导出组件,以便于发布
;