cuke ui

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 > 

如何使用

1. 全部引入

 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' ;

3. 使用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

? 感謝

• @Yuhan zhong
• @Caraws
• @CanvasCao
• @licc

? 設計規範

高仿Ant-Design

? 誰在使用

• 勇敢的人
• 我自己
• 李金珂的小屋

? 參考輪子

• ant-design
• gulu
• dragon-ui

? 本地開發

請首先安裝npm i -g yarn

1. 安裝依賴

如果無法科學上網可使用淘寶鏡像yarn config set registry https://registry.npm.taobao.org

 git clone https://github.com/cuke-ui/cuke-ui.git
cd cuke-ui
yarn

2. 啟動開發服務器

基於storybook 什麼是storybook?

 yarn dev

3. 訪問http://localhost:8080

4. 開發組件

參考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