cuke ui

cuke-ui

오이 UI : 플러그 앤 플레이 반응 UI 라이브러리

? 이름의 기원

일반적인 야채 인 Cuke (오이). 이 프로젝트가 공통 의존성이되기를 바랍니다 (불가능하지만). 그중에서도 Cucumber는이 구성 요소 라이브러리의 목적을 충족시킵니다 : 플러그 앤 플레이, Cuke, Homophonic (Cool Ke). Cool Li Jinke의 의미 테마 색상은 오이 녹색, 신선하고 귀엽다. 구성 요소는 개미 디자인을 빌려 (표절)하고 학습을 목적 으로이 구성 요소 라이브러리를 개발했습니다.

? 온라인 데모

https://cuke-ui.github.io/cuke-ui/

⚡ 설치

NPM 사용

 npm i cuke-ui --save

원사를 사용하십시오

 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. 바벨-플루그 인-임박 사용

 // .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

? 디자인 사양

높은 모방 개미 디자인

? 누가 그것을 사용하고 있습니까?

• 용감한 사람들
• 내 자신
• Li Jinke의 별장

? 참조 휠

• 개미 디자인
• 구루
• 드래곤-우이

? 지역 개발

NPM I -G 원사를 먼저 설치하십시오

1. 설치 종속성

과학적으로 인터넷에 액세스 할 수없는 경우 taobao mirror 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을 기반으로 스토리 북이란 무엇입니까?

 yarn dev

3. http : // localhost : 8080을 방문하십시오

4. 구성 요소를 개발하십시오

참조 components/button

components 에서 새 구성 요소를 만듭니다 (구성 요소 이름은 파일 이름에 해당) 및 button 구성 요소 디렉토리 구조를 예로 들어

• 구성 요소
  • 버튼 // 구성 요소 폴더
    • __tests__ // 단위 테스트
      • __snapshots__ // ui snapshot
      • index.test.js // 테스트 파일
    • index.js // 구성 요소 로직 style.js // 주문에로드를 사용해야합니다.
    • styles.less // 구성 요소 스타일

그런 다음 stories 디렉토리에서 새 button.js 를 만듭니다

• 이야기
  • 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> 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" ; 

? 특허

MIT