ola-ui
v1.4.10
Published
基于 Xeact 与 Ant Design 的组件库。
Downloads
49
Readme
ola-ui
基于 Xeact 与 Ant Design 的组件库。
Install
yarn add ola-ui
DEV
yarn build ## 打包
yarn dev ## 打包 (watch 模式)
Quick Start
import style
import 'ola-ui/dist/ola.less';
use component
import { Button } from 'ola-ui';
...
<Button>Button</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
{
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
{
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/ 全局公共样式