little-deer-ui
使用
npm install little-deer-ui
or
yarn add little-deer-ui
按需加载组件配置
在 create-react-app 中使用
yarn add react-app-rewired customize-cra
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
然后在项目根目录创建一个 config-overrides.js 用于修改默认配置
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
使用 babel-plugin-import
yarn add babel-plugin-import
+ const { override, fixBabelImports } = require('customize-cra');
- module.exports = function override(config, env) {
- // do stuff with the webpack config...
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'little-deer-ui',
+ libraryDirectory: 'dist/lib',
+ camel2DashComponentName: false
+ },'little-deer-ui'),
+ );
引入Layout使用
安装history
npm add history@4.10.0
or
yarn add history@4.10.0
import {Layout} from 'little-deer-ui'
import {createHashHistory} from 'history'
const routeItems = [
{
path: '/home',
exact: true,
meta: {
tabFixed: true,
isCache: true,
icon: () => <Icon type='iconuser' />,
name: '首页',
},
component: () => <div>home</div>,
},
{
path: '/test',
exact: true,
meta: {
isCache: true,
icon: 'iconuser',
name: '测试页',
},
component: () => <div>test</div>,
},
]
const App = () => (
<Layout
proName={'admin'}
routeItems={routeItems}
history={createHashHistory()}
username={'测试'}
onClickDrop={() => {console.log('23')}}
>
{renderRoutes()}
</Layout>
)
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#root {
height: 100%;
}

