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

相关推荐
1104.北光c°1 天前
【AI核心概念讲解】一口气搞懂 Agent:干翻传统后端!自主循环决策的秘密,ReAct 与 Plan-and-Execute 范式
java·人工智能·程序人生·ai·agent·react·智能体
DevilSeagull3 天前
电脑上安装的服务会自动消失? 推荐项目: localhostSCmanager. 更好管理你的服务!
测试工具·安全·react·vite·localhost·hono·trpc
钛态4 天前
前端TypeScript高级技巧:让你的代码更安全
前端·vue·react·web
钛态6 天前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
钛态6 天前
前端趋势:别被时代抛弃
前端·vue·react·web
迪普阳光开朗很健康7 天前
告别繁琐!用ApkInfoQuick快速提取APK关键信息
android·rust·react
Mr. zhihao9 天前
深入理解 ReAct 循环:从 LLM 决策到工具执行的完整闭环
python·ai·react
j_xxx404_10 天前
我用 Codex 做了一个智能围棋机器人系统:从 AI 引擎接入到前后端联调的完整实战
c++·人工智能·python·机器人·软件工程·团队开发·react
花千树-01011 天前
ReAct 思考-行动-观察循环的底层实现机制
langchain·agent·react·ai编程·ai agent·langgraph·mcp
花千树-01011 天前
ReAct Agent是什么?与传统LLM/Chatbot的本质区别(原理篇)
langchain·react·ai编程·chatbot·ai agent·langgraph·mcp