Ant Design Pro入门介绍

官方文档地址：https://pro.ant.design/zh-CN

应用介绍：

    Ant Design Pro是一个企业级中后台前端/设计解决方案，基于React的中后台管理控制台的脚手架。能帮助我们快速的搭建企业级中后台管理系统。今天就为大家简单的介绍一下 Ant Design Pro 的搭建步骤：

1. 首先需要大家确定安装node和yarn

这个安装就比较简单：node直接去官网下载即可,建议大家下载长期维护版。

而yarn则直接在cmd里执行下面代码即可。

npm install --global yarn

二、当大家确定下载好node.js和yarn后，就可以新建一个空文件目录，准备安装Ant Design Pro项目。这个直接在你打算安装的文件夹下使用cmd即可。

三、开始安装

    官方文档给了两种安装方式，使用方法就是给它粘贴到cmd中执行即可。但这两者有什么区别呢？

#使用npmnpx create-umi myapp# 使用 yarnyarn create umi myapp

yarn和npm命令对比：

yarn的优点：

• 速度快。可以并行下载使资源达到最大利用率；

• 安全。yarn会校验每个安装包的完整性；

• 多注册来源处理。支持从npm安装；

• 更好的语义化。
  

   npm问题举例：

• npm install下载速度完；

• 版本无法保证统一性。

因此不用我多说了吧，哥们选择了yarn

当开始执行'yarn create umi myapp'安装时，会让你去选择安装内容、语言、模板等，这里就直接去看官网文档即可。 

其目录结构如下：├── config                   # umi 配置，包含路由，构建等配置├── mock                     # 本地模拟数据├── public│   └── favicon.png          # Favicon├── src│   ├── assets               # 本地静态资源│   ├── components           # 业务通用组件│   ├── e2e                  # 集成测试用例│   ├── layouts              # 通用布局│   ├── models               # 全局 dva model│   ├── pages                # 业务页面入口和常用模板│   ├── services             # 后台接口服务│   ├── utils                # 工具库│   ├── locales              # 国际化资源│   ├── global.less          # 全局样式│   └── global.ts            # 全局 JS├── tests                    # 测试工具├── README.md└── package.json

安装完后，直接使用idea打开，等待其依赖下载完成即可。若不下载，则在命令行输入yarn，即可开始下载。

运行方式：

    打开package.json运行脚本start即可。

后访问给的路由即可：

http://localhost:8000/welcome

这个时候有同学要问了，既然是脚手架，我还歹在里面进行开发其他页面，如何快速引用呢？

     这个时候需要去下载Umi UI 可以去方便添加区块和模板。

$ tyarn add @umijs/preset-ui -D// 或$ npm install --save-dev @umijs/preset-ui

安装完成后，重启项目，会在右下角出现个圆圈。 点击后就可以随心所欲的添加页面了。

哥们随便添加了个表单：

注：只是前端的脚手架，此次并没有涉及到后端，数据全为官方模拟。

原文始发于微信公众号（小艾搞安全）：Ant Design Pro入门介绍