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

<link rel="stylesheet" href="https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.css">
<script type="text/javascript" src="https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.js"></script>

📖 如何使用

全部引入

import React from "react"
import { Button } from "cuke-ui"
import "cuke-ui/dist/cuke-ui.min.css"

class Page extends React.Component {
  render(){
    return (
      <Button type="primary">黄瓜ui</Button>
    )
 }
}

2 .按需引入

import Button from 'cuke-ui/lib/button';
import 'cuke-ui/lib/button/style';

使用 babel-plugin-import

// .babelrc.js
module.exports = {
  plugins: [
    ["babel-plugin-import", {
      "libraryName": "cuke-ui",
      "libraryDirectory": "es",
      "style": true
    },'cuke-ui'], 
  ]
}

// 多个组件库
module.exports = {
  plugins: [
    ["babel-plugin-import", {
      "libraryName": "cuke-ui",
      "libraryDirectory": "es",
      "style": true
    },'cuke-ui'], 
    
    ["babel-plugin-import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    },'antd'], 
  ]
}

📝 更新日志

CHANGELOG

💖 感谢

😒 设计规范

高仿 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

访问 http://localhost:8080
开发组件

参考 components/button

在 components 新建一个组件(组件名与文件名对应) 以 button 组件目录结构为例

components
- button //组件文件夹
  - __tests__ //单元测试
    - __snapshots__ // ui 快照
    - index.test.js //测试文件
  - index.js //组件逻辑 - style.js // 按需加载需要用到
  - styles.less //组件样式

然后在 stories 目录下新建一个 button.js

stories
- button.js // storybook 的文档文件

//button.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../components/button';          //引入你的组件
import { withInfo } from '@storybook/addon-info';

storiesOf('示例标题', module)
 .add('Button 按钮', withInfo()(() => (         // 添加到页面上
   <Button type="primary">获取文字</Button>   // 这里写jsx
 )))

最后将写好的 storybook 文件添加到配置里面

.storybook > config.js

import { configure } from '@storybook/react';
function loadStories() {
  require('../stories/button');     //刚才写好的文件
}

configure(loadStories, module);

这样就完成了 storybook 会将你写好的组件添加到页面上, 并且会自动生成说明文档（其实本质上就是一个 webpack 的 dev-server）

最后的最后, 在 components/index.js 导出组件,以便于发布

export { default as Button } from "./button";

📄 License

MIT

zhangtengjin/cuke-ui