本文适用于后端程序员入门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,你看到下面的页面就代表成功了