cuke ui

Cuke-ui

Gurke UI: Eine Plug-and-Play-UI-Bibliothek

? Ursprung des Namens

Cuke (Gurke), ein gemeinsames Gemüse. Ich hoffe, dieses Projekt wird zu einer gemeinsamen Abhängigkeit (obwohl dies unmöglich ist). Unter ihnen erfüllt Gurke auch den Zweck dieser Komponentenbibliothek: Plug -and -Play, gefolgt von Cuke, Homophonisch (Cool KE). Die coole Farbe von Li Jinke verwendet Gurkengrün, frisch und süß. Die Komponenten werden Ameisendesign (plagiarisiert) und entwickelten diese Komponentenbibliothek mit dem Zweck des Lernens.

? Online -Demonstration

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

⚡ Installation

Verwenden von NPM

 npm i cuke-ui --save

Verwenden Sie Garn

 yarn add cuke-ui

Mit 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 > 

Wie man benutzt

1. Alle eingeführt

 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. auf Nachfrage einführen

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

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

Aktualisieren Sie das Protokoll

Changelog

? dankbar

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

? Entwurfspezifikationen

Hohe Nachahmung Ameise-Design

? Wer benutzt es

• Mutige Leute
• Ich selbst
• Li Jinkes Cottage

? Referenzrad

• Ameisenneigung
• Gulu
• Dragon-ui

? Lokale Entwicklung

Bitte installieren Sie zuerst NPM I -g -Garn

1. Installationsabhängigkeiten

Wenn Sie nicht auf Internetwissenschaft zugreifen können, können Sie Taobao Mirror Garn Config Set Registry https://registry.npm.taobao.org verwenden

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

2. Starten Sie den Entwicklungsserver

Basierend auf dem Storybook Was ist ein Storybook?

 yarn dev

3. Besuchen Sie http: // localhost: 8080

4. Komponenten entwickeln

components/button

Erstellen Sie eine neue Komponente in components (Komponentenname entspricht dem Dateinamen) und nehmen Sie button als Beispiel auf

• Komponenten
  • Taste // Komponentenordner
    • __tests__ // Unit -Test
      • __snapshots__ // UI Snapshot
      • index.test.js // Testdatei
    • index.js // Komponentenlogik - style.js // Das Laden der Bedarf erfordert Verwendung
    • styles.less // Komponentenstil

Erstellen Sie dann einen neuen button.js im stories

• Geschichten
  • button.js // Storybook Dokumentdatei

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

Fügen Sie schließlich die geschriebene Storybook -Datei zur Konfiguration hinzu

.Storybook> config.js

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

configure ( loadStories , module ) ;

Damit wird storybook die Komponenten hinzugefügt, die Sie auf der Seite geschrieben haben, und generieren automatisch das Beschreibungsdokument (eigentlich handelt es sich im Wesentlichen um ein Webpack-Dev-Server).

Exportieren Sie am Ende die Komponenten in components/index.js für eine einfache Veröffentlichung

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

? Lizenz

MIT