We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
前言
前几天突然有个冲动，想要开始写公众号，分享一些自己在技术方面的学习经历。公众号注册好之后，写什么内容成了摆在眼前的第一个问题。这个号的定位主要是在前端相关的技术分享，最近在做一个后台管理系统，正好用到了AntDesign Pro这个框架，就暂且分享一下关于AntDesign Pro的使用心得吧。
介绍
首先我们讲一下AntDesign Pro到底是个什么东西。要想知道AntDesign Pro，我们首先要了解一下Ant Design是什么。根据Ant Design的官网slogan：
服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。
其实，Ant Design就是一套组件库，是由阿里巴巴的蚂蚁金服团队开源的。它主要包括一些我们Web开发中最常用的一些组件。看Ant Design官网的文档，主要分为"设计语言"和"组件“两部分。
“设计语言”部分是给设计师看的(当然程序员也可以看)，主要讲Ant Design的设计思想以及设计规范。
“组件"部分就是给程序员看的组件的API文档了。
Ant Deisgn包含的组件非常多，基本做一个网站常用的组件都包括了，比较适合用来做一些后台系统等对UI的个性化要求不高的地方，不适合直接用来做前端产品。
好，说完了Ant Design，那么Ant Design Pro是什么东西呢？既然后边加了“Pro”，那应该是比Ant Deisgn更“高级”一点。根据Ant Design Pro的官网：
开箱即用的中台前端/设计解决方案
其实，Ant Design Pro相对于Ant Design主要特点就在于“开箱即用”，也就是它是建立在Ant Design(UI部分)+umi(数据逻辑部分）等框架之上的一个“高级框架”。不太严谨地说，Ant Deisgn Pro其实是一个网站生成器。使用一条命令就可以生成一个完整可用的后台网站，而我们接下来需要做的就是删掉没用的部分，然后把有些文案标题什么的改一下，然后根据自己的需要去组合自己想要的页面和功能。
用Ant Design Pro写代码有点像插积木，大的框架和组件都给你准备好了，你只需要取得自己需要的东西，然后在代码中组合起来即可。
不过需要注意的是，Ant Design Pro其实只是一个前端框架，如果需要后端API服务的话，需要自己另外写代码～
实战
在这一部分我会大概说一下我使用Ant Design Pro做开发的大致流程，但是不会写的太详细。因为我不想在一篇文章中写太多东西，这篇文章主要是给第一次接触Ant Design Pro的同学做一个大致的介绍。如果大家对哪一块有兴趣或者有疑问，可以在下方留言，我后续可以单独出文章介绍。
根据官网给出的介绍 ，执行指令即可生成一个Ant Deisgn Pro的项目目录（具体的指令大家可以去官网看一下，我不想在文章里原文复制文档中已有的东西）。Ant Design Pro会让你选择JavaScript或者TypeScript，根据自己的需要选择即可。不过如果选择使用JS的话，以后每次添加组件都需要加一个--js的参数，因为它的默认语言是TS。
安装好依赖之后，执行npm run start即可启动生成的网站。默认生成的网站是只有一个欢迎网页的。接下来我们就可以通过命令往网站中添加页面了。
这里我说一下如何添加页面。Ant Design Pro提供了一个示例网站，网址在：https://preview.pro.ant.design
这个网站不仅可以提供示例，而且在每个网页中都提供了如何添加这个网页的指令：
如上图所示，如果想为自己的网站添加一个登录页面，执行
npx umi block add UserLogin --path=/user/login
命令即可，但需要将--path的参数修改为你自己的路径。这个路径是比较重要的，决定了两个东西：
这个页面在URL中的路径是什么。Ant Design Pro的每个页面都对应了一个独立的URL Path。
这个页面在菜单栏以及面包屑中的位置和层级关系。
关于路径这一块我们先不细讲，以后可以单独写一篇文章来介绍。
通过上述命令，会在你的项目目录下的src/pages/{your-path}下生成所需的文件。{your-path}就是你在上面命令中指定的路径。
接下来要做的就是到src/pages/{your-path}下修改代码，达到自己所需要的页面结构。比如修改文案以及删除自己不需要的控件等。
大概介绍一下经常需要修改的几个文件：
这里有一点需要注意，就是上边提到的model.js中存储的状态，只能在这个页面中被引用到。如果你需要一个页面中的状态被其他页面引用，那么就需要把它的models写到项目目录的src/models目录中。
另外全局文件中会修改的文件有：
config/config.js - 全局的配置文件，比如你要修改菜单的名字或者位置和层级关系，就需要修改这个文件中的exports.routes。另外webpack的配置也可以在这个文件中添加。
mock/* - 可以写一些前端自己的测试数据，这样可以在不添加后端的情况下单独测试前端的页面逻辑。
总结
除了以上提到的几个文件和目录，其他部分基本是很少需要改动的。我们用Ant Deisgn Pro做开发需要改动最多的就是pages下面的几个文件。各种后台系统常用的页面布局方式Ant Design Pro都给我们提供好了，我们只需要将他们添加到系统中然后稍作修改即可，可以说大大减少了我们在前端页面和样式部分的工作量。
这篇文章由于只是介绍性质，所以很多部分是一句话带过，并没有讲太细。大家对哪一部分有疑问可以在下方留言，以后如果有时间我可以单独出文章来介绍。
最后感谢蚂蚁金服团队~
另外，我的所有文章都在微信公众号首发，请扫码关注：
The text was updated successfully, but these errors were encountered:
No branches or pull requests
前言
前几天突然有个冲动，想要开始写公众号，分享一些自己在技术方面的学习经历。公众号注册好之后，写什么内容成了摆在眼前的第一个问题。这个号的定位主要是在前端相关的技术分享，最近在做一个后台管理系统，正好用到了AntDesign Pro这个框架，就暂且分享一下关于AntDesign Pro的使用心得吧。
介绍
首先我们讲一下AntDesign Pro到底是个什么东西。要想知道AntDesign Pro，我们首先要了解一下Ant Design是什么。根据Ant Design的官网slogan：
其实，Ant Design就是一套组件库，是由阿里巴巴的蚂蚁金服团队开源的。它主要包括一些我们Web开发中最常用的一些组件。看Ant Design官网的文档，主要分为"设计语言"和"组件“两部分。
“设计语言”部分是给设计师看的(当然程序员也可以看)，主要讲Ant Design的设计思想以及设计规范。
“组件"部分就是给程序员看的组件的API文档了。
Ant Deisgn包含的组件非常多，基本做一个网站常用的组件都包括了，比较适合用来做一些后台系统等对UI的个性化要求不高的地方，不适合直接用来做前端产品。
好，说完了Ant Design，那么Ant Design Pro是什么东西呢？既然后边加了“Pro”，那应该是比Ant Deisgn更“高级”一点。根据Ant Design Pro的官网：
其实，Ant Design Pro相对于Ant Design主要特点就在于“开箱即用”，也就是它是建立在Ant Design(UI部分)+umi(数据逻辑部分）等框架之上的一个“高级框架”。不太严谨地说，Ant Deisgn Pro其实是一个网站生成器。使用一条命令就可以生成一个完整可用的后台网站，而我们接下来需要做的就是删掉没用的部分，然后把有些文案标题什么的改一下，然后根据自己的需要去组合自己想要的页面和功能。
用Ant Design Pro写代码有点像插积木，大的框架和组件都给你准备好了，你只需要取得自己需要的东西，然后在代码中组合起来即可。
不过需要注意的是，Ant Design Pro其实只是一个前端框架，如果需要后端API服务的话，需要自己另外写代码～
实战
在这一部分我会大概说一下我使用Ant Design Pro做开发的大致流程，但是不会写的太详细。因为我不想在一篇文章中写太多东西，这篇文章主要是给第一次接触Ant Design Pro的同学做一个大致的介绍。如果大家对哪一块有兴趣或者有疑问，可以在下方留言，我后续可以单独出文章介绍。
根据官网给出的介绍 ，执行指令即可生成一个Ant Deisgn Pro的项目目录（具体的指令大家可以去官网看一下，我不想在文章里原文复制文档中已有的东西）。Ant Design Pro会让你选择JavaScript或者TypeScript，根据自己的需要选择即可。不过如果选择使用JS的话，以后每次添加组件都需要加一个--js的参数，因为它的默认语言是TS。
安装好依赖之后，执行npm run start即可启动生成的网站。默认生成的网站是只有一个欢迎网页的。接下来我们就可以通过命令往网站中添加页面了。
这里我说一下如何添加页面。Ant Design Pro提供了一个示例网站，网址在：https://preview.pro.ant.design
这个网站不仅可以提供示例，而且在每个网页中都提供了如何添加这个网页的指令：
如上图所示，如果想为自己的网站添加一个登录页面，执行
npx umi block add UserLogin --path=/user/login命令即可，但需要将--path的参数修改为你自己的路径。这个路径是比较重要的，决定了两个东西：
这个页面在URL中的路径是什么。Ant Design Pro的每个页面都对应了一个独立的URL Path。
这个页面在菜单栏以及面包屑中的位置和层级关系。
关于路径这一块我们先不细讲，以后可以单独写一篇文章来介绍。
通过上述命令，会在你的项目目录下的src/pages/{your-path}下生成所需的文件。{your-path}就是你在上面命令中指定的路径。
接下来要做的就是到src/pages/{your-path}下修改代码，达到自己所需要的页面结构。比如修改文案以及删除自己不需要的控件等。
大概介绍一下经常需要修改的几个文件：
这里有一点需要注意，就是上边提到的model.js中存储的状态，只能在这个页面中被引用到。如果你需要一个页面中的状态被其他页面引用，那么就需要把它的models写到项目目录的src/models目录中。
另外全局文件中会修改的文件有：
config/config.js - 全局的配置文件，比如你要修改菜单的名字或者位置和层级关系，就需要修改这个文件中的exports.routes。另外webpack的配置也可以在这个文件中添加。
mock/* - 可以写一些前端自己的测试数据，这样可以在不添加后端的情况下单独测试前端的页面逻辑。
总结
除了以上提到的几个文件和目录，其他部分基本是很少需要改动的。我们用Ant Deisgn Pro做开发需要改动最多的就是pages下面的几个文件。各种后台系统常用的页面布局方式Ant Design Pro都给我们提供好了，我们只需要将他们添加到系统中然后稍作修改即可，可以说大大减少了我们在前端页面和样式部分的工作量。
这篇文章由于只是介绍性质，所以很多部分是一句话带过，并没有讲太细。大家对哪一部分有疑问可以在下方留言，以后如果有时间我可以单独出文章来介绍。
最后感谢蚂蚁金服团队~
另外，我的所有文章都在微信公众号首发，请扫码关注：
The text was updated successfully, but these errors were encountered: