【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（一）

【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（一）

前言：最近在做公司的一个后台管理系统项目，前端是用React的Ant Design Pro 2.0 ，可以开箱即用，底层使用了dva和umi代替了redux和umi，使用起来更方便了。

第一次用Ant Design Pro，这里为进一步学习做一个梳理便于自己和大家翻阅(O(∩_∩)O~

---

一、项目准备

• 官网：https://pro.ant.design/docs/getting-started-cn
• 官方工作台：https://preview.pro.ant.design/dashboard/workplace
• 本地环境：需要安装 node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，
• 安装

  $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
  $ cd my-project　　

• 目录结构：已自动生成一个完整的框架

  ├── config                   # umi 配置，包含路由，构建等配置
  ├── mock                     # 本地模拟数据
  ├── public
  │   └── favicon.png          # Favicon
  ├── src
  │   ├── assets               # 本地静态资源
  │   ├── components           # 业务通用组件
  │   ├── e2e                  # 集成测试用例
  │   ├── layouts              # 通用布局
  │   ├── models               # 全局 dva model
  │   ├── pages                # 业务页面入口和常用模板
  │   ├── services             # 后台接口服务
  │   ├── utils                # 工具库
  │   ├── locales              # 国际化资源
  │   ├── global.less          # 全局样式
  │   └── global.js            # 全局 JS
  ├── tests                    # 测试工具
  ├── README.md
  └── package.json　　

• 本地开发：安装依赖

  $ npm install
  
  $ npm start　　

• 启动完成：会自动打开浏览器访问 http://localhost:8000

  

   

二、布局

• 抽离出的通用布局：放在 layouts 目录中

1. BasicLayout：基础页面布局，包含了头部导航，侧边栏和通知栏
2. UserLayout：抽离出用于登陆注册页面的通用布局
3. BlankLayout：空白的布局

• 布局与路由系统结合：Ant Design Pro 的路由使用了 Umi 的路由方案，将配置信息统一抽离到 config/router.config.js 下

1. 映射路由与页面布局之间的关系