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

相关推荐
A3608_(韦煜粮)20 小时前
深入理解React Hooks设计哲学与实现原理:从闭包陷阱到并发模式
javascript·性能优化·react·前端开发·react hooks·并发模式·自定义hooks
safestar20123 天前
React 性能优化之Fiber 架构深度解析:从堆栈调和到增量渲染的革命
前端·javascript·react
aiguangyuan5 天前
React 18 源码解读(一)
javascript·react·前端开发
aiguangyuan5 天前
React 中什么是可中断更新?
javascript·react·前端开发
人工智能训练6 天前
前端框架选型破局指南:Vue、React、Next.js 从差异到落地全解析
运维·javascript·人工智能·前端框架·vue·react·next.js
aiguangyuan7 天前
React中Context 的作用及原理
javascript·react·前端开发
一只小阿乐7 天前
react 中的判断显示
前端·javascript·vue.js·react.js·react
fredricen9 天前
用LangChain1.0搭建第一个天气查询智能体
llm·agent·react·langchaian
在未来等你10 天前
AI Agent设计模式 Day 7:Tree-of-Thoughts模式:树形思维探索
设计模式·llm·react·ai agent·plan-and-execute
一只小阿乐10 天前
react 点击事件注意事项
前端·javascript·react.js·react