搭建react+ant design pro+umi 项目框架

一、 写本文的原因

我搭建react+antd+umi这个框架的原始资料主要是来源于(React+Umi4从零快速搭建中后台系统保姆级记录教程(一、项目创建及初始化))

而我写这篇文章的本意就是用来记录我用搭建时候的步骤汇总。

二、 npm和node版本

        我本地的npm 版本是:9.6.7

        

        我本地的node版本是:16.15.1

        

        并且我本地安装了yarn,而项目搭建的时候有使用到了yarn(这个看个人情况是否安装)。

        
        yarn 安装方式(安装的是全局的): npm install -g yarn

三、 开始搭建

        这里一共有3种搭建方式,方法一和方法二搭建出来的效果图是一样的,仅限于一个框架。而方法三搭建出来跟官网例子一样,有登录界面,并自带很多导航菜单例子,相对而言更完善。所以,可以根据需要来选择搭建方式。

1. 方法一:

        原始资料的搭建方式是使用 : npx create-umi@latest

安装成功后,使用npm start dev 将项目运行起来:

2. 方法二:

        如果上面那种方式安装不了,报错到自己不知道怎么解决,那就使用这种方法试试(我最开始就是用上面方法没安装好,才试了如下方法)。运行命令:npm create umi

 安装成功后,使用yarn start dev 将项目运行起来 :

3. 备注:

        以上两种方式安装都可以,第二种方式在后面选择的时候我选择了yarn安装。安装方式影响不大,看个人喜欢。但是值得注意的是,假如你用了yarn安装失败,想要再重新安装一次,那么重新安装的时候也只能使用yarn,因为npm和yarn在同一个项目中不能混用。除非你把原始文件夹删的干干净净后再重新安装。两种方式的运行效果都是一样的。

4. 路由配置

(1)方法一和方法二的说明

      从项目文件中内容可以看出,项目原始路由配置是在根目录的.umirc.ts 文件中,但是对我们来说,这样好似不太合理,所以,我们就将路由配置文件重新换个地方。

(2)配置方式更改

        (1) 在项目根目录下创建一个config文件夹,并在里面创建config.ts文件。

        (2)再把.umirc.ts 文件中的内容全部复制到config.ts文件中,并保存。

        (3) 删除原来的路由配置文件:.umirc.ts 文件(因为.umirc.ts优先级较高,如果这个文件不删,那么默认就会读取这个文件内的内容)。

        (4) 如果这是一个大项目,并且有很多页面,那么,这里可以将路由配置单独提出来写到一个文件中。例如,我在config文件夹下新增一个routes.ts文件,将路由配置部分挪过去,并在config.ts中引用routes.ts中的路由配置。

3. 方法三:

(1) 效果图

        我们先看最终效果图,可以看到与方法一和方法二的区别在于左侧菜单、页面颜色配置等。 

(2)搭建方式

         1)先运行命令,进行全局安装 :npm i @ant-design/pro-cli -g

               备注: 这里使用全局安装是为了以后创建此类项目可以用  pro create  XXX 快速创建,而不用再次安装ant-design/pro-cli -g ,所以接下来就使用此命令创建项目。

        2)在运行命令进行项目创建: pro create myProject

                ① 运行命令后要选择安装umi版本。这里我安装的是umi3。

                

                ② 然后选择安装的脚手架,我这里选择的是complete 完整的。

                

        ③ 然后就等它自动安装完成。

        ​​​               ​​​​​​ 

        ④  然后进入刚刚创建的项目文件夹,进行初始化操作(最好用管理员权限去操作,否则可能初始化不成功)。初始化操作可以使用npm和yarn两种。我使用的是yarn。

        

        ⑤ 依赖包安装后,就可以运行起来了(我用的是yarn),页面就是效果图上的样子。 

     

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

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

相关文章

Nginx快速入门:实现企业安全防护|nginx部署https,ssl证书(七)

0. 引言 之前我们讲到nginx的一大核心作用就是实现企业安全防护,而实现安全防护的原理就是通过部署https证书,以此实现参数加密访问,从而加强企业网站的安全能力。 nginx作为各类服务的统一入口,只需要在入口处部署一个证书&…

解决Maven找不到依赖的问题

如果经过Reload Maven项目,清除Idea缓存,甚至重启Idea等方法都解决不了Dependency xxx not found的问题,不妨试试手动安装。 1. 进入maven仓库,搜索自己需要的对应版本的依赖。 2. 点击下图红框jar图标下载对应的jar包&#xff0c…

【K8S基础】-k8s的核心概念控制器和调度器

Kubernetes是一个开源的容器编排平台,旨在简化和自动化容器化应用程序的部署、扩展和管理。它提供了一个强大的基础设施来管理容器化应用程序的生命周期,并确保它们在整个集群中高效运行。 Kubernetes的核心概念包括集群、节点、Pod、控制器、调度器等。…

lv13 环境搭建之内核编译 4

一、开发板运行Linux 1. 网线连接开发板和主机 2. ubuntu下拷贝uImage、exynos4412-fs4412.dtb两个文件到/tftpboot目录下cd ~/fs4412cp uImage exynos4412-fs4412.dtb /tftpboot 3. rootfs.tar.xz解压到/opt/4412sudo tar xvf rootfs.tar.xz -C /opt/4412sudo chmod 777 /opt…

软件测试面试八股文——基础篇

5)错误推测法:是基于经验和直觉推测程序中所有可能存在的各种错误,从而有针对性的设计测试用例的方法 6)正交实验法 7)判定表法 8)测试大纲法 3、提交缺陷的八大要素 1)缺陷编号&#xff1a…

2023.12.24 关于 Redis 中 String 类型内部编码和应用场景

目录 String 类型内部编码 3 种内部编码方式 String 类型应用场景 Cache 缓存 键名命名规则 计数(Counter) 共享会话(Session ) 手机验证码 总结 String 类型内部编码 3 种内部编码方式 int:用来表示 64 位 —…

智能优化算法应用:基于食肉植物算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于食肉植物算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于食肉植物算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.食肉植物算法4.实验参数设定5.算法结果6.…

详细学习Java注解Annotation、元注解(通俗易懂,一学就会)

概述 底层原理 自定义注解 示例代码: 1. 2.只有属性名为value的才可以,java对它进行了标识,如果是其他别名如value1是不行的 3.多个属性,必须用键值对形式,不能少写,也不能多写,除非有default修…

嵌入式中一文搞定C语言数据结构--跳表

大家好,今天分享一篇C语言数据结构相关的文章--跳表。 1. 什么是跳表 跳表是 链表 索引 的一种数据结构 ,是以空间换取时间的方式,关于跳表参考: https://baike.baidu.com/item/跳表/22819833?fraladdin 2. 跳表概念 跳表在原有链表的基…

【算法】利用双指针法解决算法题(C++)

文章目录 1. 前言2. 双指针法引入283.移动零 3. 使用双指针法解决算法题1089.复写零202.快乐数11.盛最多水的容器[611.有效三角 形的个数](https://leetcode.cn/problems/valid-triangle-number/description/)LCR179.查找总价格为目标值的两个商品15.三数之和18.四数之和 1. 前…

redis基本用法学习(C#调用StackExchange.Redis操作redis)

StackExchange.Redis是基于C#的高性能通用redis操作客户端,也属于常用的redis客户端之一,本文学习其基本用法。   新建Winform项目,在Nuget包管理器中搜索并安装StackExchange.Redis,如下图所示:   StackExchange.…

开发利器——C语言必备实用第三方库

​ 对于广大C语言开发者来说,缺乏类似C STL和Boost的库会让开发受制于基础库的匮乏,也因此导致了开发效率的骤降。这也使得例如libevent这类事件库(基础组件库)一时间大红大紫。 今天,码哥给大家带来一款基础库&#…

JavaScript进阶(事件+获取元素+操作元素)

目录 事件基础 事件组成 执行事件的步骤 获取元素 根据ID获取元素 根据标签名获取元素 获取ol中的小li 类选择器(html5新增的I9以上支持) 获取body和html 操作元素 innerText和innerHtml 表单标签 样式属性操作 操作元素总结 事件基础 事…

JY901S 9轴姿态角度传感器模块

JY901S 9轴姿态角度传感器模块 JY901S 简介模块特性引脚说明IIC通讯IIC读写寄存器代码示例 JY901S 简介 模块集成高精度的陀螺仪、加速度计、地磁场传感器,采用高性能的微处理器和先进的动力学解算与卡尔曼动态滤波算法,能够快速求解出模块当前的实时运…

基于Python的新能源汽车销量分析与预测系统

温馨提示:文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 基于Python的新能源汽车销量分析与预测系统是一个使用Python编程语言和Flask框架开发的系统。它可以帮助用户分析和预测新能源汽车的销量情况。该系统使用了关系数据库进行数据存储,并…

MATLAB信号处理与应用 读书笔记 一

完成了基本操作,今天组数也正常,需要对应解决fsctrl文件中的信号处理相关 重点关注4傅里叶变换,6FIR滤波器,10信号处理中的应用字符的链接[aa,bb]; N18;N216; n0:N-1;k10:N1-1;k20:N2-1; w2*pi*(0:2047)/2048; Xw(1-…

【并发设计模式】聊聊 基于Copy-on-Write模式下的CopyOnWriteArrayList

在并发编程领域,其实除了使用上一篇中的属性不可变。还有一种方式那就是针对读多写少的场景下。我们可以读不加锁,只针对于写操作进行加锁。本质上就是读写复制。读的直接读取,写的使用写一份数据的拷贝数据,然后进行写入。在将新…

CSS5 | CSS滑动门左扇与右扇图片重叠问题解决

本文中所使用的滑动门背景图片是自己用微软相册手工切的,没用ps,所以凑乎看吧 首先放出一张目标效果也是最终完成图 下面说问题 CSS推拉门原理 按原理来说,就是两个行内块前后站一行,然后前面的a标签和span标签分别是推拉门素材…

TCP 三次握手:四次挥手

TCP 三次握手/四次挥手 TCP 在传输之前会进行三次沟通,一般称为“三次握手”,传完数据断开的时候要进行四次沟通,一般称为“四次挥手”。 数据包说明 源端口号( 16 位):它(连同源主机 IP 地址…

验证码服务使用指南

验证码服务使用指南 1 部署验证码服务 1.1 基础环境 Java 1.8 Maven3.3.9 1.2 安装Redis 参考“Redis安装指南” 1.3 部署验证码服务 1.3.1 下载源码 使用git从远程下载验证码服务代码(开源)。 1.3.2 使用idea打开项目 使用idea打开上一步下载的sailing目录&#xf…