cuke ui

Cuke-ui

キュウリUI：プラグアンドプレイReact UIライブラリ

？名前の起源

cuke（キュウリ）、一般的な野菜。このプロジェクトが一般的な依存関係になることを願っています（これは不可能ですが）。その中でも、キュウリはこのコンポーネントライブラリの目的を満たしています：プラグアンドプレイ、続いてCuke、Homophonic（Cool Ke）が続きます。クールなLi Jinkeの意味のテーマの色は、キュウリの緑、新鮮でかわいいものを使用しています。コンポーネントはANTデザインを借用（盗用）し、学習を目的としてこのコンポーネントライブラリを開発しました。

？オンラインデモンストレーション

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

installインストール

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
• @licc

？設計仕様

高い模倣アリデザイン

？誰がそれを使用しているのか

• 勇敢な人々
• 自分自身
• リー・ジンケのコテージ

？参照ホイール

• アリデザイン
• グル
• Dragon-ui

？ローカル開発

最初にnpm i -g yarnをインストールしてください

1. インストール依存関係

科学的にインターネットにアクセスできない場合は、Taobao Mirror Yarn config Setレジストリhttps://registry.npm.taobao.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__ // ui snapshot
      • index.test.js //テストファイル
    • index.js //コンポーネントロジックstyle.js //オンデマンドのロードには使用が必要です
    • styles.less //コンポーネントスタイル

次に、 stories Directoryに新しいbutton.jsを作成します

• 物語
  • 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" ; 

？ライセンス

mit