{"id":13671383,"url":"https://github.com/cuke-ui/cuke-ui","last_synced_at":"2025-04-13T06:20:51.625Z","repository":{"id":32941561,"uuid":"145936740","full_name":"cuke-ui/cuke-ui","owner":"cuke-ui","description":"🥒 黄瓜ui：一个即插即用的React UI 库","archived":false,"fork":false,"pushed_at":"2023-07-08T00:10:28.000Z","size":2853,"stargazers_count":429,"open_issues_count":4,"forks_count":67,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-13T04:59:38.916Z","etag":null,"topics":["components","cuke-ui","javascript","react","storybook","ui"],"latest_commit_sha":null,"homepage":"https://cuke-ui.github.io/cuke-ui-landing/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cuke-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-08-24T03:17:30.000Z","updated_at":"2025-03-31T13:23:28.000Z","dependencies_parsed_at":"2024-01-14T17:03:54.088Z","dependency_job_id":"df575623-9ec2-495b-a18f-43ee7b25373d","html_url":"https://github.com/cuke-ui/cuke-ui","commit_stats":{"total_commits":356,"total_committers":8,"mean_commits":44.5,"dds":"0.053370786516853896","last_synced_commit":"eb2a28207ac49b423df0ca2fe1ed03857b13ca5c"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuke-ui%2Fcuke-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuke-ui%2Fcuke-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuke-ui%2Fcuke-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuke-ui%2Fcuke-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuke-ui","download_url":"https://codeload.github.com/cuke-ui/cuke-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665756,"owners_count":21142123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","cuke-ui","javascript","react","storybook","ui"],"created_at":"2024-08-02T09:01:08.037Z","updated_at":"2025-04-13T06:20:51.600Z","avatar_url":"https://github.com/cuke-ui.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://cdn.lijinke.cn/logo.png\" width=\"100\"/\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\ncuke-ui\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\n黄瓜 UI : 一个即插即用的 React UI 库\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/cuke-ui\" title=\"npm\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/cuke-ui.svg?style=for-the-badge\" alt=\"npm\"/\u003e\n  \u003c/a\u003e\n   \u003ca href=\"https://badge.fury.io/js/cuke-ui\" title=\"npm\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/cuke-ui.svg?style=for-the-badge\" alt=\"npm version\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://isitmaintained.com/project/cuke-ui/cuke-ui\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/cuke-ui/cuke-ui.svg?style=for-the-badge\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/cuke-ui/cuke-ui\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/cuke-ui/cuke-ui.svg?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://travis-ci.com/cuke-ui/cuke-ui\" title=\"npm\"\u003e\n    \u003cimg src=\"https://travis-ci.com/cuke-ui/cuke-ui.svg?branch=master\" alt=\"travis\"/\u003e\n  \u003c/a\u003e\n   \u003ca href=\"https://coveralls.io/github/cuke-ui/cuke-ui?branch=master?style=for-the-badge\" title=\"Coverage Status\"\u003e\n    \u003cimg src=\"https://coveralls.io/repos/github/cuke-ui/cuke-ui/badge.svg?branch=master\" alt=\"Coverage Status\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/cuke-ui/cuke-ui\" title=\"dependencies status\"\u003e\n    \u003cimg src=\"https://david-dm.org/cuke-ui/cuke-ui/status.svg\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## :guitar: 名字由来\ncuke(黄瓜), 常见的一种蔬菜, 希望这个项目也成为常见的一个依赖(虽然这是不可能的), \n其中黄瓜也符合 这个组件库的 宗旨 : 即插即用\n其次 cuke 谐音 (cool ke) 很酷的李金珂的 意思\n主题色 采用 黄瓜绿, 清新又可爱, 组件借鉴(抄袭)了 有牌面的  Ant Design, 抱着学习的目的,开发了这个组件库\n\n## :metal: 在线演示\n\n[https://cuke-ui.github.io/cuke-ui/](https://cuke-ui.github.io/cuke-ui/)\n\n[![Edit nn6yr2m94](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/nn6yr2m94?autoresize=1\u0026expanddevtools=1\u0026hidenavigation=1)\n\n## :zap: 安装\n\u003e 使用 npm \n```\nnpm i cuke-ui --save\n```\n\n\u003e 使用 yarn\n```\nyarn add cuke-ui\n```\n\n\u003e 使用 cdn\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.css\"\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.js\"\u003e\u003c/script\u003e\n```\n\n\n## :book: 如何使用\n\n\u003e 1. 全部引入\n\n```jsx\nimport React from \"react\"\nimport { Button } from \"cuke-ui\"\nimport \"cuke-ui/dist/cuke-ui.min.css\"\n\nclass Page extends React.Component {\n  render(){\n    return (\n      \u003cButton type=\"primary\"\u003e黄瓜ui\u003c/Button\u003e\n    )\n }\n}\n```\n\n\u003e 2 .按需引入\n\n```js\nimport Button from 'cuke-ui/lib/button';\nimport 'cuke-ui/lib/button/style';\n```\n\n\u003e 3. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)\n\n```js\n// .babelrc.js\nmodule.exports = {\n  plugins: [\n    [\"babel-plugin-import\", {\n      \"libraryName\": \"cuke-ui\",\n      \"libraryDirectory\": \"es\",\n      \"style\": true\n    },'cuke-ui'], \n  ]\n}\n\n// 多个组件库\nmodule.exports = {\n  plugins: [\n    [\"babel-plugin-import\", {\n      \"libraryName\": \"cuke-ui\",\n      \"libraryDirectory\": \"es\",\n      \"style\": true\n    },'cuke-ui'], \n    \n    [\"babel-plugin-import\", {\n      \"libraryName\": \"antd\",\n      \"libraryDirectory\": \"es\",\n      \"style\": true\n    },'antd'], \n  ]\n}\n\n\n```\n\n\u003c!-- ### 测试版本\n![next](https://img.shields.io/npm/v/cuke-ui/next.svg?style=for-the-badge) --\u003e\n\n\n## :pencil: 更新日志\n\n[CHANGELOG](https://github.com/cuke-ui/cuke-ui/blob/master/CHANGELOG.md)\n\n## :sparkling_heart: 感谢\n\n- [@Yuhan zhong](https://github.com/duuliy)\n- [@Caraws](https://github.com/Caraws)\n- [@CanvasCao](https://github.com/CanvasCao)\n- [@licc](https://github.com/cc616)\n\n\n## :unamused: 设计规范\n\n高仿 Ant-Design\n\n## :dancers: 谁在使用\n\n- 勇敢的人\n- 我自己\n- [李金珂的小屋](https://www.lijinke.cn)\n\n## :package: 参考轮子\n\n- [ant-design](https://github.com/ant-design/ant-design)\n- [gulu](https://github.com/FrankFang/gulu)\n- [dragon-ui](https://github.com/JeromeLin/dragon-ui)\n\n\n##  :wrench: 本地开发\n\u003e 请首先安装 npm i -g yarn\n\n\n1. 安装依赖\n\u003e 如果无法科学上网 可 使用 淘宝镜像 \n\u003e yarn config set registry https://registry.npm.taobao.org\n\n```\ngit clone https://github.com/cuke-ui/cuke-ui.git\ncd cuke-ui\nyarn\n```\n\n2. 启动开发服务器\n\u003e 基于  storybook  [什么是storybook?](https://storybook.js.org/basics/introduction/)\n\n```\nyarn dev\n```\n\n3. 访问 [http://localhost:8080](http://localhost:8080)\n\n4. 开发组件\n\n\u003e 参考 `components/button`\n\n在 `components` 新建一个组件(组件名与文件名对应) 以 `button` 组件目录结构为例\n\n- components\n\t- button           //组件文件夹\n\t\t- `__tests__`    //单元测试\n\t\t\t- `__snapshots__`  // ui 快照\n\t\t\t- `index.test.js`  //测试文件\n\t\t- `index.js`     //组件逻辑\n                - `style.js`     // 按需加载需要用到\n\t\t- `styles.less`  //组件样式\n\t\t\n然后 在 `stories` 目录下 新建一个 `button.js`\n\n- stories\n\t- `button.js`  // storybook 的文档文件\n\t\n\n```jsx\n//button.js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport Button from '../components/button';          //引入你的组件\nimport { withInfo } from '@storybook/addon-info';\n\nstoriesOf('示例标题', module)\n .add('Button 按钮', withInfo()(() =\u003e (         // 添加到页面上\n   \u003cButton type=\"primary\"\u003e获取文字\u003c/Button\u003e   // 这里写jsx\n )))\n```\n\n\n最后 将 写好的 storybook 文件 添加到 配置里面\n\u003e .storybook \u003e config.js\n\n```js\n\n\nimport { configure } from '@storybook/react';\nfunction loadStories() {\n  require('../stories/button');     //刚才写好的文件\n}\n\nconfigure(loadStories, module);\n```\n\n这样就完成了 `storybook` 会将你写好的组件 添加到页面上, 并且会自动生成说明文档 （其实本质上就是一个 webpack 的 dev-server）\n\n最后的最后, 在 `components/index.js` 导出组件,以便于发布\n\n```js\nexport { default as Button } from \"./button\";\n```\n\n\n## :page_facing_up: License\n\n[MIT](https://github.com/cuke-ui/cuke-ui/blob/master/LICENSE)\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuke-ui%2Fcuke-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuke-ui%2Fcuke-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuke-ui%2Fcuke-ui/lists"}