Ant Design Pro complete版本的下载及运行

前言

complete 版本提供了很多基础、美观的页面和组件,对于前端不太熟练的小白十分友好,可以直接套用或者修改提供的代码完成自己的页面开发,简直不要太爽。故记录一些下载的步骤。

环境

E:\code>npm -v
9.8.1E:\code>node -v
v18.15.0

下载

根据官方提示下载即可:ANT DESIGN PRO

代码下载

在这里插入图片描述
点击开始使用,根据提示完成下载操作
在这里插入图片描述
在命令行中分别输入以下命令:

# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp # 自己的项目名

在这里插入图片描述
创建时选择compele
在这里插入图片描述
在这里插入图片描述

依赖安装

使用编译器打开项目
在这里插入图片描述
运行npm install 下载依赖
在这里插入图片描述
出现报错:peer react@“^16.8.6 || ^17.0.2” from @antv/l7-react@2.4.3,说版本依赖冲突

使用npm install --legacy-peer-deps 命令绕过依赖冲突下载

npm install --legacy-peer-deps

在这里插入图片描述

在这里插入图片描述

项目运行

使用npm run start 命令以mock 模式运行

npm run start

在这里插入图片描述
在这里插入图片描述
8000端口访问
在这里插入图片描述
出现白板,按F12 -> 控制台中查看报错信息
在这里插入图片描述
路由/*配置的问题
找到项目中的config/routes.ts,将40-43行的代码注释,注意位置,不要配错
在这里插入图片描述
出来了!!!
在这里插入图片描述
根据提示填写账号密码登录
在这里插入图片描述
下载及运行完成!!!

总结

  1. 下载步骤直接根据官网提示即可
  2. 安装依赖时可能会出现依赖冲突,此时加后缀--legacy-peer-deps重新下载
  3. 运行项目后会出现白板,此时在routes.ts 文件中把相应的位置上的代码注释掉

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

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

相关文章

Apache Paimon 使用之 Lookup Joins 解析

Lookup Join 是流式查询中的一种 Join,Join 要求一个表具有处理时间属性,另一个表由lookup source connector支持。 Paimon支持在主键表和附加表上进行Lookup Join。 a) 准备 创建一个Paimon表并实时更新它。 -- Create a paimon catalog CREATE CAT…

RabbitMQ学习总结-延迟消息

1.死信交换机 一致不被消费的信息/过期的信息/被标记nack/reject的信息,这些消息都可以进入死信交换机,但是首先要配置的有私信交换机。私信交换机可以再RabbitMQ的客户端上选定配置-dead-letter-exchange。 2.延迟消息 像我们买车票,外卖…

Python | 机器学习中的模型验证曲线

模型验证是数据科学项目的重要组成部分,因为我们希望选择一个不仅在训练数据集上表现良好,而且在测试数据集上具有良好准确性的模型。模型验证帮助我们找到一个具有低方差的模型。 什么是验证曲线 验证曲线是一种重要的诊断工具,它显示了机…

基于Java+SpringMVC+vue+element宠物管理系统设计实现

基于JavaSpringMVCvueelement宠物管理系统设计实现 博主介绍:5年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取源…

当你能量越来越高的时候, 你开始真正理解每一个人,

在追求个人成长和内心平静的道路上,我们不可避免地会意识到能量频率对于我们自身以及周围人的影响。随着能量越来越高,我们开始真正理解每一个人,意识到世界并非黑白分明,而是充满了各种不同的状态和选择。在这篇博客中&#xff0…

计算机二级C语言的注意事项及相应真题-4-程序设计

目录 31.找出学生的最高分,由函数值返回32.计算并输出下列多项式的值33.将一个数字字符串转换成与其面值相同的长整型整数。可调用strlen函数求字符串的长度34.将字符串中的前导*号全部移到字符串的尾部。函数fun中给出的语句仅供参考35.将一组得分中,去…

算法---滑动窗口练习-7(串联所有单词的子串)

串联所有单词的子串 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址:串联所有单词的子串 2. 讲解算法原理 算法的基本思想是使用滑动窗口来遍历字符串s,并利用两个哈希表(hash1和hash2)来统计窗口中子串的频次。 …

docker容器技术基础入门-1

文章目录 容器(Container)传统虚拟化与容器的区别Linux容器技术Linux NamespacesCGroupsLXCdocker基本概念docker工作方式docker容器编排 容器(Container) 容器是一种基础工具;泛指任何可以用于容纳其他物品的工具,可以部分或完全封闭,被用于…

#QT(定时轮播电子相册)

1.IDE:QTCreator 2.实验: (1)使用QOBJECT的TIMER (2)EVENT时间 (3)多定时器定时溢出判断 (4)QLABEL填充图片 3.记录 4.代码 widget.h #ifndef WIDGET_H…

批量查询快递不再难,前缀单号助你轻松搞定!

在快递业务日益繁忙的当下,批量查询快递单号成为了许多人的迫切需求。如何能够快速、准确地找到所需的快递单号呢?其实,利用前缀单号进行批量查询是一个高效且实用的方法。下面,就让我们一起了解如何利用前缀单号轻松查找快递单号…

Yolo系列算法-理论部分-YOLOv3

0. 写在前面 YOLO系列博客,紧接上一篇Yolo系列算法-理论部分-YOLOv2-CSDN博客 1. YOLOv3-定型之作 2018年,Redmon团队推出YOLOv3的网络模型,将骨干网络(backbone)由darknet-19替换成darknet-53网络,加入特…

javaScript脚本语言基础

javaScript脚本语言基础 介绍: JavaScript可以用来实现网页操作(图片切换) 脚本语言:不需要编译 sql html css javaScript 由某种解释器直接可以运行的 JavaScript也是面向对象的,但与java是两种不同的语言 script:脚本 jav…

git reset

参考:https://www.cnblogs.com/lfxiao/p/9378763.html 写完代码后,我们一般这样 git add . //添加所有文件 git commit -m "本功能全部完成" 执行完commit后,想撤回commit,怎么办? git reset --soft HE…

如何用shell脚本构建Android模块

在Android源码编译过程中,shell脚本起到了至关重要的作用。它们不仅用于自动化构建过程,还用于执行各种系统级的任务和测试。下面将详细介绍shell脚本在Android源码编译中的用法,并给出多个具体例子。 Shell脚本在Android源码编译中的基本用…

如何在CasaOS系统玩客云中安装内网穿透工具实现远程访问内网主机下载资源

文章目录 1. CasaOS系统介绍2. 内网穿透安装3. 创建远程连接公网地址4. 创建固定公网地址远程访问 2月底,玩客云APP正式停止运营,不再提供上传、云添加功能。3月初,有用户进行了测试,局域网内的各种服务还能继续使用,但…

Zabbix和Sentinel有什么区别

Zabbix和Sentinel在功能、用途和结构上存在明显的区别。 Zabbix是一个企业级的、开源的、分布式监控套件,主要用于监控IT基础设施的可用性和性能。它可以监控网络和服务的状况,并利用灵活的告警机制,允许用户对事件发送基于邮件、短信、微信…

unity学习(60)——选择角色界面--MapHandler2-MapHandler.cs

1.新建一个脚本&#xff0c;里面有static变量loadingPlayerList using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace Assets.Scripts.Model {internal class LoadData{public static List<Pl…

线性表章节课后习题答案集锦

目录 2.5 2.6 2.7 2.8 2.9 2.10 2.11 2.12 2.13 2.5 /* 要比较两个单词在字典中的顺序&#xff0c;可以逐个比较它们的字符。首先比较两个单词的第一个字符&#xff0c;如果相同&#xff0c;则继续比较下一个字符&#xff0c;直到找到不同的字符或者某个单词比较完毕…

IO流——打印流

PrintStream/PrintWriter(打印流) 作用&#xff1a;打印流可以更方便、更高效地将数据打印出去&#xff0c;能实现打印啥就出去啥 PrintStream提供地打印数据的方案 构造器说明public PrintStream​(OutputStream/File/String)打印流直接通向字节输出流/文件/文件路径publi…

Go-知识select

Go-知识select 1. select 的特性1.1 chan读写1.2 返回值1.3 default 2. select 经典使用2.1 永久阻塞2.2 快速检错2.3 限时等待 3. 实现原理3.1 数据结构3.2 实现逻辑3.3 原理总结 4. 总结4.1 大概原理4.2 参数4.3 返回值 一个小活动&#xff1a; https://developer.aliyun.com…