Eye-design NPM

点睛平台前端React组件库

本项目依赖 storybook 创建单一或者多个状态的组件 storybook 学习

开发说明

安装依赖

yarn install
yarn add react@16.14.0 react-dom@16.14.0

发布至npm

先安装`npm`和编译打包工具 `babel` `webpack`

运行下面的命令进行打包

npm run build

修改`package.json`的`version` 增加一个版本

发布至 `npm`

npm publish

在主库重新安装并使用

npm i --save eye-design

使用说明

import React, { Component } from 'react';
import {RadioGroup, Radio}  from './components/ui/RadioGroup';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      valueSelected: 'apple'
    }
  }
  render() {
    return (
      <div className="App">
        <h1>点睛前端RadioGroup组件</h1>
          <h3>RadioGroup 和 Radio 组件</h3>
          <div className="demo-in">
            <RadioGroup name="fruit" valueSelected={this.state.valueSelected} onChange={(val) => this.handleChange(val)}>
              <Radio value="apple" text="Apple"/>
              <Radio value="orange" text="Orange"/>
              <Radio value="watermelon" text="Watermelon"/>
            </RadioGroup>
          </div>
      </div>
    )
  }
  handleChange(val) {
    this.setState({valueSelected: val})
  }
}
export default App;

目录结构

eye-design
├── README.md          # 项目说明文件
├── .storybook         # 项目`storybook`相关配置、`webpack` 配置文件
├── node_modules       # 模块依赖，在 `.gitignore` 文件中加入了忽略，请使用 `npm install` 或者 `yarn`
├── package.json       # 项目配置信息和依赖json文件
├── package-lock.json  # 模块依赖快照文件
├── yarn.lock          # 速度快，可靠，安全的依赖管理的
├── .gitignore         # `git` 忽略特殊文件
├── public             # 公共文件夹
├── test               # 单元测试
├── stories             # `storybook`的`demo`组件展示代码
└── src                # 项目文件
    └── compoments       # 项目公共组件
    └── widgets          # 项目公共组件
    └── web              # 项目组和 组件`example`
      └── about            # 开发团队介绍
    └── utils            # 项目可复用功能
    └── assets           # 项目资产文件
      └── css              # 项目公共样式文件
    └── other            # 其他杂项
    └── index.js         # 项目入口

eye-fe ui components