Ant Design Pro 前期安装配置(Windows)及所遇问题

Ant Design Pro 前期安装配置(Windows)及所遇问题

具体安装该模板步骤,参见ant design pro网站 官网 :(https://pro.ant.design/index-cn)
Ant Design Pro 前期安装配置(Windows)及所遇问题_第1张图片
之后,你需要在你选择的目录下,新建一个空文件夹,用来存放下载资源;接着使用cmd 进入你指定的文件夹目录下,并使用命令 yarn create umi OR npm create umi
在这里插入图片描述
Ant Design Pro 前期安装配置(Windows)及所遇问题_第2张图片
目前先选择第一个,使用箭头来选择==键盘上的1234… 然后回车即可;
打开项目文件包,这里我使用的是 PyCharm 免费社区版
根据官网流程,在终端输入 npm start 即可浏览 模板,于是第一个问题来了
Ant Design Pro 前期安装配置(Windows)及所遇问题_第3张图片
(照片没有保留原图,有点糊)具体就是**(1)umi 不是内部或外部指令 (2)node_module文件夹缺失 (3)a complete log of this run can be found in : C:…**
解决对策:在终端中,你指定的文件夹目录下,执行 npm install , 最后可能会报错,比如:
Ant Design Pro 前期安装配置(Windows)及所遇问题_第4张图片
这个husky安装失败了,没关系, ctrl + c 直接中断程序,然后再次运行 npm start 的时候,程序居然就跑起来了,开始自己build 然后可以,本地预览 项目模板,如官网所示。

区块添加

有了最基本的模板后,需要添加你需要的区块,
Ant Design Pro 前期安装配置(Windows)及所遇问题_第5张图片
根据官网提示,在这里插入图片描述
但是当我执行 umi block list 时,报错 提示我 umi 不是内部或外部命令,于是 我就 利用 npm install umi OR yarn global add umi 安装umi ,的确它提示我 安装成功,但是 查询版本时,依然报错
Ant Design Pro 前期安装配置(Windows)及所遇问题_第6张图片
解决方法:找到 项目 文件 package.json 文件夹, 将 build 后面的 内容,替换成 你想要执行的 umi 命令,比如:
在这里插入图片描述
然后执行: npm run build 就可以间接 执行 umi 命令了
当然可能将 umi 加入到 环境变量中,也能解决该问题,这里未做尝试。
于是根据官网步骤,添加你所需的区块即可。
对于其它一些下载 子区块, git 报错的,可以选择 直接 手动去下载 -
Ant Design Pro 前期安装配置(Windows)及所遇问题_第7张图片
个人入门 ant design pro 遇到的一些问题及解决方法。

你可能感兴趣的:(ant,design,pro)