Ant Design Pro 是一个企业级中后台前端/设计解决方案。是蚂蚁金服在Ant Design开源框架的基础上搭建的一套开箱即用的设计平台。使用Ant Design Pro需要具备的知识基础包括JavaScript基础、React框架、NodeJS以及包管理等基础知识。在开发计算机上，也需要安装Nodejs以及相应的包管理软件才可以实现开发。
在MacOS和Windows上，都可以直接在Node官方网站下载Node进行安装，但为了为了兼容性和效率，进行Node版本管理很有必要，因此推荐选择使用nvm控制node版本。尽量不要直接下载官方的安装包进行安装。linux系统也存在同样的问题，虽然可以直接命令行安装，但最好先安装nvm再在此基础上安装node等比较方便。
1 安装与使用git
git作为应用最广泛的版本管理工具，在maxos和linux上都可以方便的通过包管理器安装最新版本。windows系统也可以下载到不同的git客户端。git常用的配置和基本操作有下面这些。
#从远程仓库拷贝一个项目，在本地会生成一个与远程仓库名称相同的文件夹 #版本库可以是ssh或者http两种形式，前者更安全一些但后者速度更快一些 git clone <版本库的网址> #如果要修改本地文件夹名称，采用下列格式 git clone <版本库的网址> <本地目录名> #查看远程主机，加-v可以查看版本 git remote #删除，重命名远程主机 git remote rm <主机名> git remote rename <原主机名> <新主机名> #将远程主机的更新取回本地 git fetch <远程主机名> #创建新分支 git checkout -b newBrach origin/master #在本地分支上合并远程分支 git merge origin/master # 或者 git rebase origin/master #取回某个分支 git pull <远程主机名> <远程分支名>:<本地分支名> #如果远程分支被删除，加上-p使本地分支同时删除 git fetch -p #将本地分支推送到远方主机 git push <远程主机名> <本地分支名>:<远程分支名> git push --force origin #强制覆盖远程
其他git常用命令可以参考阮一峰博客中常用git命令清单。
2 安装nvm
由于MacOS官方不再支持sudo方式运行brew命令，无法直接通过brew命令行安装nvm，因此在MacOS与Linux系统下均需要通过下列命令来进行nvm的安装：
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
在默认终端bash的情况下，打开bash配置文件~/.bashrc 并在最后加入下列代码，将nvm命令添加到环境变量中。如果要使修改及时生效，可以使用touch ～/.bashrc。
需要注意的是，不同shell的配置文件位置可能是不一样的。比如zsh配置文件就在/.zshrc中。
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
3 通过nvm安装node
安装了nvm之后，通过下列命令可以简单的实现node的安装与检查等操作。
nvm ls-remote #查看远程仓库的node版本 nvm ls #查看本地仓库的node版本 nvm install v10.16.0 #安装某个版本的node nvm current #查看当前正在使用的node版本 nvm use v10.16.0 #激活某个指定版本的node nvm deactivate #取消nvm，使用原生的系统环境参数
4 采用淘宝的cnpm替换原生npm
node默认会安装npm包管理器，但是由于网络环境的原因，npm访问速度通常会很慢，可以通过安装cnpm来替代npm。
npm install -g cnpm --registry=https://registry.npm.taobao.org #安装cnpm cnpm install *** #安装完之后就可以通过cnpm命令安装指定的包了 nvm ls #查看本地仓库的node版本 nvm install v10.16.0 #安装某个版本的node
可以利用别名将npm配置为使用cnpm
alias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \ --disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc" # Or alias it in .bashrc or .zshrc $ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \ --disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc
5 安装yarn
yarn是另外一个好用的包管理器。
在macos上通过brew可以安装yarn。但如果安装了nvm，为了避免冲突，可以加上额外的参数。
brew install yarn #正常安装yarn brew install yarn --without-node #安装nvm的时候为了避免冲突 brew upgrade yarn #升级yarn yarn --version #通过该命令可以检查yarn是否安装好 yarn global add umi #通过yarn全局安装指定包，以umi为例
在ubuntu上默认的yarn版本很老（0.32），因此需要先添加yarn官方的仓库之后再安装
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt-get update sudo apt-get install yarn #正常安装yarn sudo apt-get install --no-install-recommends yarn #为了避免与nvm冲突的安装方式
6 安装umi（乌米）
umi是阿里的一个“可插拔的企业级 react 应用框架”。可以通过yarn或者npm直接安装，快速入门说明如下
# 安装 $ yarn global add umi # 或者 npm install -g umi # 新建应用 $ mkdir myapp && cd myapp # 新建页面 $ umi generate page index # 本地开发 $ umi dev # 构建上线 $ umi build
7 开箱即用的Ant Design Pro
Ant Design Pro提供了快速的开箱即用的指引。
￥ yarn create umi # 或者 $ npm create umi # 在安装菜单中通过上下方向键选择要安装的类型，选ant-design-pro就会生成一个开箱即用的项目 Select the boilerplate type (Use arrow keys) ? ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin. # 安装依赖包，可以使用npm或者cnpm $ npm install # 启动项目 $ npm start
打开浏览器http://localhost:8000就可以看到启动的ant-design-pro网站了。
值得一提的是，除了传统的开发模式外，ant-design-pro也提供了区块式的开发模式，用于快速的系统搭建，在此基础上再完成更细节的工作。
# 在项目根目录下使用下列命令添加一个区块 $ umi block add [block url] --path=[target path] # 通过下列命令可以将官方的demo区块添加到本地 $ umi block add https://github.com/umijs/umi-blocks/tree/master/demo # 使用参数path来指定路由 $ umi block add ant-design-pro/analysis --path=your/path/here # 在新的版本中，也可以通过block list快速找到所有区块并通过上下方向键安装 $ umi block list