Java知识点整理 12 — 前端 Ant Design Pro 初始化模板使用

一. 项目初始化

Ant Design Pro 是基于 Ant Design 和 umi 封装的一整套企业级中后台前端设计框架，致力于在设计规范和基本组件的基础上，继续向上构建，提炼出典型模板或配套设计资源，进一步提升企业级中后台产品设计研发过程中的用户体验。

Ant Design Pro 力求于开箱即用，提供了完整的脚手架，包括国际化、权限、mock、网络请求等各方面，大幅提升开发效率，减少学习成本。下图为整体架构：

官方地址：开始使用 - Ant Design Pro

初始化命令：

npm i @ant-design/pro-cli -g
pro create myapp

在项目源目录中使用 cmd 或 Powershell 打开终端。

版本选择：

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
  complete

simple 版本提供了框架运行的基本内容，complete 版本包含所有区块，不适合当作基础模板进行二次开发。

此处选择 simple 版本，后续可进行二次开发。下载完成后在源目录中能看到模板代码文件夹。

安装依赖包：

1. yarn / yarn install
2. npm install

打开项目后在终端使用 yarn 或 npm 包管理器均可。二者的区别可参考该文章。

下载完成后，可以看到生成的依赖包。

启动项目：

初始化模板中提供了 mock 模拟数据供开发者测试，选择 start 方式启动，包管理器此处选择了npm，可根据自己下载的依赖包调整。

 启动后，访问 http://localhost:8000，即可打开前端初始化项目。

由于选择了 start 启动方式，因此可以使用模板自带的 mock 模拟数据测试。

用户名: admin
密码: ant.design

开发规范设置：

勾选 Prettier 格式化工具，用于统一代码格式。