前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

Ant Design Pro总结篇

首页
2018-09-17 00:10:23
Front-End
DvaUmi

# 一、简介

# 1.1 ant pro系统特性

  • 基于 Ant Design 体系精心设计
  • 使用 React/umi/dva/antd 等前端前沿技术开发
  • 针对不同屏幕大小设计
  • 可配置的主题满足多样化的品牌诉求
  • Mock 数据实用的本地数据调试方案

# 1.2 模板

- Dashboard
  - 分析页
  - 监控页
  - 工作台
- 表单页
  - 基础表单页
  - 分步表单页
  - 高级表单页
- 列表页
  - 查询表格
  - 标准列表
  - 卡片列表
  - 搜索列表(项目/应用/文章)
- 详情页
  - 基础详情页
  - 高级详情页
- 结果
  - 成功页
  - 失败页
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
- 个人页
  - 个人中心
  - 个人设置
- 帐户
  - 登录
  - 注册
  - 注册成功
@前端进阶之旅: 代码已经复制到剪贴板

# 1.3 使用

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project
@前端进阶之旅: 代码已经复制到剪贴板

或者

$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new  # 安装脚手架
@前端进阶之旅: 代码已经复制到剪贴板

# 1.4 目录结构

整个项目的目录结构

├── mock                     # 本地模拟数据
├── node_modules             # 依赖库
├── public
│   ├── favicon.ico          # Favicon
│   └── index.html           # HTML 入口模板
├── src
│   ├── common               # 应用公用配置,如导航信息
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # dva model
│   ├── routes               # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── g2.js                # 可视化图形配置
│   ├── polyfill.js          # 兼容性垫片
│   ├── theme.js             # 主题配置
│   ├── index.js             # 应用入口
│   ├── index.less           # 全局样式
│   └── router.js            # 路由入口
├── tests                    # 测试工具
├── .editorconfig            # 编辑器配置
├── .eslintrc                # js代码检测工具
├── .ga                      # 未知
├── .gitignore               # git版本配置
├── .roadhogrc               # roadhog配置
├── .roadhogrc.mock.js       # roadhog的模拟配置
├── .stylelintrc             # css代码审查配置
├── .travis.yml              # travis持续构建工具配置
├── package.json             # web前端项目配置文件
├── README.md
└──
@前端进阶之旅: 代码已经复制到剪贴板

# roadhog摘要介绍

  • roadhog 是一个 cli 工具,提供 server、 build 和 test 三个命令,分别用于本地调试和构建,并且提供了特别易用的 mock 功能
fe
  • 一、简介
    • 1.1 ant pro系统特性
    • 1.2 模板
    • 1.3 使用
    • 1.4 目录结构
    • roadhog摘要介绍
  • 二、布局
    • 2.1 Ant Design Pro 的布局
    • 2.2 如何使用 Ant Design Pro 布局
    • 2.3 Pro 扩展配置
    • 2.4 Ant Design 布局组件
  • 四、路由和菜单
    • 4.1 基本结构
      • 4.1.1 路由
      • 4.1.2 菜单
      • 4.1.3 面包屑
    • 4.2 需求实例
      • 4.2.1 新增页面
      • 4.2.2 新增布局
      • 4.2.3 带参数的路由
  • 五、新增页面
    • 5.1 新增 js、less
    • 5.2 将文件加入菜单和路由
    • 5.3 新增 model、service
  • 六、新增业务组件
  • 七、样式
  • 八、和服务端进行交互
  • 九、引入外部模块
  • 十、图表
  • 十一、业务图标
  • 十二、Mock 和联调
  • 十三、主题定制
  • 十四、权限管理
    • 权限组件 Authorized
    • 控制页面元素显示
    • demo关于权限简介
  • 十五、构建和发布
  • 十六、一些问题
    • 在ant-design-pro中解决跨域办法
    • 在model中怎么同时发起多次请求

← 学会使用Graphviz绘制流程图使用umi改进dva项目开发 →