ant design pro 6.0搭建教程

一、搭建

环境：

Node.js 18.16.1

ant design pro 6.0

注意：选择umi@3时，使用node.js 18版本的会报错，可以实践一下，这里就不再进行实践了。

umi@3需要版本是低于node.js 18的

node下载地址：
https://nodejs.org/dist/v13.13.0/

node安装教程：
https://blog.csdn.net/WHF__/article/details/129362462

ant design pro
https://pro.ant.design/zh-CN ant

注意：建议通读官方文档，这样更好理解和使用

1.1 执行 命令：

npm i @ant-design/pro-cli -g

 DESKTOP-2TB8KE5    D:\code\vscode\ant-design-pro  ﮫ 0ms   5:06 PM  
  ⚡keney ❯❯ npm i @ant-design/pro-cli -g

1.2 创建ant design pro项目：

pro create myAntDesignProWeb

注意：这里可能说你没有pro命令，这确实没有，只是安装了全局的npm i @ant-design/pro-cli -g

报错：

pro : 无法将"pro"项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，
然后再试一次。
所在位置 行:1 字符: 1
+ pro create myAntDesignProWeb
+ ~~~
    + CategoryInfo          : ObjectNotFound: (pro:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

解决方法，使用

npx pro create myAntDesignProWeb

1.3 选择 simple，然后等创建成功，进入 myAntDesignProWeb目录下

1.4 在myAntDesignProWeb目录下，执行

npm i 
或者
npm install

后者是安装依赖的全称

安装依赖完成：

安装完成后，即可执行启动命令，来预览mock数据

npm run start

访问地址：
http://localhost:8000

也可以自定义端口

输入用户名：admin

密码：ant.design

npm run start 这只是预览mock中的数据，并没有后台。

如果你想调后台接口，并进行调试，请看下一篇教程。

附件

创建项目 pro 命令不能找到

目前解决方法：

npx pro create myAntDesignProWeb

或者找到pro命令的目录位置，在创建项目时带上目录路径

进入项目目录和安装命令：

cd myAntDesignProWeb&& npm install

资料参考：

https://github.com/ant-design/ant-design-pro/issues/11035