文档总览 - Ant Design Pro

开始使用

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。

开发前的输入

Ant Design Pro 作为一个前端脚手架，默认读者已经懂了一些前端的基础知识，并且了解 umi 和 Ant Design, 如果你是纯粹的新手，第一次来跑项目建议读一下新手需知。磨刀不误砍柴工，了解一些基础知识可以让学习曲线更加平滑。

准备工作

由于国内网络和前端的特殊性，在安装依赖等方面可能会失败或导致无法启动，浪费大量的时间我们推荐如下的技术栈来帮助我们顺畅的开发。

包管理器

推荐使用 tyarn 来进行包管理，可以极大地减少 install 的时间和失败的概率，并且完全兼容 npm。

如果喜欢使用 npm 而不是 yarn，可以使用 cnpm, 安装速度比 tyarn 更快，但是与 npm 不是完全兼容。

Terminal

非 windows 用户没什么好说的，iTerm2 和 my zsh 是最强选择。

对于 windows 用户而言，bash on linux 是最好的选择，但是可能会造成一些性能问题。这里推荐使用 Windows Terminal 和 Powershell。Windows Terminal 可以直接在微软商店中下载，美貌与实力并存，不逊于 iTerm2，微软官方维护品质也值得信赖。Powershell 是 window7 以来内置的命令行工具，被 linux 创始人称赞为不那么烂的命令行。并且可以配置 posh-git，能得到部分 zsh 的能力。

配置好后效果

初始化

我们提供了 create umi 来快速的初始化脚手架。

# 使用 npm

npx create-umi myapp

# 使用 yarn

yarn create umi myapp

按照 umi 脚手架的引导，第一步先选择 ant-design-pro：

? Select the boilerplate type (Use arrow keys)

❯ ant-design-pro - Create project with a layout-only ant-design-pro boilerplate, use together with umi block.

app - Create project with a easy boilerplate, support typescript.

block - Create a umi block.

library - Create a library with umi.

plugin - Create a umi plugin.

选择 antd 的语言版本，TypeScript 或 JavaScript

Ant Design Pro相关推荐

ant Design Pro 登录状态管理
未登录自动跳转到登录页面,登录成功不跳转回登录页面的实现代码调用流程. ant Design Pro 是一个企业中后台管理框架,开始做他,第一个肯定是要做登录,下面来看一下它是怎么登录的. 先看路由配 ...
Ant Design Pro 网络请求流程
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作 ...
【Ant Design Pro 一】环境搭建，创建一个demo
技术交流qq群 173683895 搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm.node. 注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例 $ ...
ant design pro （八）构建和发布
一.概述原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...
ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...
Ant Design Pro开发后台管理系统（新增页面）
通过实际demo演示一个管理后台的开发过程知识点: 1.新增router,新增models 新增菜单配置 1.如上图所示,打开/src/common/menu.js可以看到菜单列表其中 menuD ...
ant design pro 页面加载原理及过程，@connect 装饰器
一.概述以列表页中的标准列表为主 Ant Design Pro 默认通过只需浏览器单方面就可处理的 HashHistory 来完成路由.如果要切换为 BrowserHistory,那在 src/in ...
ant design pro 加载慢_ant design pro项目打包后页面加载缓慢
用ant design pro框架做的项目,打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImp ...
Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行
学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...
springboot拦截请求路径_SpringBoot整合Ant Design Pro进行部署
一.Ant Design Pro 打包 1.1 运行 build打包 $ npm run build 1.2 将打包生成的静态文件拷贝到spring boot 项目中构建打包成功之后,会在根目录生成 ...

Ant Design Pro