cuke ui

cuke-ui

Cucumber UI: une bibliothèque d'interface utilisateur de réaction plug-and-play

? Origine du nom

Cuke (concombre), un légume commun. J'espère que ce projet deviendra une dépendance commune (bien que cela soit impossible). Parmi eux, Cucumber répond également à l'objectif de cette bibliothèque de composants: Plug and Play, suivi de Cuke, homophonique (Cool KE). La couleur du thème de la signification de Li Jinke utilise le concombre vert, frais et mignon. Le composant emprunte la conception de la fourmi (plagiarise) et a développé cette bibliothèque de composants dans le but de l'apprentissage.

? Démonstration en ligne

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

⚡ Installer

Utilisation de NPM

 npm i cuke-ui --save

Utiliser le fil

 yarn add cuke-ui

Utilisation de 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 > 

Comment utiliser

1. Tous introduits

 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. Présenter à la demande

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

3. Utilisation de 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' ] , 
  ]
}

Mettre à jour le journal

Changelog

? reconnaissant

• @Yuhan zhong
• @Caraws
• @Canvascao
• @licc

? Spécifications de conception

Fourmi imitation élevée

? Qui l'utilise

• Braves
• Moi-même
• Cottage de Li Jinke

? Roue de référence

• fourmi conception
• Gulu
• dragon-ui

? Développement local

Veuillez d'abord installer le NPM I -G

1. Dépendances d'installation

Si vous ne pouvez pas accéder à Internet scientifiquement, vous pouvez utiliser le registre du jeu de configuration de fil de fil à miroir Taobao https://registry.npm.taobao.org

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

2. Démarrer le serveur de développement

Basé sur le livre de contes Qu'est-ce qu'un livre de contes?

 yarn dev

3. Visitez http: // localhost: 8080

4. Développer des composants

components/button

Créez un nouveau composant dans components (le nom du composant correspond au nom du fichier) et prenez button comme exemple

• Composants
  • Bouton // dossier composant
    • __tests__ // Test unitaire
      • __snapshots__ //
      • index.test.js // Fichier de test
    • index.js // Logic de composant - style.js // Chargement à la demande nécessite une utilisation
    • styles.less // Style de composant

Créez ensuite un nouveau button.js dans stories

• histoires
  • button.js // Fichier de documents de 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
 ) ) )

Enfin, ajoutez le fichier de livre de contes écrit à la configuration

.storybook> config.js

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

configure ( loadStories , module ) ;

Cela complète storybook ajoutera les composants que vous avez écrits à la page et générera automatiquement le document de description (en fait, c'est essentiellement un serveur de développement WebPack)

À la fin, exportez les composants dans components/index.js pour une publication facile

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

? Licence

Mit