di-ui

DI-UI : 专门用于开发移动端驾驶舱的报表业务组件库.

安装

使用 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>

如何使用

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';

1. 使用 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'], 
  ]
}

本地开发

请首先安装 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

1. 访问 http://localhost:8080

2. 开发组件

参考 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 的文档文件