di-ui-demo v0.0.1

:zap: 安装

使用 npm

snpm i @sto/di-ui --save

使用 yarn

yarn add @sto/di-ui

使用 cdn

<link rel="stylesheet" href="https://unpkg.com/di-ui@latest/dist/di-ui.min.css">
<script type="text/javascript" src="https://unpkg.com/di-ui@latest/dist/di-ui.min.js"></script>

:book: 如何使用

1. 全部引入

import React from "react"
import { Button } from "di-ui"
import "@sto/di-ui/dist/@sto/di-ui.min.css"

class Page extends React.Component {
  render(){
    return (
      <Button type="primary"></Button>
    )
 }
}

2 .按需引入

import Button from '@sto/di-ui/lib/button';
import '@sto/di-ui/lib/button/style';

3. 使用 babel-plugin-import

// .babelrc.js
module.exports = {
  plugins: [
    ["babel-plugin-import", {
      "libraryName": "di-ui",
      "libraryDirectory": "es",
      "style": true
    },'di-ui'], 
  ]
}

// 多个组件库
module.exports = {
  plugins: [
    ["babel-plugin-import", {
      "libraryName": "di-ui",
      "libraryDirectory": "es",
      "style": true
    },'di-ui'], 
    ["babel-plugin-import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    },'antd'], 
  ]
}

:wrench: 本地开发

请首先安装 npm i -g yarn

1. 安装依赖

   yarn config set registry http://snpm-registry.sto.cn

git clone http://gitlab.sto.cn/ux/di-ui.git
cd di-ui
yarn

3. 访问 http://localhost:8080

4. 开发组件

参考 components/button

在 components 新建一个组件(组件名与文件名对应) 以 button 组件目录结构为例

• components - button //组件文件夹 - __tests__ //单元测试 - __snapshots__ // ui 快照 - index.test.js //测试文件 - index.js //组件逻辑 - style.js // 按需加载需要用到 - styles.less //组件样式

然后 在 stories 目录下 新建一个 button.js

• stories - button.js // storybook 的文档文件