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

news2024/12/24 8:31:17

前言

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

环境

E:\code>npm -v
9.8.1

E:\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.coloradmin.cn/o/1520945.html

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

相关文章

[HTML]Web前端开发技术24(HTML5、CSS3、JavaScript )JavaScript基础JavaScript,Netscape,事件处理代码,外部JS——喵喵画网页

希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的…

Java学习笔记(12)

包 导包 Final 不能被改变的,修饰方法 类 变量 方法不能被重写 类不能被继承 变量,赋值一次,变成常量,不能再被赋值 final修饰引用数据类型,地址值不能变,里面的内容可以变 字符串是不可变的 源码中使…

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…

安装jupyter报错:404 GET /static/notebook/4131.bundle.js

1、报错安装过程 我直接是pip install jupyter 进行的安装,如下,安装的版本是7.1.2 2、报错结果 运行jupyternotebook后报错:404 GET /static/notebook/4131.bundle.js (3bea7012d1534d70a935c3c193d9308d127.0.0.1) 5.70ms refererht…

cf(163)

D. Tandem Repeats? 找最长串联字串的长度 #include<iostream> #include<algorithm> #include<cstring> #include<queue> #include<vector> #include<map> using namespace std; typedef pair<int,int>PII; typedef long long ll…

ThingsBoard Edge 安装部署

文章目录 一、概述1.官方文档2.部署说明3.安装准备3.1. 克隆服务器3.2.安装 Docker3.3.安装 Java 113.4.安装 PostgreSQL3.5.下载安装包 二、安装部署1.创建 Edge 实例2.创建数据库3.Edge 服务安装3.1.安装服务3.2.配置 Edge3.3.运行安装脚本3.4.重新启动服务 4.访问 Edge5.故障…

基于ssm+layui的图书管理系统

基于ssmlayui的图书管理系统 账户类型分为&#xff1a;管理员&#xff0c;用户管理员私有功能用户私有功能公共功能技术栈功能实现图 视频演示 账户类型分为&#xff1a;管理员&#xff0c;用户 图书管理系统主要登录账户类型为管理员账户与用户账户 管理员私有功能 账户管理…

算法的渐进时间复杂度

T(n) = O(F(n)) T(n):Time 渐进时间复杂度 O:正比例关系 F(n):代码执行次数 只要代码执行的次数越来越多 所耗费的时间也就越来越高 常见的5种: O(n^2) O(n logn) O(n) O(logn) O(1):不管重复多少次1次也是这个时间,10次也是这个时间。 时间复杂度排序:由小到…

关于如何在BIOS中设置引导顺序,看这篇文章就差不多了

前言 更改计算机上“可引导”设备(如USB端口、软盘驱动器或光盘驱动器中的硬盘驱动器或可引导介质)的引导顺序非常容易。 为什么要更改引导顺序 有几个场景需要更改引导顺序,例如启动一些数据销毁工具和可引导防病毒程序,以及安装操作系统。 BIOS设置实用程序用于更改引…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:ScrollBar)

滚动条组件ScrollBar&#xff0c;用于配合可滚动组件使用&#xff0c;如List、Grid、Scroll。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含单个子组件。 接口 ScrollBar(val…

C++ 入门篇

目录 1、了解C 2、C关键字 2、命名空间 2.1 命名空间的定义 2.2 命名空间的使用 3. C输入与输出 4.缺省参数 4.1 缺省参数的概念 4.2 缺省参数的分类 5. 函数重载 5.1 函数重载的概念 5.2 C中支持函数重载的原理--名字修饰 6. 引用 6.1 引用概念 6.2 引用…

【Miniconda】Linux系统中 .condarc 配置文件的位置一般在哪里

【Miniconda】Linux系统中 .condarc 配置文件的位置一般在哪里 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到…

Elasticsearch 索引库操作 文档操作

索引库就类似数据库表&#xff0c;mapping映射就类似表的结构。要向es中存储数据&#xff0c;必须先创建“库”和“表”。 mapping映射属性 mapping是对索引库中文档的约束&#xff0c;常见的mapping属性包括&#xff1a; type&#xff1a; 字段数据类型&#xff0c;常见的简…

CSS3技巧38:3D 翻转数字效果

博主其它CSS3 3D的文章&#xff1a; CSS3干货4&#xff1a;CSS中3D运用_css 3d-CSDN博客 CSS3干货5&#xff1a;CSS中3D运用-2_中3d-2-CSDN博客 CSS3干货6&#xff1a;CSS中3D运用-3_css3d 使用-CSDN博客 最近工作上烦心的事情太多&#xff0c;只有周末才能让我冷静一下 cod…

黑群晖: 未在 DS918+ 中检测到硬盘 之 解决方案

黑群晖&#xff1a; 未在 DS918 中检测到硬盘 之 解决方案 操作如下&#xff1a; 进入BIOS&#xff0c;将sata operation 设置为 AHCI 即可

ARMv8架构特殊寄存器介绍-0

一、zero 寄存器 零寄存器用作源寄存器时读取零&#xff0c;用作目标寄存器时丢弃结果。您可以在大多数指令中使用零寄存器&#xff0c;但不是所有指令。二、sp寄存器 在ARMv8架构中&#xff0c;要使用的堆栈指针的选择在某种程度上与Exception级别。默认情况下&#xff0c;异…

套利 19个ETH 案例二解析

交易时间 2024.03.10 &#xff1b; 获利&#xff1a;19eth 套利交易地址&#xff1a; 0x4a3e5209877755c293b39b6cdc9414195cf7c951cd7a36bea426ded224f1b337 交易流程看着比较复杂&#xff1a; 实际核心获利的部分就是第4行的交易和第7行的交易&#xff0c;也是利用了2个交易…

【OceanBase诊断调优】—— 敏捷诊断工具obdiag一键分析OB集群日志设计与实践

最近总结一些诊断OCeanBase的一些经验&#xff0c;出一个【OceanBase诊断调优】专题&#xff0c;也欢迎大家贡献自己的诊断OceanBase的方法。 1. 前言 obdiag定位为OceanBase敏捷诊断工具。1.2版本的obdiag支持诊断信息的一键收集&#xff0c;光有收集信息的能力&#xff0c;…

Ubuntu 安装 KVM 虚拟化

1. Ubuntu 安装 KVM 虚拟化 KVM 是 Linux 内核中一个基于 hypervisor 的虚拟化模块&#xff0c;它允许用户在 Linux 操作系统上创建和管理虚拟机。 如果机器的CPU不支持硬件虚拟化扩展&#xff0c;是无法使用KVM(基于内核的虚拟机)直接创建和运行虚拟机的。此时最多只能使用…

JavaScript进阶:js的一些学习笔记-4

文章目录 1. 拷贝1. 浅拷贝2. 深拷贝 2. 异常处理 1. 拷贝 这里指的拷贝是指拷贝引用类型的数据(对象) 1. 浅拷贝 拷贝对象&#xff1a;Object.assign() 或者 {…obj} 展开运算符 const obj {name:liuze,age:23 } const o {...obj}; o.age 22; console.log(o); console.…