一、用户管理中心——前端初始化

一、Ant Design Pro初始化

1.创建空文件夹

在这里插入图片描述

2.打开Ant Design Pro官网

在这里插入图片描述
在这里插入图片描述

3.打开终端进行初始化

在终端输入npm i @ant-design/pro-cli -g
在这里插入图片描述
在终端输入pro create myapp
选择umi@3
在这里插入图片描述
选择simple
在这里插入图片描述
项目创建成功后,在文件夹中出现myapp
在这里插入图片描述

4.安装依赖

使用vscode打开项目
在这里插入图片描述
打开终端,执行npm install -g yarn安装yarn
在这里插入图片描述

打开终端,执行yarn,自动下载相关依赖
在这里插入图片描述
完成
在这里插入图片描述

5.运行项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
到这里初始化就成功了

tip:刚开始安装的是最新版的node.js,执行yarn报一大堆错误,后面换了旧版的node.js就可以了,遇到相同问题的小伙伴可以试一下安装旧版的node.js

6.ui插件

执行yarn add @umijs/preset-ui -D
在这里插入图片描述
若成功,右下角增加一个入口
在这里插入图片描述
添加模板到项目中
在这里插入图片描述
待解决:添加不成功,重新启动后内容加载不出来
在这里插入图片描述

二、项目瘦身

1.移除国际化

国际相关代码
在这里插入图片描述
运行该指令,移出国际化
在这里插入图片描述

2.解读文件目录

config:项目配置
routes:路由,定义访问哪个页面
在这里插入图片描述
mock:模拟后台数据
在这里插入图片描述
public:存放静态资源
在这里插入图片描述
components:存放组件
pages:存放页面
在这里插入图片描述
e2e:测试,可删除
在这里插入图片描述
删除
在这里插入图片描述
app.tsx:项目入口
global.less:全局样式文件
global.tsx:全局脚本文件
在这里插入图片描述
test 删除
在这里插入图片描述
.editorconfig 编辑器配置l
.eslintrc.js 检查js是否规范
.prettierrc.js 美化代码
.stylelintrc.js 检查css代码
jest.config.js 可删除
playwright.config.ts 测试工具,可删除
在这里插入图片描述
重新启动项目,启动成功则瘦身完成
在这里插入图片描述

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

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

相关文章

STL中的stack、queue以及deque

目录 一、关于deque容器(双端队列) 1、deque的底层实现 2、deque的缺点 3、关于stack与squeue默认使用deque容器 二、stack简介 1、stack的成员函数(接口) 2、stack的模拟实现 三、queue简介 1、queue的成员函数&#xff08…

安全防御-基础认知

目录 安全风险能见度不足: 常见的网络安全术语 : 常见安全风险 网络的基本攻击模式: 病毒分类: 病毒的特征: 常见病毒: 信息安全的五要素: 信息安全的五要素案例 网络空间&#xff1a…

docker配置阿里云镜像加速器

1、阿里云镜像加速器地址获取&#xff1a; 2、配置ECS镜像加速器&#xff0c;重启docker mkdir -p /etc/docker tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": ["https://2lg9kp55.mirror.aliyuncs.com"] } EOF sudo systemctl daemon-…

谈判(贪心算法)

题目 import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Scanner;public class Main {public static void main(String[] args) { Scanner sc new Scanner(System.in);int n sc.nextInt();sc.nextLine();List<Integ…

H3C交换机S6850配置M-LAG三层转发

正文共&#xff1a;1999 字 30 图&#xff0c;预估阅读时间&#xff1a;3 分钟 前面提到M-LAG是一种跨设备链路聚合技术&#xff0c;将两台物理设备在聚合层面虚拟成一台设备来实现跨设备链路聚合&#xff0c;从而提供设备级冗余保护和流量负载分担。 之前已经做了DRNI的三层转…

微前端小记

步骤 将普通的项目改造成 qiankun 主应用基座&#xff0c;需要进行三步操作&#xff1a; 1. 创建微应用容器 - 用于承载微应用&#xff0c;渲染显示微应用&#xff1b; a. 设置路由routeb.主应用的布局包括&#xff1a; 主应用菜单&#xff0c;用于渲染菜单主应用渲染区域&a…

ubuntu安装vm和Linux

1、下载Ubuntu Index of /releaseshttps://old-releases.ubuntu.com/releases/ 2、下载VMware 官方正版VMware下载&#xff08;16 pro&#xff09;&#xff1a;https://www.aliyundrive.com/s/wF66w8kW9ac 下载Linux系统镜像&#xff08;阿里云盘不限速&#xff09;&#xff…

node.js如何将webp转jpg图片

在Node.js中&#xff0c;可以使用一些库来实现将WebP图像转换为JPEG。一个常用的库是sharp&#xff0c;它是一个快速、高效的图像处理库。以下是一个简单的Node.js脚本示例&#xff0c;演示如何使用sharp库将WebP转换为JPEG&#xff1a; 首先&#xff0c;确保已经安装了sharp库…

Access 中SQL的例题

SQL4-18:查找并显示教师表中所有的记录 SELECT * FROM 教师; SQL4-19:查找并显示教师表中姓名、学历和工作时间的记录 SELECT 姓名,学历,工作时间 FROM 教师; SQL4-20:查找并显示教师表中1990年参加工作的男教师&#xff0c; 并显示教师姓名、学历&#…

webpack 核心武器:loader 和 plugin 的使用指南(上)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Twisted Circuit洛谷绿题题解

Twisted Circuit 题面翻译 读入四个整数 0 0 0 或者 1 1 1&#xff0c;作为如图所示的电路图的输入。请输出按照电路图运算后的结果。 感谢PC_DOS 提供的翻译 题目描述 输入格式 The input consists of four lines, each line containing a single digit 0 or 1. 输出格…

读书笔记之《万物起源》:宇宙与人类的极简史

《万物起源&#xff1a;从宇宙大爆炸到文明的兴起》讲述了从大爆炸直到今日&#xff0c;约140亿年间所有重大事物的起源&#xff0c;依次覆盖了量子力学&#xff0c;天体物理学&#xff0c;化学&#xff0c;行星科学&#xff0c;地质学&#xff0c;生物学和人类历史等等学科。 …

系统学英语 — 句法 — 常规句型

目录 文章目录 目录5 大基本句型复合句型主语从句宾语从句表语从句定语从句状语从句同位语从句补语从句 谓语句型 5 大基本句型 主谓&#xff1a;主语发出一个动作&#xff0c;例如&#xff1a;He cried.主谓宾&#xff1a;we study English.主系表&#xff1a;主语具有某些特…

08- OpenCV:形态学操作(膨胀与腐蚀 、提取水平与垂直线)

目录 前言 一、膨胀&#xff08;Dilation&#xff09;与 腐蚀&#xff08;Erosion&#xff09; 二、形态学操作 1、开操作&#xff08;Opening&#xff09; 2、闭操作&#xff08;Closing&#xff09; 3、形态学梯度&#xff08;Morphological Gradient&#xff09; 4、…

Spring成长之路—Spring MVC

在分享SpringMVC之前&#xff0c;我们先对MVC有个基本的了解。MVC(Model-View-Controller)指的是一种软件思想&#xff0c;它将软件分为三层&#xff1a;模型层、视图层、控制层 模型层即Model&#xff1a;负责处理具体的业务和封装实体类&#xff0c;我们所知的service层、poj…

5G_射频测试_参考规范(一)

参考规范&#xff1a; • Base Station (BS) conformance testing&#xff08;重点limitation&#xff09;Directory Listing /ftp/Specs/archive/38_series/38.104 (3gpp.org) • Conducted conformance testing&#xff08;传导测试&#xff09;3GPP 38.141-1 6.7 Tran…

跟着pink老师前端入门教程-day08

二十一、案例前期铺垫 21.1 CSS属性书写顺序&#xff08;重点&#xff09; 建议遵循以下顺序&#xff1a; 1. 布局定位属性&#xff1a;display / position / float / clear / visibility / overflow&#xff08;建议 display 第一个写&#xff0c;毕竟关系到模式&#xff…

UI -- React

React 模板 React UI package.json同级components/slButton/element.jsx import React from react;const el ({ text, onClick }) > {return (<button onClick{onClick}>{text}</button>); };export default el;components/function.js export const ceshi…

LLM之RAG实战(十九)| 利用LangChain、OpenAI、ChromaDB和Streamlit构建RAG

生成式人工智能以其创造与上下文相关内容的能力彻底改变了技术&#xff0c;开创了人工智能可能性的新时代。其核心是检索增强生成&#xff08;RAG&#xff09;&#xff0c;将信息检索与LLM相结合&#xff0c;从外部文档中产生智能、知情的响应。 本文将深入研究使用ChromaDB构建…

阿里云GPU服务器ECS实例规格详细说明

阿里云GPU服务器提供GPU加速计算能力&#xff0c;GPU卡支持A100、V100、T4、P4、P100、A10等&#xff0c;NVIDIA V100&#xff0c;GPU实例规格是什么意思&#xff1f;如搭载NVIDIA V100的ecs.gn6v-c8g1.2xlarge、A10卡ecs.gn7i-c32g1.8xlarge、T4卡ecs.gn6i-c4g1.xlarge、P4卡e…