UI组件库 - for React

在线预览地址

组件库基于storybook搭建，仅供学习交流使用

安装依赖

$ yarn

本地启动

$ npm run dev

页面打包编译

$ npm run build

发布版本

$ npm run release

生成CHANGELOG

$ npm install -g conventional-changelog-cli

$ npm run changelog

单元测试

$ npm run test

# 生成单元测试覆盖率
$ npm run coverage

使用说明

在使用之前，请确保正确安装和配置了 Node v6 或以上

安装

暂未发布NPM包，请忽略安装

$ npm install aut-ui-react --save-dev

使用

依赖React和ReactDOM两个包

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'aut-ui-react';
import 'aut-ui-react/lib/main.css';

ReactDOM.render(
    <Button type="primary">Primary</Button>, 
    document.getElementById('app')
);

按需加载

借助插件 babel-plugin-import 可以实现按需加载组件，减少文件体积。

npm install babel-plugin-import --save-dev

配置.babelrc文件

"plugins": [
    [
        "import",
        {
            "libraryName": "aut-ui-react",
            "libraryDirectory": "es",
            "style": true
        }
    ]
]

按需引入组件：

import React from 'react';
import { Button } from 'aut-ui-react';

export default class App extends React.Component {
  render() {
    return <Button type='primary'>APP</Button>
  }
}

npm目录介绍

npm 安装的组件有两个目录，'es/'，'lib/'，默认的引入路径是 'lib/'。

es - 目录下是 es5 版本未压缩代码，用于按需加载，引用需要配置 webpack 的 babel-loader 和 less-loader。

lib - 目录下js文件为 es5 压缩代码，样式文件为 css 格式，不需要配置 webpack。