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.hqwc.cn/news/542959.html

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

相关文章

基于网络爬虫的购物平台价格监测系统的设计与实现

通过对网络爬虫的购物平台价格监测系统的业务流程进行梳理可知,网络爬虫的购物平台价格监测系统主要由前台买家模块、后台卖家模块以及管理员模块构成。前台功能包含登录功能、注册功能、系统首页功能、唯品会商品详情浏览、唯品会商品收藏、唯品会商品点赞、唯品会…

cannot find -xml2: No such file or directory的解决方法

一,问题现象 在编译库的时候出现如下图所示的报错:C:/msys64/mingw32/bin/…/lib/gcc/i686-w64-mingw32/13.2.0/…/…/…/…/i686-w64-mingw32/bin/ld.exe: ca nnot find -lxml2: No such file or directory collect2.exe: error: ld returned 1 exit s…

【C#】【SAP2000】读取SAP2000中frame单元列表到Grasshopper中

private void RunScript(bool build, ref object p1, ref object p2, ref object Profile, ref object stressRatio, ref object temperatureLoad, ref object displacement, ref object frameList){if (build true){// 声明变量int ret;int Numit 0;int[] ObjType new int[…

Java学习记录(二十一)网络编程

CS架构和BS架构 这两个架构是现在市面上主流的两个架构,CS架构主要是客户端服务器,而BS架构主要是网页服务器。BS架构的优点是方便,所有数据通过服务器传输,缺点也很明显,由于所有数据都是通过网络传输,导…

1.实用Qt:解决绘制圆角边框时,圆角锯齿问题

目录 问题描述 解决方案 方案1: 方案2: 结果示意图 问题描述 做UI的时候,我们很多时候需要给绘制一个圆角边框,初识Qt绘制的童鞋,可能绘制出来的圆角边框很是锯齿,而且粗细不均匀,如下图&…

第五十六回 徐宁教使钩镰枪 宋江大破连环马-飞桨图像分类套件PaddleClas初探

宋江等人学会了钩镰枪,大胜呼延灼。呼延灼损失了很多人马,不敢回京,一个人去青州找慕容知府。一天在路上住店,马被桃花山的人偷走了,于是到了青州,带领官兵去打莲花山。 莲花山的周通打不过呼延灼&#xf…

金融知识分享系列之:MACD指标精讲

金融知识分享系列之:MACD指标精讲 一、MACD指标二、指标原理三、MACD指标参考用法四、MACD计算步骤五、MACD分析要素六、根据快线DIF位置判断趋势七、金叉死叉作为多空信号八、快线位置交叉信号九、指标背离判断行情反转十、差离值的正负十一、差离值的变化十二、指…

如何在webapp中手动部署

前言:这个有不知道怎么下载Tomcat的可以看我这篇博客的前面,有相关链接,下载好后我那边也有如何运行成功的 在idea中配置tomcat服务器,部署一个项目-CSDN博客 接下来进入这篇博客的正题!怎么手动部署 先找到我们下载…

3. ElasticSearch搜索技术深入与聚合查询实战

1. ES分词器详解 1.1 基本概念 分词器官方称之为文本分析器,顾名思义,是对文本进行分析处理的一种手段,基本处理逻辑为按照预先制定的分词规则,把原始文档分割成若干更小粒度的词项,粒度大小取决于分词器规则。 1.2 …

SQL注入攻击原理与自动化检测技术的深度探究及其实战应用

SQL注入原理 SQL注入攻击的原理是基于攻击者能够控制应用程序与数据库之间的SQL查询。当应用程序将用户输入的数据直接嵌入到SQL查询中,而没有进行适当的验证或转义时,攻击者就可以通过输入精心构造的数据来操纵SQL查询的逻辑。 例如,假设有…

ubuntu(20.04)-安装JAVA环境-IDEA

1.下载IDEA 2.解压文件 sudo tar -zxvf idealC-2022.2.3.tar.gz -C /opt 3.添加环境变量: .vim ~/.bashrc export IDEA_HOME/opt/ideaIC-2022.2.3/ export PATH${IDEA_HOME}/bin:$PATH source ~/.bashrc 4.启动: cd /opt/ideaIC-2…

VS Code上,QT基于cmake,qmake的构建方法(非常详细)

VS Code上,QT基于cmake,qmake的构建方法 1 前言2 QT基于cmake的构建方法2.1 VS Code关键插件安装2.2 系统环境变量配置2.3 VS Code中,环境变量配置2.4 Cmake新建一个新的Porject 3 QT基于qmake的构建方法 1 前言 最近,由于认证了github的学生…