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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/840889.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

可重构柔性装配产线,为智能制造领域带来了新的革命性变革

随着科技的飞速发展,个性化需求逐渐成为市场的主导。在这个充满变革的时代,制造业正面临着前所未有的挑战和机遇。如何快速响应市场需求、提高生产效率、保证产品质量,成为每一家制造企业必须思考的问题。 在这样的背景下,富唯智…

免费插件集-illustrator插件-Ai插件-文本对象和文本段落互转

文章目录 1.介绍2.安装3.通过窗口>扩展>知了插件4.功能解释5.总结 1.介绍 本文介绍一款免费插件,加强illustrator使用人员工作效率,进行文本对象和文本段落互转。首先从下载网址下载这款插件 https://download.csdn.net/download/m0_67316550/878…

00.OpenLayers快速开始

00OpenLayers快速开始 官方文档: 快速开始:https://openlayers.org/doc/quickstart.html 需要node环境 一、设置新项目 npm create ol-app my-app cd my-app npm start第一个命令将创建一个名为 my-app​ 的目录(如果您愿意,…

赞扬老师的词汇积累

1 词汇 启明星 象征意义:在古代文化中,启明星(即金星,特别是在黎明前出现在东方天空的那颗亮星)常被视为新一天开始的象征,预示着光明和希望的到来。因此,将老师们比喻为“启明星”&#xff0…

Java——简易图书管理系统

本文使用 Java 实现一个简易图书管理系统 一、思路 简易图书管理系统说白了其实就是 用户 与 图书 这两个对象之间的交互 书的属性有 书名 作者 类型 价格 借阅状态 而用户可以分为 普通用户 管理员 使用数组将书统一管理起来 用户对这个数组进行操作 普通用户可以进…

有趣的css - 圆形背景动效多选框

大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用 css 实现一个圆形背景动效多选框,适用提醒用户勾选场景,突出多选框选项,可以有效增加用户识别度。 最新文章通过公众号「设计师工作日常」发布…

js画思维导图代码2

这段代码是一个使用Vue.js和D3.js构建的树形图组件。它是一个Vue组件&#xff0c;用于创建和显示一个交互式的树形结构图。下面是对这段代码的简要分析&#xff1a; 模板部分 (<template>): 定义了组件的HTML结构&#xff0c;包括一个隐藏的提示框(#tooltip)和一个用于显…

VBA批量合并带有图片、表格与文本框的Word

本文介绍基于VBA语言&#xff0c;对大量含有图片、文本框与表格的Word文档加以批量自动合并&#xff0c;并在每一次合并时添加分页符的方法。 在我们之前的文章基于Python中docx与docxcompose批量合并多个Word文档文件并逐一添加分页符&#xff08;https://blog.csdn.net/zhebu…

helloworld 可执行程序得到的过程

// -E 预处理 开发过程中可以确定某个宏 // -c 把预处理 编译 汇编 都做了,但是不链接 // -o 指定输出文件 // -I 指定头文件目录 // -L 指定链接库文件目录 // -l 指定链接哪一个库文件 #include <stdio.h> #include <stdlib.h> #include <string.h>int mai…

【postgresql初级使用】在表的多个频繁使用列上创建一个索引,多条件查询优化,多场景案例揭示索引失效

多列索引 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 多列索引概述 …

【微积分】CH16 integrals and vector fields听课笔记

【托马斯微积分学习日记】13.1-线积分_哔哩哔哩_bilibili 概述 16.1line integrals of scalar functions [中英双语]可视化多元微积分 - 线积分介绍_哔哩哔哩_bilibili 16.2vector fields and line integrals&#xff1a; work circulation and flux 向量场差不多也是描述某种…

gpt-4o继续迭代考场安排程序 一键生成考场清单

接上两篇gpt-4o考场安排-CSDN博客&#xff0c;考场分层次安排&#xff0c;最终exe版-CSDN博客 当然你也可以只看这一篇。 今天又添加了以下功能&#xff0c;程序见后。 1、自动分页&#xff0c;每个考场打印一页 2、添加了打印试场单页眉 3、添加了页脚 第X页&#xff0c;…

Leetcode刷题笔记1:数组基础1

导语 leetcode刷题笔记记录&#xff0c;本篇博客记录数组基础1部分的题目&#xff0c;主要题目包括&#xff1a; Leetcode 704 二分查找Leetcode 27 移除元素 知识点 二分查找 原理 二分查找的适用对象为有序数组且数组中无重复元素&#xff0c;其主要原理是每次都从有序…

2024年5月软考架构题目回忆分享

十年架构两茫茫 &#xff0c;Redis , UML 夜来幽梦忽还乡 &#xff0c; 大数据&#xff0c; Lambda 选择题 1.需求分析和架构设计面临这两个不同对象&#xff0c;一个是问题空间&#xff0c;一个是解空间 这是英文题&#xff0c;总共五个题目&#xff0c;只记得这么多 2. …

AI视频教程下载:全面掌握ChatGPT和LangChain开发AI应用(附源代码)

这是一门深入的课程&#xff0c;涉及ChatGPT、LangChain和Python。打造专注于现实世界AI集成的AI应用&#xff0c;课件附有每一节涉及到的源代码。 **你将学到什么&#xff1a;** - 将ChatGPT集成到LangChain的生产风格应用中 - 使用LangChain组件构建复杂的文本生成管道 - …

order by 优化

1. 排序方式 MySQL支持两种方式的排序&#xff0c;FileSort和Index&#xff1a; Index的效率高&#xff0c;它指MySQL根据索引本身完成排序。FileSort方式效率较低&#xff0c;是指MySQL自己扫描数据之后进行排序&#xff0c;没有使用到index 因此&#xff0c;我们要让order…

推荐五个线上兼职,在家也能轻松日入百元,适合上班族和全职宝妈

在这个瞬息万变的时代&#xff0c;你是否也曾考虑过在繁忙的工作之外&#xff0c;寻找一份兼职副业来补贴家用&#xff0c;同时保持生活的多样性&#xff1f;别急&#xff0c;现在就让我为你揭秘五个可靠的日结线上兼职岗位&#xff0c;助你轻松迈向财务自由之路&#xff01; 一…

云WAF与传统WAF:网络安全的双重防线

在网络安全领域&#xff0c;Web应用防火墙&#xff08;WAF&#xff09;是守护企业网络安全的重要盾牌。随着云计算技术的迅猛发展&#xff0c;云WAF作为一种新型的安全服务模式&#xff0c;正逐渐成为企业网络安全防护的新宠。本文将深入探讨云WAF与传统WAF的区别&#xff0c;分…

[‘column‘]和[:,‘column‘]的区别

之前&#xff0c;关于numpy和pandas的操作一直不熟悉&#xff0c;对于获取数据中的行&#xff0c;列一直混淆。 df[column] df[column]是 Pandas DataFrame 切片的常用语法&#xff0c;用于选择名为 column 的单个列。它返回一个 Pandas Series 对象。 df.loc[:,column] df[:,…

PSQL一些查询命令

只看10条数据 select * from dongchazhedata2 limit 10;以某一字段排序 select * from dongchazhedata2 order by date;查询大于某一日期的数据&#xff1b; select * from dongchazhedata where date > 2024-05-19;启动数据库命令 sudo service postgresql start;查看…