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

2024-01-21 15:28

本文主要是介绍一、用户管理中心——前端初始化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、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.chinasem.cn/article/629973

相关文章

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Java数组初始化的五种方式

《Java数组初始化的五种方式》数组是Java中最基础且常用的数据结构之一,其初始化方式多样且各具特点,本文详细讲解Java数组初始化的五种方式,分析其适用场景、优劣势对比及注意事项,帮助避免常见陷阱... 目录1. 静态初始化:简洁但固定代码示例核心特点适用场景注意事项2. 动态初始化:灵活但需手动管理代

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

QT进行CSV文件初始化与读写操作

《QT进行CSV文件初始化与读写操作》这篇文章主要为大家详细介绍了在QT环境中如何进行CSV文件的初始化、写入和读取操作,本文为大家整理了相关的操作的多种方法,希望对大家有所帮助... 目录前言一、CSV文件初始化二、CSV写入三、CSV读取四、QT 逐行读取csv文件五、Qt如何将数据保存成CSV文件前言

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行