cuke ui

Cuke-ui

แตงกวา UI: ปลั๊กแอนด์เพลย์ตอบสนอง ui ไลบรารี

- ต้นกำเนิดของชื่อ

Cuke (แตงกวา) ผักทั่วไป ฉันหวังว่าโครงการนี้จะกลายเป็นการพึ่งพาร่วมกัน (แม้ว่าจะเป็นไปไม่ได้) ในหมู่พวกเขาแตงกวายังตรงตามวัตถุประสงค์ของไลบรารีส่วนประกอบนี้: ปลั๊กและเล่นตามด้วย Cuke, homophonic (cool ke) ความหมายของชุดรูปแบบความหมายของ Cool Li Jinke ใช้แตงกวาสีเขียวสดและน่ารัก ส่วนประกอบยืม (ลอกเลียนแบบ) การออกแบบมดและพัฒนาไลบรารีส่วนประกอบนี้โดยมีวัตถุประสงค์ของการเรียนรู้

- การสาธิตออนไลน์

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

⚡ติดตั้ง

ใช้ NPM

 npm i cuke-ui --save

ใช้เส้นด้าย

 yarn add cuke-ui

ใช้ 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 > 

วิธีใช้

1. ทั้งหมดแนะนำ

 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. แนะนำตามความต้องการ

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

3. ใช้ 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' ] , 
  ]
}

อัพเดทบันทึก

การเปลี่ยนแปลง

- ปลื้มปีติ

• @yuhan Zhong
• @caraws
• @canvascao
• @licc

- ข้อกำหนดการออกแบบ

การออกแบบมดเลียนแบบสูง

- ใครใช้มัน

• คนที่กล้าหาญ
• ตัวฉันเอง
• กระท่อมของ Li Jinke

- ล้ออ้างอิง

• การออกแบบมด
• กูลู
• มังกร -ui

- การพัฒนาท้องถิ่น

กรุณาติดตั้ง npm i -g เส้นด้ายก่อน

1. การพึ่งพาการติดตั้ง

หากคุณไม่สามารถเข้าถึงอินเทอร์เน็ตทางวิทยาศาสตร์ได้คุณสามารถใช้ชุดการกำหนดค่าเส้นด้าย Taobao Mirror

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

2. เริ่มต้นเซิร์ฟเวอร์การพัฒนา

จากนิทานนิทานเรื่องราวคืออะไร?

 yarn dev

3. เยี่ยมชม http: // localhost: 8080

4. พัฒนาส่วนประกอบ

components/button อ้างอิง

สร้างส่วนประกอบใหม่ใน components (ชื่อส่วนประกอบสอดคล้องกับชื่อไฟล์) และใช้โครงสร้างไดเรกทอรีส่วนประกอบ button เป็นตัวอย่าง

• ส่วนประกอบ
  • ปุ่ม // โฟลเดอร์ส่วนประกอบ
    • __tests__ // การทดสอบหน่วย
      • __snapshots__ // UI Snapshot
      • index.test.js // ไฟล์ทดสอบ
    • index.js // ส่วนประกอบลอจิก - style.js // การโหลดตามความต้องการต้องการการใช้งาน
    • styles.less // สไตล์ส่วนประกอบ

จากนั้นสร้าง button.js ในไดเรกทอรี stories

• เรื่องราว
  • button.js // ไฟล์เอกสารของ 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
 ) ) )

ในที่สุดก็เพิ่มไฟล์หนังสือนิทานที่เป็นลายลักษณ์อักษรในการกำหนดค่า

.storybook> config.js

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

configure ( loadStories , module ) ;

สิ่งนี้ทำให้ storybook เสร็จสมบูรณ์จะเพิ่มส่วนประกอบที่คุณเขียนลงในหน้าและสร้างเอกสารคำอธิบายโดยอัตโนมัติ (จริง ๆ แล้วมันเป็นหลักของ Webpack dev-server)

ในตอนท้ายให้ส่งออกส่วนประกอบใน components/index.js เพื่อการเผยแพร่ได้ง่าย

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

- ใบอนุญาต

มิกซ์