ant-design-pro开发说明 --创建

ant-design-pro采用了dva框架实现,dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

ant-design-pro项目创建

创建ant-design-pro有以下两种方法：
直接从github上clone:
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
or npm 创建
npm install ant-design-pro-cli -g
mkdir pro-demo && cd pro-demo
pro init
创建之后的效果如下：

接下来我们分析一下项目的目录结构（文字附图）：
├── config # umi 配置，包含路由，构建等配置!
│ - router.config.js ## 配置定义每个页面的布局、全局菜单的配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
├── page01 ##同类型页面文件夹
├── models ##对应页面处理数据和逻辑的model
- page011.js
- page012.js
├── ss
- s.js
- page011.js ##页面
- page012.js
- page01.less
├── page02
├── models
-page021.js
- page021.js
- defaultSettings.js ##页面默认总体布局配置
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.js # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json

创建页面

先设置router – 打开config文件中的router.config.js
在app下，与dashbord同级的目录中创建新的routes，例：

//mydemo
      {
        path: '/mydemo',
        name: 'mydemo',
        icon: 'dashboard',
        routes: [
          {
            path: '/mydemo/index',
            name: 'index',
            component: './Mydemo/index',
          },
      }

创建时注意name与src/locales/me/zh-CN/menu.js的name相对应:

'menu.mydemo': '我的demo',
'menu.mydemo.index': '我的index',

创建完成后就可以在page中创建新的页面了

页面创建完成：

如有疑惑，请指正，谢谢！