介绍
基于 umi 搭建一个快速开发框架, react 应用框架. umi 以路由为基础的, 支持类 next.js 的约定式路由, 以及各种进阶的路由功能, 并以此进行功能扩展, 比如支持路由级的按需加载. 我们会在基于 umi 的基础上, 开发出一个框架通用功能和业务功能 框架功能列表
全局 layout
权限管理
封装列表增删改查
国际化
集成 g2 chart 图表
集成 socket.io
....(后续补充)
业务功能
用户管理
....(后续补充)
创建项目
umi 提供了脚手架供我们快速创建项目. 参考 umi 脚手架创建项目 https://umijs.org/zh/guide/create-umi-app.html 包管理器我们推荐用 https://yarn.bootCSS.com/ 来替换 npm,yarn 在包安装速度上确实提升不少
1. 在你的空目录下执行,
yarn create umi
我们需要选择 antd,code splitting, dll, hard source
2. 安装依赖
yarn
3. 启动本地开发
yarn start
构建全局 layout 和菜单
umi 规定 src/layouts 目录下存放我们全局 layout 组件, 在 https://github.com/jiechud/umi-react/blob/master/src/layouts/index.js 中加入代码如下
- class BaseLayout extends React.Component {
- state = {
- collapsed: false,
- };
- onCollapse = (collapsed) => {
- console.log(collapsed);
- this.setState({ collapsed });
- }
- render() {
- return (
- <Layout style={{ minHeight: '100vh' }}>
- <Sider
- collapsible
- collapsed={this.state.collapsed}
- onCollapse={this.onCollapse}
- >
- <div className={styles.logo} />
- <MenuComponent />
- </Sider>
- <Layout>
- <Header style={{ background: '#fff', padding: 0 }} />
- <Content style={{ margin: '0 16px' }}>
- <Breadcrumb style={{ margin: '16px 0' }}>
- <Breadcrumb.Item>User</Breadcrumb.Item>
- <Breadcrumb.Item>Bill</Breadcrumb.Item>
- </Breadcrumb>
- <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
- {this.props.children}
- </div>
- </Content>
- <Footer style={{ textAlign: 'center' }}>
- Ant Design ©2018 Created by Ant UED
- </Footer>
- </Layout>
- </Layout>
- );
- }
- }
- export default BaseLayout;
layout 组件需要 MenuComponent, 在构建组件之前我们需要先 mock 菜单数据, umi 支持 mock, 我们在 mock 文件下添加 https://github.com/jiechud/umi-react/blob/master/mock/auth.js
- const menu = [
- {
- id: 1,
- name: '概览',
- icon: 'dashboard',
- url: '/dashboard',
- },
- {
- id: 2,
- name: '系统管理',
- icon: 'setting',
- url: '/system',
- children: [
- {
- id: 21,
- name: '用户管理',
- icon: 'user',
- url: '/system/user',
- }
- ]
- },
- ];
menu 数据是树形结构, 在项目当中, 可以构造放到前台, 也可以让后台小伙伴们返回. 比较灵活, 我们基于数据去做渲染就行. 还有一个很重要的概念, umi 也集成了 dva, 我们的 src/models 路径下添加 https://github.com/jiechud/umi-react/blob/master/src/models/auth.js 的如下.
- import { getMenu } from '../services/auth';
- export default {
- namespace: 'auth',
- state: {
- menu: []
- },
- effects: {
- *getMenu(_, { put, select, call }) {
- const menu = yield call(getMenu);
- yield put({
- type: 'setMenu',
- payload: menu,
- });
- },
- },
- reducers: {
- setMenu(state, { payload }) {
- return {
- ...state,
- menu: payload,
- };
- },
- },
- };
基础工作已经完成. 就可以来构建 MenuComponent https://github.com/jiechud/umi-react/blob/master/src/models/auth.js 组件.
- @connect(({auth}) => {
- return {
- menu: auth.menu,
- }
- })
- class MenuComponent extends React.Component {
- componentDidMount() {
- // 获取 menu 数据
- this.props.dispatch({
- type: 'auth/getMenu',
- })
- }
- link = (url) => {
- router.push(url);
- }
- renderMenu = (data) => {
- return data && data.map(d => {
- if (d.children && d.children.length> 0) {
- return <SubMenu
- key={d.id}
- title={<span><Icon type={d.icon} /><span>{d.name}</span></span>}
- >
- {this.renderMenu(d.children)}
- </SubMenu>
- }
- return (
- <Menu.Item
- key={d.id}
- onClick={() => {this.link(d.url)}}
- >
- <Icon type={d.icon} />
- <span>{d.name}</span>
- </Menu.Item>
- )
- });
- }
- render() {
- const { menu } = this.props;
- return (
- <Menu theme='dark'
- defaultSelectedKeys={['1']}
- mode='inline'>
- {
- this.renderMenu(menu)
- }
- </Menu>
- );
- }
- }
- export default MenuComponent;
总的来说, menu 组件会访问会调用 saga effect, 发出异步请求获取数据, 然后通过 dva connect 获取 menu 数据做渲染.
我们刷新浏览器看到菜单已经正确渲染了.
结束语
这是开始的第一步, 也欢迎大家监督, 接下来会逐步把上面提到的功能完善起来. 代码已放到 github 上, 大家可以自行查看 https://github.com/jiechud/umi-react .
来源: https://www.cnblogs.com/qiaojie/p/9598886.html