一、下载最新版本的node.js,例如node 15.6.0版本,这个很重要,否则低版本会造成umi不会出来能配置区块的那个图标,无法添加区块与模板功能。
二、在npm环境下安装与配置yarn和tyarn,后面基本采tyarn进行操作,即它是国内源,这个时候也要注意npm环境去安装yarn,否则有可能造成yarn无法安装包。
三、ant design pro V5脚手架安装:
tyarn create umi
根据提示依次选择ant design pro,然后选择V5
四、缺省 不再有umi ui,为了打开开发模块下页面右小角的那个小气泡用来添加区块和模版等pro资产的,显示这个气泡,执行以下命令:
tyarn add @umijs/preset-ui -D
五、ant design pro v5创建完后的缺省界面,如下:
运行:tyarn start
六、初始化的页面例子太少,如何达到预览版的界面效果呢?(V5正式版本未发布,不建议下载它的所有区块,但可以作为学习之用)。
- 自己手动下载https://github.com/ant-design... 所有区块
- 将下载的文件解压拷贝到C:/Users/用户名/.umi/blocks/github.com/ant-design/pro-blocks文件夹下
- 在工程目录执行 yarn run pro fetch-blocks --branch=v5