cuke ui

cuke-ui

UI de pepino: una biblioteca de UI reaccionada de plug-and-play

? Origen del nombre

Cuke (pepino), un vegetal común. Espero que este proyecto se convierta en una dependencia común (aunque esto es imposible). Entre ellos, el pepino también cumple con el propósito de esta biblioteca de componentes: plug and play, seguido de cuke, homofónico (cool ke). El color del tema del significado de Li Jinke de Cool Li Jinke usa verde pepino, fresco y lindo. El componente toma (plagia) del diseño de hormigas y desarrolló esta biblioteca de componentes con el propósito del aprendizaje.

? Demostración en línea

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

⚡ Instalar

Usando NPM

 npm i cuke-ui --save

Usar hilo

 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 > 

Cómo usar

1. Todo introducido

 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. Introducir a pedido

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

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

Registro de actualizaciones

Colegio de cambios

? agradecido

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

? Especificaciones de diseño

Diseño de hormigas de alta imitación

? Quien lo está usando

• Gente valiente
• Mí mismo
• Li Jinke's Cottage

? Rueda de referencia

• diseño de hormigas
• gulú
• dragón-ui

? Desarrollo local

Instale el hilo NPM I -G primero

1. Dependencias de instalación

Si no puede acceder a Internet científicamente, puede usar el Registro de configuración de Configuración del hilo Mirror Taobao https://registry.npm.taobao.org

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

2. Iniciar el servidor de desarrollo

Basado en el libro de cuentos ¿Qué es un libro de cuentos?

 yarn dev

3. Visite http: // localhost: 8080

4. Desarrollar componentes

components/button

Cree un nuevo componente en components (el nombre del componente corresponde al nombre del archivo) y tome button como ejemplo

• Componentes
  • Botón // Carpeta de componentes
    • __tests__ // prueba unitaria
      • __snapshots__ // instantánea de ui
      • index.test.js // archivo de prueba
    • index.js // Logic de componentes - style.js // Cargar a pedido requiere usar
    • styles.less // estilo componente

Luego cree un nuevo button.js en stories

• historias
  • button.js // Archivo de documento 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
 ) ) )

Finalmente, agregue el archivo de libro de cuentos escrito a la configuración

.storybook> config.js

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

configure ( loadStories , module ) ;

Esto completa storybook agregará los componentes que escribió a la página y generará automáticamente el documento de descripción (en realidad, es esencialmente un servidor de desarrollo web)

Al final, exporte los componentes en components/index.js para una fácil publicación

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

? Licencia

MIT