# antPro

**Repository Path**: lomospace/antPro

## Basic Information

- **Project Name**: antPro
- **Description**: react study by using ant pro (https://pro.ant.design/)
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-08-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Ant Design Pro Notes (React)

> https://pro.ant.design/

目录解析:

https://pro.ant.design/docs/getting-started-cn


### dva

```bash
# 安装
npm install dva-cli -g
dva -v
dva-cli version 0.9.2

```

利用`dva`快速创建应用: `dva new dva-demo`

`cd dva-demo`

`npm start`


dva 文档：
> https://dvajs.com/

dva:
> dva 是一个基于 react 和 redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载等，已在生产环境广泛应用。


### 添加自定义菜单/路由

`Ant Degisn Pro`模板中，路由统一在`src/common/router.js` 文件管理，所有的路由配置、组件创建均需要开发者手动创建(怀念ng-cli/vue-cli命令行工具😂 :)(: )

#### 添加简单菜单

在 左侧菜单`dashboard`下添加一个子菜单 `静态测试页`

步骤:

1. 修改`src/common/menu.js`文件，在`dashboard`的`children`下添加如下代码
```js
 {
      name: '静态测试页',
      path: 'test',
  },
```

2. 修改`src/common/router.js`文件，`routerConfig`对象: 

```js
'/dashboard/test': {
      component: dynamicWrapper(app, [], () => import ('../routes/TestPage')),
    }
```

3. 创建路由对应的页面，在`src/routes/`文件夹下创建 `TestPage.js`

```js
import React, { PureComponent } from 'react';

export default class Workplace extends PureComponent {

    render() {
        return (
          <div>
            <h1> Hello ! 这是一个静态测试页面 </h1>
            <h3>略略略</h3>
            <span>用来测试antd pro左侧Menu如何自定义配置~ </span>
          </div>
        );
        }
    }

```

保存后，不用重新 `npm start`, 之前启动的进程会自动重新build 并启动刷新浏览器(使用的是HMR)。


#### 添加一个复杂的组件化的菜单

参考: https://www.missshi.cn/api/view/blog/5ab755dd22890966e2000003



### 其他参考

十二步 完成用户CRUD 应用: 
https://github.com/dvajs/dva/tree/master/examples/user-dashboard
https://github.com/sorrycc/blog/issues/18


https://blog.csdn.net/konglongaa/article/details/79131283