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%;
}