Ant Design Pro | 前端项目初始化

在这里插入图片描述

初始化项目

环境确认

这里使用的版本如下:
image.png

新建文件夹(fapi
执行项目初始化命令

cmd进入命令行执行项目初始化命令,参考官网https://pro.ant.design/zh-CN/
image.png

# 使用 npm
npm i @ant-design/pro-cli -g
# fapi-frontend是项目名
pro create fapi-frontend

image.png

项目试运行

安装依赖

这里使用WebStorm打开项目,也可使用其他编译器。
在终端中执行以下命令:

# yarn/yarn install
yarn

image.png
依赖安装完成会生成左侧的node_modules文件夹,存放依赖

试运行

打开package.json

package.json:管理项目依赖、脚本的工具。

image.png
相关说明:

  • dev等价于start devMOCK=none,将自动模拟的数据关闭,调用自己定义的后端
  • start:以模拟数据的方式运行

这里点击start左侧的绿色启动按钮运行即可:
image.png
image.png
注意:
若此时以dev的方式启动,则会出现登录失败!原因是此时没有对接后端服务接口。

项目瘦身

项目中有很多文件,全部都需要吗,能否移除一些不必要的?

移除国际化

在这里插入图片描述
双击右侧package.json文件中的i18n-remove,然后删除locales目录,但是发现报错了!

解决?

  1. 搜索引擎查找
  2. 问作者(官方)官方开源地址

复制一些报错信息,pro i18n-remove --locale=zh-CN --write,SyntaxError: Export ‘SelectLang’ is not defined. (11:55)进行查找。

解决方案:

  1. 删除根目录下 src/components/index.js 中的 SelectLang 变量
  2. 执行i18n-remove命令
    在这里插入图片描述
  3. yarn start启动项目
    在这里插入图片描述

右上角国际化没有了,但是登录后左侧菜单栏没有了
在这里插入图片描述

解决方案:
在这里插入图片描述
给路由加上name
在这里插入图片描述
再次启动项目发现OK啦
在这里插入图片描述

移除测试工具

删除tests目录即可
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

树莓派固件烧录教程(2024)

一、烧录工具准备 硬件准备: 16G及以上TF卡和读卡器,TF卡建议高速卡(卡的读写速度直接影响树莓派的运行速度)。 软件准备:(下面二方法选其一即可) 方法1:raspberry官方烧录工具R…

【高校科研前沿】中国科学院南京地理与湖泊研究所肖启涛博士为一作在Sci. Bull发文:我国湖泊二氧化碳从大气的源向汇转变

目录 1.文章简介 2.研究内容 3.文章引用 1.文章简介 论文名称:Lakes shifted from a carbon dioxide source to a sink over past two decades in China 第一作者及通讯作者:肖启涛(博士生),段洪涛(研究…

JavaSE继承和多态(下)

在了解多态之前我们先弄清以下三个概念: 方法的重写向上转型和向下转型动态绑定和静态绑定 一.方法的重写 重写(override):也称为覆盖。重写是子类对父类非静态、非private修饰,非final修饰,非构造方法等的实现过程 进行重新编写,…

如何使用 langchain 与 openAI 连接

上一篇写了如何安装 langchain https://www.cnblogs.com/hailexuexi/p/18087602 这里主要说一个 langchain的使用 创建一个目录 langchain ,在这个目录下创建两个文件 main.py 这段python代码,用到了openAI,需要openAI及FQ。这里只做…

c++的学习之路:16、string(3)

上章有一些东西当时没学到,这里学到了将在补充,文章末附上代码,思维导图。 目录 一、赋值重载 二、带模板的创建 三、析构函数 四、代码 五、思维导图 一、赋值重载 这里的赋值重载就是直接利用交换函数进行把传参生成的临时数据和需要…

IDEA中的Debug功能介绍

说明:本文介绍IDEA中的Debug功能,基于2023.2(Ultimate Edition)版本 简单介绍 首先,在程序需要停止的所在行号上,鼠标左键,可设置一个断点,是一个红色圆点标志,表示程序…

2023年下半年中级软件设计师上午真题及答案解析

01 02 03 04 05 06 07 08 09 10 篇幅有限,私我获取免费完整 pdf文件

php反序列化题目

[NewStarCTF 公开赛赛道]UnserializeOne 分析代码,最终需要调用到 file_get_contents 即可获得flag 从后往前分析 触发 __invoke 需要 以调用函数的方式调用一个对象 可以找到Start类 里的__isset中可以将类当作函数调用 所以需要调用到 __isset 就需要 isset()…

Steam上线真人乙游,女性玩家还愿意买单吗?

Steam上线了一款真人乙游《糟糕!他们太爱我了怎么办?》(以下简称《糟糕!)。 乍一听这个游戏名,似乎和《完蛋!我被美女包围了!》有异曲同工之妙,事实也确实如此&#xff…

实现通讯录(顺序表版本)

一、功能要求 (1)⾄少能够存储100个⼈的通讯信息 (2)能够保存⽤⼾信息:名字、性别、年龄、电话、地址等 (3)增加联系⼈信息 (4)删除指定联系⼈ (5&#…

国内:深圳交通流量数据集

数据来源:深圳政府数据开放平台(深圳市政府数据开放平台),这个官网上还有其他类数据集,值得收藏!!! 数据集介绍:宝安区-G4高速西乡大道入口车流量统计 第一行每列的标题…

什么是超导悬浮?工作原理是什么?

某些材料在冷却到某个温度(也称为“临界温度”)以下时会完全失去电阻。 1910 年,一位名叫 Heike Kamerlingh Onnes 的荷兰物理学家发现了这一现象。他注意到低于一定温度时电阻突然下降,然后他大胆地声称发现了一种新的物质状态&a…

字符串处理

读取 先定义: char ch[100];string s; cin>>s或cin>>ch以空格或换行符结束gets(ch);//gets只能读字符数组,不能直接读字符串stringgets和getline会把第一次出现的换行符及先前的字符串读进去(包括空格)&#xff0…

利用Flutter框架实现iOS应用的跨平台发布策略

本文探讨了使用Flutter开发的iOS应用能否上架,以及上架的具体流程。苹果提供了App Store作为正式上架渠道,同时也有TestFlight供开发者进行内测。合规并通过审核后,Flutter应用可以顺利上架。但上架过程可能存在一些挑战,因此可能…

【Linux】正则表达式实验操作实例

正则表达式是一种强大的工具,用于在文本中查找、匹配和替换特定的字符串模式。 实验目的 掌握正则表达式的表达方式掌握grep/egrep命令的用法掌握sed 命令的用法掌握awk命令的用法 正则表达式 实验目的实验内容实验过程创建grep文件来进行如下操作用sed命令完成下列…

HAL STM32 定时器PWM DMA输出方式

HAL STM32 定时器PWM DMA输出方式 🧨遗留问题:当配置RCR重复计数器,配置为2时,在定义了3组PWM参数情况下,只能输出第二组参数的PWM波形。(HAL_TIM_PWM_Start_DMA(&htim1, TIM_CHANNEL_1, aCCValue_Buff…

Java中网络编程,Junit单元测试详解

文章目录 软件结构C/S结构B/S结构 概述三要素IP (银行的位置)端口 (银行中某个柜台号)协议 (填写取款单的规则)TCP通信程序TCP通信原理客户端发送数据服务端接收数据过程图三次握手 Junit单元测试概述常见的注解使用断言概述使用 软件结构 C/S结构 客户…

怀俄明探空站数据解算PWV和Tm

1. Matlab 获取代码可关注公众号WZZHHH回复(怀俄明探空站数据解算PWV和Tm),或者咸鱼关注:WZZHHH123 怀俄明探空站数据解算PWV和Tm: 有关 Matlab 获取代码可关注公众号WZZHHH回复(怀俄明多线程下载&#…

mysql_secure_installation初始化数据库报Access denied

使用mysql_secure_installation配置时出错: 可能输入密码错误,重新复制,粘贴密码。 或者: 登录mysql,设置密码,然后再设置权限。 mysql -u root -p [输入密码] sql>set passwordpassword("newPa…

数据同步工具datax安装配置与示例

文章目录 一、部署步骤1、jdk环境2、python环境步骤一:安装方式一:官网下载安装包方式二:brew命令安装 步骤二:配置环境变量步骤三:验证 3、maven环境(可选) 二、下载安装datax1、下载datax源码…