使用Ant Design Pro前的准备与快速开发环境搭建

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