项目开发-前端-Ant Design Pro v5开发环境搭建

安装nodejs、yarn

1、 进入nodejs官网：https://nodejs.org/en/下载安装包
安装软件，进入安装好的目录，创建两个新文件夹node_cache和node_global
,前者用来保存缓存文件后者用来保存全局安装的模块。
注：安装目录最好不要有空格，后续步骤容易报错。
2、配置环境变量：
在系统环境变量下新建一个NODE_HOME变量，变量值为nodejs安装目录。然后
打开Path变量，分别添加%NODE_HOME%、%NODE_HOME%\node-global、%NODE_HOME%\node-global\bin三个环境变量。
3、打开cmd窗口：
配置nodejs的缓存目录和模块安装地址，路径替换为上述新文件的路径

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

更换源：

npm config set registry https://registry.npm.taobao.org

检查安装版本：

node -v
npm -v

安装yarn：

npm install -g yarn --registry=https://registry.npm.taobao.org

配置yarn源：

yarn config set registry https://registry.npm.taobao.org -g

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

安装umi

1、创建一个新文件夹作为Ant Design Pro项目的工作目录，在该目录下打开cmd，执行安装命令：

npm create umi

or

yarn create umi

如果有报错：“文件名、目录名或卷标语法不正确。”。
进入报错信息提示里的“Command: D:\nodejs\node_modules\bin\create-umi”路径，打开crete-umi.cmd文件

@"%~dp0\C:\Users\Administrator\AppData\Local\Yarn\Data\global\node_modules\.bin\create-umi.cmd"   %*

删除前面的%~dp0\

@"C:\Users\Administrator\AppData\Local\Yarn\Data\global\node_modules\.bin\create-umi.cmd"   %*

保存后，重新在项目目录下打开cmd，执行："create-umi"命令。
注意：修改 create-umi.cmd 之后，不要再运行 yarn create umi，因为这会重新安装一次，然后就把你改的文件覆盖。
2、按照提示选择想要安装的Ant Design Pro版本。

本地开发

1、在安装好的Ant Design Pro项目目录下打开cmd窗口，安装框架需要的依赖。

yarn install

2、运行框架

yarn start

3、成功运行会出现地址，浏览器访问地址出现Ant Design Pro提供的登录界面即安装成功。