# 一、简介
# 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 功能