ant-design-pro4/5以及umi-ui 的使用步骤（采坑记录）

1、创建项目
新建文件夹myapp，执行以下命令

npm create umi 
或者
yarn create umi

2、选择ant-design-pro

3、根据提示选择版本 pro4 或者pro5

若选择pro4，则继续以下步骤，若选择pro5 则会直接创建项目，安静等待创建完成即可
（1）选择使用TS 还是JS

(2) 选择是否需要完整的区块，如果选择simple 则之后创建一个简单的项目，若是创建complete 则会创建一个比较完整的项目（包含了一些页面案例之类的）

（3）等待项目创建完成既可

添加umi-ui

创建完项目之后默认是不能进行快速（区块）开发的，系统界面如下图

但是看过ant-design-pro的官方网站的可能都知道，ant-design-pro是可以通过umi-ui 进行快速开发的
如果我们想要在刚刚创建的项目中使用umi-ui进行快速开发，则需要执行以下命令，添加相关依赖

yarn add @umijs/preset-ui -D

命令执行完成后重新启动项目

可以看到右下角多了个悬浮球，点开之后既可以进行区块开发

采坑

1、在执行yarn create umi 时出现 文件名、目录名或卷标语法不正确 错误

λ yarn create umi
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "create-umi > sylvanas > @umijs/fabric > @typescript-eslint/eslint-plugin@4.7.0" has unmet peer dependency "@typescript-eslint/parser@^4.0.0".
[4/4] Building fresh packages...

success Installed "create-umi@0.25.0" with binaries:
      - create-umi
文件名、目录名或卷标语法不正确。
error Command failed.
Exit code: 1
Command: E:\appdata\nodejs\node_global\bin\create-umi
Arguments:
Directory: E:\code\test\myapp
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

原因：create-umi.cmd 中的文件路径错误

解决：修改 create-umi.cmd 中的文件路径
（1）定位 create-umi.cmd 的位置
根据上面的报错信息就可以知道 create-umi.cmd 的位置在 E:\appdata\nodejs\node_global\bin文件夹下
（2）修改路径信息
修改前

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

修改后

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

修改完成后保存文件，重启命令行，执行 create-umi 命令既可
注意：
（1）不要执行yarn create umi，因为这会重新安装一次，然后就把你改的文件覆盖了
（2）如果运行 create-umi 命令，提示“不是内部或外部命令”，原因是没有把 create-umi.cmd文件所在的路径加入系统的 path 环境变量中，加入之后，重新打开命令行，就可以解决问题了。

2、执行npm create umi 时出现文件名、目录名或卷标语法不正确 错误

λ npm create umi
文件名、目录名或卷标语法不正确。

解决方案：

出现这个错误多半是因为之前执行过yarn create umi引起的，按照上面的方式修改完create-umi.cmd 文件后重新执行npm create umi即可