为了Spring Batch Admin这个开源项目，鹏哥现在也开始学习前端知识了，对于7年专注Java 开发来说，前端我一直处在幼儿园水平，所以一直想找个简单易学的框架，来满足一下我成为全栈的欲望，找来找去，发现了三款神器。

Ant Design Pro

依托于Ant Design 强大的功能，Ant Design 团队推出来Ant Design Pro - 一个企业级中后台前端/设计解决方案。

Ant Design Pro 秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践。

基于上述目标和提供了以下的典型模板，并据此构建了一套基于 React 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型。

- Dashboard
 - 分析页
 - 监控页
 - 工作台
- 表单页
 - 基础表单页
 - 分步表单页
 - 高级表单页
- 列表页
 - 查询表格
 - 标准列表
 - 卡片列表
 - 搜索列表（项目/应用/文章）
- 详情页
 - 基础详情页
 - 高级详情页
- 结果
 - 成功页
 - 失败页
- 异常
 - 403 无权限
 - 404 找不到
 - 500 服务器出错
- 个人页
 - 个人中心
 - 个人设置
- 图形编辑器
 - 流程图编辑器
 - 脑图编辑器
 - 拓扑编辑器
- 帐户
 - 登录
 - 注册
 - 注册成功

前序准备

你的本地环境需要安装 yarn、node 和 git。技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd。

安装

新建一个空的文件夹作为项目目录，并在目录下执行：

yarn create umi

本地启动

yarn install
yarn start

效果图

?

Umi UI

你不是感觉以上的步骤还是有点多？能不能精简一下呢？(原谅我一个前端小白无理的要求)。

好吧，看在共和国70周年生日的份上满足一下你的愿望。

在命令行输入：

umi ui

?

一个神奇的页面打开了，这个什么鬼？竟然还可以创建项目？，创建一个试试！

?

选择目录，输入应用名。

?

选择模板，使用语言，包管理点击确定。

?

下边的就会按照构建前端项目的步骤一步一步的构建一个前端项目。

?

项目创建成功之后会跳转到项目的首页。

?

我们来随便点点，先点击配置看看。我嘞个去，里面竟然罗列了这个项目的所有配置，很多参数我都不知道啥意思，在这里竟然可以清晰明了的解释，而且竟然还有可选项选择。

?

迫不及待的，我又点开了任务。哎呀，我的M呀，连命令行都给剩了。

?

好吧装B完毕，我们回过头来看看这个项目。这是一个Ant Design 团队提供的一个本地前端项目研发工作台，在不需要任何命令的情况下，通过页面配置，搭建一个前端的脚手架。你不是突然感觉这个很牛呢？更牛的还在后续版本，官方文档提供了下边的计划图，老铁们先来感受一下。

?

Ant Design Landing

Umi ui 还是需要我操作一些步骤，能不能步骤在少点呢？(要求有点过分了哈)

好吧，再满足你一次。Ant Design Landing 一个通过拖拽的形式定制专属于你的前端首页。

感受一下这个页面，是不是有点像在做PPT，你会发现，开发页面比做PPT更简单。

?

好了以上三款神器，就介绍到这里吧，鹏哥也在探索其中的乐趣，等鹏哥有什么新的发现，再来分享给大家。