ola-ui

基于 Xeact 与 Ant Design 的组件库。

Install

```bash yarn add ola-ui ```

DEV

```bash yarn build ## 打包
yarn dev ## 打包 (watch 模式) ```

Quick Start

import style
```javascript import 'ola-ui/dist/ola.less'; ```
use component
```javascript import { Button } from 'ola-ui';
...
Button

... ```
use components as xeact

<script src="//mytask.jd.com/api/download?fileName=env_1522133871096.js"></script>

import 'ola-ui/lib/x';

<div>
  <x-button type="primary" loading>Primary Button</x-button>
</div>

webpack rule for ola-ui style
```javascript {

test: /ola\.less$/,
use: [ 'style-loader',
  {
    loader: "css-loader",
    options: {
      minimize: true,
      sourceMap: true,
      importLoaders: 1,
      modules: false,
      localIdentName: '[local]--[hash:base64:5]'
    }
  }, {
    loader: "less-loader",
    options: {
      sourceMap: true,
      modifyVars: theme,
      javascriptEnabled: true,
      paths: [ path.resolve(__dirname, "node_modules") ]
    }
  }
]

} ```
webpack rule for app style
```javascript {

test: /\.less$/,
exclude: [
  /ola\.less$/,
],
use: ['style-loader',
  {
    loader: "css-loader",
    options: {
      minimize: true,
      sourceMap: true,
      importLoaders: 1,
      modules: true,
      localIdentName: '[local]--[hash:base64:5]'
    }
  }, {
    loader: "less-loader",
    options: {
      sourceMap: true,
      modifyVars: theme,
      javascriptEnabled: true,
    }
  }
]

} ```
工程类依赖添加按需加载 babel 插件

yarn add --dev babel-plugin-transform-imports

[
  "transform-imports",
  {
    "ola-ui": {
      "transform": "ola-ui/lib/components/${member}"
    }
  }
]

Structure

components

index.js --- 组件实现 x.js --- 组件的 xeact 封装 x-foo-bar.js --- 关联内部组件的 xeact 封装 style.less --- 内部样式(css modules)

styles

fonts/ icon font global/ 全局公共样式