搭建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,一经查实,立即删除!

相关文章

云卷云舒:面向业务的智能运维(上)

1、BAIOPS-业务智能运维 智能运维(AIOps-Algorithmic IT Operations基于算法的IT运维)是人工智能技术在IT运维领域的运用,引用Gartner 的报告的一段话“到2020年,将近50%的企业将会在他们的业务和IT运维方面采用AIOps&#xff0c…

GBASE南大通用集群负载均衡

如果我们需要将连接请求分摊到集群的每个节点上时,可以使用集群负载均衡功能(该功能需要 GBASE南大通用 ADO.NET 8.3.81.53 及以上版本)。集群负载均衡 功能与集群高可用功能都属于客户端负载均衡解决方案。使用GBASE南大通用此功能时&#…

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

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

doris基本操作,03-导入数据-Broker Load

简述 Broker load 是异步导入方式,支持的数据源取决于 Broker 进程支持的数据源。 因为 Doris 表里的数据是有序的,所以 Broker load 在导入数据的时是要利用doris 集群资源对数据进行排序,相对于 Spark load 来完成海量历史数据迁移&#…

解决Maven找不到依赖的问题

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

DP进阶之路——爬楼梯

爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 示例 1: 输入:n 2 输出:2 解释:有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2&am…

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

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

求职小程序列表基础配置-移动端通用列表模块配置教程(1)

求职小程序列表基础配置-移动端通用列表模块配置教程(1) 移动端通用列表页开发指南 准备工作 注册多八多AIIDE账号: 访问多八多AIIDE官网并注册新账号。完成邮箱和手机号的验证。 创建移动应用: 登录后,在工作台新建一个移动应用。填写应用名称,选择“…

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这类事件库(基础组件库)一时间大红大紫。 今天,码哥给大家带来一款基础库&#…

使用 Privoxy 实现对多域名的定向转发

需求与思路 内网一台主机想要访问公网的两个不同站点, 想要实现访问两个站点时表现出不同的公网 IP 地址. 即在公网的站点服务器端看到的客户端 IP 是不同的. 思路是搭建两台具有不同公网 IP 的服务器, 分别安装配置 Privoxy 后进行串联, 并将其中一台作为主服务器暴露给内网…

操作系统期末复习资料

操作系统引论 计算机操作系统的功能是 。 A. 把源程序代码转换为目标代码 B. 实现计算机用户之间的相互交流 C. 完成计算机硬件与软件之间的转换 D. 控制、管理计算机系统的资源和程序的执行 010110011020100 D 010110021020101 操作系统是一组 。…

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

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