cuke ui

cuke-ui

Cucumber UI: Perpustakaan UI Plug-and-Play React

? Asal nama

cuke (mentimun), sayuran umum. Saya berharap proyek ini akan menjadi ketergantungan umum (meskipun ini tidak mungkin). Di antara mereka, mentimun juga memenuhi tujuan perpustakaan komponen ini: plug and play, diikuti oleh cuke, homofonik (keren ke). Warna tema makna Li Jinke yang keren menggunakan mentimun hijau, segar dan imut. Komponen meminjam (menjiplak) desain semut, dan mengembangkan pustaka komponen ini dengan tujuan pembelajaran.

? Demonstrasi online

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

⚡ Instal

Menggunakan NPM

 npm i cuke-ui --save

Gunakan benang

 yarn add cuke-ui

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

Cara menggunakan

1. Semua diperkenalkan

 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. Perkenalkan permintaan

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

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

Perbarui log

Changelog

? bersyukur

• @Yuhan Zhong
• @Caraws
• @Canvascao
• @licc

? Spesifikasi desain

Imitasi tinggi-desain

? Siapa yang menggunakannya

• Orang pemberani
• Saya sendiri
• Pondok Li Jinke

? Roda referensi

• Ant-Design
• Gulu
• Naga-Ui

? Pengembangan Lokal

Harap instal NPM I -G benang terlebih dahulu

1. Ketergantungan Instalasi

Jika Anda tidak dapat mengakses internet secara ilmiah, Anda dapat menggunakan 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. Mulai server pengembangan

Berdasarkan buku cerita, apa itu buku cerita?

 yarn dev

3. Kunjungi http: // localhost: 8080

4. Kembangkan komponen

components/button referensi

Buat komponen baru dalam components (nama komponen sesuai dengan nama file) dan ambil struktur direktori komponen button sebagai contoh

• Komponen
  • Tombol // Folder Komponen
    • __tests__ // Uji unit
      • __snapshots__ // snapshot ui
      • index.test.js // file uji
    • index.js // Logika Komponen - style.js // Memuat sesuai permintaan membutuhkan penggunaan
    • styles.less // Gaya Komponen

Kemudian buat button.js baru.js di direktori stories

• cerita
  • button.js // File dokumen buku cerita

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

Akhirnya tambahkan file buku cerita tertulis ke konfigurasi

.storybook> config.js

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

configure ( loadStories , module ) ;

Ini melengkapi storybook akan menambahkan komponen yang Anda tulis ke halaman dan secara otomatis menghasilkan dokumen deskripsi (sebenarnya, ini pada dasarnya adalah webpack dev-server)

Pada akhirnya, ekspor komponen dalam components/index.js untuk diterbitkan dengan mudah

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

? Lisensi

Mit