cuke ui

Cuke-Ui

UI de pepino: uma biblioteca de interface do usuário de plug-and-play

? Origem do nome

Cuke (pepino), um vegetal comum. Espero que este projeto se torne uma dependência comum (embora isso seja impossível). Entre eles, o pepino também encontra o objetivo desta biblioteca de componentes: plug and play, seguido por Cuke, homofônico (Cool KE). A cor do tema de significado de Li Jinke legal usa o pepino verde, fresco e fofo. O componente toma empréstimo (plagia) o design de formigas e desenvolveu esta biblioteca de componentes com o objetivo de aprender.

? Demonstração online

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

⚡ Instale

Usando NPM

 npm i cuke-ui --save

Use o fio

 yarn add cuke-ui

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

Como usar

1. Todos introduzidos

 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. Introduzir sob demanda

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

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

Atualizar log

Changelog

? grato

• @Yuhan zhong
• @Caraws
• @CanVascao
• @licc

? Especificações de projeto

Desenho de formigas de alta imitação

? Quem está usando

• Pessoas corajosas
• Eu mesmo
• Casa de Li Jinke

? Roda de referência

• design de formigas
• Gulu
• Dragão-Ui

? Desenvolvimento local

Por favor, instale o fio npm i -g primeiro

1. Dependências de instalação

Se você não pode acessar a Internet cientificamente, pode usar o 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. Inicie o servidor de desenvolvimento

Baseado no livro de histórias O que é um livro de histórias?

 yarn dev

3. Visite http: // localhost: 8080

4. Desenvolver componentes

components/button

Crie um novo componente em components (o nome do componente corresponde ao nome do arquivo) e pegue button como exemplo

• Componentes
  • Botão // Pasta do componente
    • __tests__ // Teste de unidade
      • __snapshots__ // UI Snapshot
      • index.test.js // Arquivo de teste
    • index.js // componente lógica - style.js // carregar sob demanda requer uso
    • styles.less // estilo de componente

Em seguida, crie um novo button.js no diretório stories

• histórias
  • button.js // Arquivo de documento do livro de histórias

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

Finalmente adicione o arquivo de livro de histórias escrito à configuração

.StoryBook> config.js

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

configure ( loadStories , module ) ;

Isso completa storybook adicionará os componentes que você escreveu à página e gerará automaticamente o documento de descrição (na verdade, é essencialmente um Webpack Dev-Server)

No final, exporte os componentes em components/index.js para facilitar a publicação

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

? Licença

Mit