后端工程师入门Ant Design Pro

本文适用于后端程序员入门ant design pro，基于官方文档，不探讨底层，仅为实用，效果预览：https://preview.pro.ant.design/dashboard/analysis

• 开发环境准备
• 安装
• 目录
• 开始开发

---

开发环境准备

ant design pro的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。不了解也ok，但你必须需要安装 node 和 git

安装

有两种方式进行安装，我使用的命令行工具：

$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new  # 安装脚手架

目录

使用mac的tree命令：tree -L 2，查看二级目录树如下（不包括node_modules模块）:

├── 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 #初次允许及引入新的模块时需要，用于安装依赖，类似后端java的maven包管理工具
$ npm start

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了