cuke ui

cuke-ui

واجهة مستخدم Cucumber: مكتبة رد فعل التوصيل والتشغيل

؟ أصل الاسم

Cuke (الخيار) ، الخضار المشتركة. آمل أن يصبح هذا المشروع تبعية شائعة (على الرغم من أن هذا مستحيل). من بينها ، يلتقي Cucumber أيضًا بغرض مكتبة المكون هذه: التوصيل والتشغيل ، يليه Cuke ، Homophonic (Cool KE). يستخدم لون موضوع Li Jinke Cool Cucumber الأخضر ، الطازج ولطيف. يقترض المكون تصميم النمل ، وقام بتطوير مكتبة المكون هذه بغرض التعلم.

؟ مظاهرة عبر الإنترنت

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

تحديث سجل

Changelog

؟ شاكر

• Yuhan Zhong
• caraws
• canvascao
• recc

؟ مواصفات التصميم

تصميم النمل العالي

؟ من يستخدمه

• الناس الشجعان
• نفسي
• لو كوخ لي جينك

؟ عجلة مرجعية

• تصميم النمل
• جولو
• دراجون أوي

؟ التنمية المحلية

الرجاء تثبيت NPM I -g Yarn أولاً

1. التبعيات التثبيت

إذا لم تتمكن من الوصول إلى الإنترنت بشكل علمي ، فيمكنك استخدام سجل تكوين خيوط Taobao Mirror Https://registry.npm.toobao.org

 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__ // واجهة المستخدم لقطات
      • index.test.js // ملف اختبار
    • index.js // Component Logic - 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 سيضيف المكونات التي كتبتها إلى الصفحة وإنشاء مستند الوصف تلقائيًا (في الواقع ، إنه في الأساس حزمة ويب dev-server)

في النهاية ، قم بتصدير المكونات في components/index.js لسهولة النشر

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

؟ رخصة

معهد ماساتشوستس للتكنولوجيا