ant design pro 6.0搭建教程

news2024/11/16 6:36:29

一、搭建

环境:
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.coloradmin.cn/o/1693327.html

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

相关文章

【bugfix】/usr/local/bin/docker-compose:行1: html: 没有那个文件或目录

前言 在使用 docker-compose 管理容器化应用时,偶尔会遇到一些意想不到的错误,比如当尝试运行 docker-compose 命令时,终端非但没有展示预期的输出,反而出现类似网页错误的信息。这类问题通常与 docker-compose 的安装或配置有关…

虚拟化技术[2]之存储虚拟化

存储虚拟化 存储虚拟化简介存储虚拟化一般模型存储虚拟化实现方式基于主机存储虚拟化基于存储设备存储虚拟化基于网络存储虚拟化 案例分析:VMFSVMFS功能 存储虚拟化简介 存储虚拟化:将存储网络中的各个分散且异构的存储设备按照一定的策略映射成一个统一…

BL121DT网关在智能电网分布式能源管理中的应用钡铼技术协议网关

随着全球能源结构的转型和智能电网技术的飞速发展,分布式能源管理系统在提高能源利用效率、促进可再生能源接入及保障电网稳定运行方面发挥着日益重要的作用。然而,分布式能源系统内设备种类繁多,通信协议各异,如何高效整合这些设…

Modbus TCP转Profinet网关测试配置案例

本案例采用XD-ETHPN20网关做为Modbus TCP通信协议设备与Profinet通信协议设备连接的桥梁。Modbus TCP是一种基于TCP/IP协议的工业通信协议,而Profinet则是用于太网通信的协议。Modbus TCP转Profinet网关可实现这两种不同协议之间的数据交换和传输,极大地…

MySQL索引、视图练习

素材 1.学生表:Student (Sno, Sname, Ssex , Sage, Sdept) 学号,姓名,性别,年龄,所在系 Sno为主键 2.课程表:Course (Cno, Cname,) 课程号,课程名 Cno为主键 3.学生选课表:SC (Sno…

FFMPEG 解码过程初步学习

1. 视频文件解码过程 解码过程 步骤如下: 视频文件(封装格式,MP4/FLV/AVI 等)获取视频格式信息等解复用为Stream 流, 准备解码用的Codec将Stream 流 使用解码器解为Raw 格式针 1.1 音视频格式填充: int…

升级版网创教程wordpress插件自动采集并发布

主要功能: wordpress 插件主题系列支持自动采集并发布。 主要采集: 福缘,中创,冒泡 自动采集各大项目网进行整合发布到自己个人网站 插件话更新,减少网络请求,提升稳定性 代码完美开源 傻瓜式操作,一…

第 398 场 LeetCode 周赛题解

A 特殊数组 I 模拟&#xff1a;遍历数组判断是否是一个特殊数组 class Solution { public:bool isArraySpecial(vector<int>& nums) {int r 0;while (r 1 < nums.size() && nums[r 1] % 2 ! nums[r] % 2)r;return r nums.size() - 1;} };B 特殊数组 I…

Aiseesoft iPhone Unlocker for Mac激活版:一键解锁工具

在数字时代&#xff0c;手机解锁问题时常困扰着我们。Aiseesoft iPhone Unlocker for Mac作为一款专为Mac用户打造的解锁工具&#xff0c;以其简洁易用的界面和强大的功能&#xff0c;成为了解决iPhone解锁问题的最佳选择。 Aiseesoft iPhone Unlocker for Mac激活版下载 Aisee…

Mysql之InnoDB索引

1.索引简介 官网介绍:MySQL :: MySQL 8.0 Reference Manual :: 10.3.1 How MySQL Uses Indexes 索引用于快速查找具有特定列值的行。如果没有索引&#xff0c; MySQL 必须从第一行开始&#xff0c;然后读取整个表以找到相关的行。表越大&#xff0c;花费就越多。如果表中有相关…

java项目之视频网站系统源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的视频网站系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 视频网站系统的主要使用者管…

Java进阶学习笔记15——接口概述

认识接口&#xff1a; Java提供了一个关键字Interface&#xff0c;用这个关键字我们可以定义一个特殊的结构&#xff1a;接口。 接口不能创建对象。 注意&#xff1a;接口不能创建对象&#xff0c;接口是用来被类实现&#xff08;implements&#xff09;的&#xff0c;实现接口…

意外发现openGauss兼容Oracle的几个条件表达式

意外发现openGauss兼容Oracle的几个条件表达式 最近工作中发现openGauss在兼容oracle模式下&#xff0c;可以兼容常用的两个表达式&#xff0c;因此就随手测试了一下。 查看数据库版本 [ommopenGauss ~]$ gsql -r gsql ((openGauss 6.0.0-RC1 build ed7f8e37) compiled at 2…

idea使用鼠标滚轮进行字体大小缩放

idea使用鼠标滚轮进行字体大小缩放 使用快捷键CtrlAltS进入到设置页面 在左上角搜索框输入“increase”&#xff0c;在左侧的Keymap中右击“Increase Fort Size”&#xff0c;点击“add mouse shortcut”&#xff0c;然后录入我们要设置的快捷键&#xff0c;比如我是点击ctrl鼠…

Unity Assembly Definition Dotween 引用

原理&#xff1a; 具体Unity程序集原理用法&#xff0c;暂时留坑&#xff0c;不介绍了&#xff0c;相信有很多人也写过了 这里简单放个官方API链接 https://docs.unity3d.com/cn/current/Manual/ScriptCompilationAssemblyDefinitionFiles.html 现象 &#xff1a;Dotween引用…

CATIA入门操作——为什么大佬的工具栏是水平的?如何把工具栏变水平?

目录 引出工具栏怎么变成水平&#xff1f;总结发生肾么事了&#xff1f;&#xff1f;鼠标中键旋转不了解决&#xff1a;特征树不显示参数关系 我的窗口去哪了&#xff1f;插曲&#xff1a;草图工具的调出插曲&#xff1a;颜色工具栏显示 弹窗警告警告&#xff1a;创建约束是临时…

bootstrap实现九宫格效果(猫捉老鼠游戏)

最近&#xff0c;孩子的幼儿园让家长体验“半日助教活动”&#xff0c;每个家长需要讲授15-20分钟的课程。作为一名程序员&#xff0c;实在没有能教的课程&#xff0c;只能做了一个小游戏&#xff0c;带着小朋友们熟悉数字。 效果大致是这样的。九宫格的左上角是一只小猫图片&…

VirtualBox+Ubuntu22.10+Docker+ROS2

Docker 拉取ros2镜像 docker pull osrf/ros:foxy-desktop 运行 docker run -it --nameros2 -p 50022:22 osrf/ros:foxy-desktop 进入容器安装组件 apt-get update apt-get install vim apt-get install git apt-get install net-tools # 安装ssh apt-get install openssh…

企业如何防止数据泄密?大型企业必备的文件加密软件

随着信息化建设的大步推进&#xff0c;越来越多的企业资料以电子文件的形式保存&#xff0c;企业内部和企业之间的信息交流也主要依靠电子文件。近年来的泄密事件层出不穷&#xff0c;比如东软泄密案、HTC窃密案、力拓案等&#xff0c;给企业带来灾难性的经济损失及信誉重创。如…

Redis(十三) 事务

文章目录 前言事务的特性Redis事务的执行原理Redis中使用事务WATCH UNWATCH实现乐观锁 前言 前面我们学习 MySQL 的时候&#xff0c;肯定也学习了事务。事务是什么&#xff1f;给大家举个例子&#xff1a;假如我给朋友微信转账&#xff0c;我给他转了 100 块钱&#xff0c;当我…