通过Umijs从0到1搭建一个React项目

有一阵时间没写react了,今天通过umi搭建一个demo项目复习一下react;umi是一个可扩展的企业级前端应用框架,在react市场中还是比较火的一个框架。

Umi官方文档:Umi 介绍 (umijs.org)

一、构建项目。

1、安装包管理工具。

官方推荐使用pnpm,我也一直在使用pnpm,如果没有请执行以下命令自行安装。

npm install -g pnpm

2、构建项目。

根据官方文档的说明,我们在已经创建好的项目文件下打开终端,输入以下命令创建umi项目

pnpm dlx create-umi@latest

根据提示一步一步选择想要的模板类型即可,我选择了Simple App,pnpm,以及taobao镜像源。

3、启动项目

上面执行完成后,我们需要启动项目,直接输入以下命令即可启动项目

pnpm start

点击链接即可看到我们以及搭建好的项目了。

二、引入依赖插件

umi的项目创建好就会自动下载好node_modules依赖包,但是像UI库这类的还是没有的,我们还是需要去手动安装下载。

1、UI组件库。

我以antd为例进行下载,执行以下命令。

pnpm install antd

安装完成后直接在页面里导入antd组件即可,非常简单,你也可以使用umi插件里的antd

2、网络请求

你可以直接下载请求库,例如axios;但这里可以使用umi官方的插件,在插件里也有请求插件,执行以下命令下载插件。

详细文档:请求 (umijs.org)

pnpm add -D @umijs/plugins

引入插件,打开.umirc.ts或者config.ts(可以先看第三部分),将对应的插件引入,我这里直接引入了三个插件,antd,request,model

//config.tsimport { defineConfig } from "umi";
import routers from "./routers";
const { UMI_ENV } = process.env; // 打包环境变量
export default defineConfig({routes: routers,npmClient: 'pnpm',publicPath: "/",plugins:['@umijs/plugins/dist/antd', '@umijs/plugins/dist/request','@umijs/plugins/dist/model'],antd: {},model: {},request: {},
});
console.log(UMI_ENV)

使用

import {request} from '@umijs'let url = '请求地址'
let options ={method: 'get',params: {},url: url
}
export const requestFun = async () =>{return await request(url,options)
}

3、状态管理(数据共享)

一般来说在react中经常使用redux进行状态管理,但是在umi中推荐一种数据流model模块化管理。

详细文档:数据流 (umijs.org)

在plugins中导入'@umijs/plugins/dist/model'插件,在项目中创建一个models目录,在目录下创建组件对应的一个文件,例子如下

在对应的文件下用useModel引入model的名字,就可以访问model里的数据和方法了。

三、多环境配置。

在开发过程中,我们需要多种环境,开发环境、测试环境、以及生产环境等,那么则需要我们进行配置不同的环境。

首先我们在目录中找到.umirc.ts文件,这个文件是umi的环境配置文件,我们希望可以进行多环境管理,则这个文件就不需要了,我们需要在根目录下创建config目录创建config配置文件,因为config配置文件没有.umirc.ts优先级高,则需要将.umirc.ts删掉。

1、创建config目录。

在目录下创建config.ts、config.dev.ts、config.pro.ts、routers.ts文件

//config.tsimport { defineConfig } from "umi";
import routers from "./routers";
const { UMI_ENV } = process.env; // 打包环境变量
export default defineConfig({routes: routers,npmClient: 'pnpm',publicPath: "/",
});
console.log(UMI_ENV)
//config.dev.tsimport { defineConfig } from "umi";
const { UMI_ENV } = process.env; // 打包环境变量
export default defineConfig({define:{UMI_ENV:UMI_ENV,BASE_SERVER:'开发环境'}
});
//config.pro.tsimport { defineConfig } from "umi";
const { UMI_ENV } = process.env; // 打包环境变量
export default defineConfig({define:{UMI_ENV:UMI_ENV,BASE_SERVER:'生产环境'}
});
//routers.tsconst routes=[{ path: "/", component: "index" },{ path: "/docs", component: "docs" },
]
export default routes

2、编写执行脚本

在编写脚本之前,我们还需要下载cross-env环境变量管理工具

pnpm install cross-env -D

然后在package.json文件中编写执行脚本:

  "scripts": {"dev": "cross-env UMI_ENV=dev umi dev","build": "cross-env UMI_ENV=pro umi build","postinstall": "umi setup","setup": "umi setup","start": "npm run dev"},

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

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

相关文章

力扣题解(设计跳表)

1206.设计跳表 已解答 不使用任何库函数,设计一个 跳表 。 跳表 是在 O(log(n)) 时间内完成增加、删除、搜索操作的数据结构。跳表相比于树堆与红黑树,其功能与性能相当,并且跳表的代码长度相较下更短,其设计思想与链表相似。 …

【观成科技】Websocket协议代理隧道加密流量分析与检测

Websocket协议代理隧道加密流量简介 攻防场景下,Websocket协议常被用于代理隧道的搭建,攻击者企图通过Websocket协议来绕过网络限制,搭建一个低延迟、双向实时数据传输的隧道。当前,主流的支持Websocket通信代理的工具有&#xf…

构建高精度室内定位导航系统,从3DGIS到AI路径规划的全面解析

室内定位导航系统是一种利用多种技术实现室内精准定位和导航的智能系统,即便没有卫星信号,也能实现精准导航。维小帮室内定位导航系统是基于自研的地图引擎与先进定位技术,结合智能路径规划算法,解决了人们在大型复杂室内场所最后…

【深度学习】图形模型基础(6):模型优化理论

1.引言 在之前的讨论中,我们构建了一个理论模型来表达最优决策规则,这是建立在我们对数据的概率模型有充分理解的基础上的。相对地,经验风险最小化(Empirical Risk Minimization, ERM)策略则在缺乏精确概率模型的情况…

Java语言程序设计——篇三(1)

选择结构 概述选择单分支if语句例题讲解 双分支if-else语句例题讲解 条件运算符多分支的if-else语句例题讲解 嵌套的if语句例题讲解 switch语句结构例题讲解代码演示运行结果 概述 Java中的控制结构,包括: 1、选择结构( if、if-else、switch ) 2、循环结…

仕考网:非应届生可以参加公务员考试吗?

往届生有资格参加国家公务员考试。根据《公务员录用规定》,只要满足一系列资格条件,就符合报考资格。 1、年龄在18到35岁之间。 2、具备良好的品德,身体健康且心理素质稳定,拥有拟任职位所需的工作能力。 3、至少为大学专科以上…

【排序 - 归并排序】

归并排序(Merge Sort)是一种高效的排序算法,基于分治(Divide and Conquer)策略。它将待排序数组分成两个较小的子数组,分别对它们进行排序,然后将排好序的子数组合并成一个整体有序的数组。归并…

愚人杯的RE题

easy_pyc pyc反编译成py文件 # uncompyle6 version 3.9.1 # Python bytecode version base 2.7 (62211) # Decompiled from: Python 3.11.8 (tags/v3.11.8:db85d51, Feb 6 2024, 22:03:32) [MSC v.1937 64 bit (AMD64)] # Embedded file name: enpyc.py # Compiled at: 2023…

html5——列表、表格

目录 列表 无序列表 有序列表 自定义列表 表格 基本结构 示例 表格的跨列 表格的跨行 列表 无序列表 <ul>【声明无序列表】 <li>河间驴肉火烧</li>【声明列表项】 <li>唐山棋子烧饼</li> <li>邯郸豆沫</li> <l…

opencv实现目标检测功能----20240704

早在 2017 年 8 月,OpenCV 3.3 正式发布,带来了高度改进的“深度神经网络”(dnn)模块。 该模块支持多种深度学习框架,包括 Caffe、TensorFlow 和 Torch/PyTorch。这次我们使用Opencv深度学习的功能实现目标检测的功能,模型选用MobileNetSSD_deploy.caffemodel。 模型加载…

机器学习与深度学习:区别与联系(含工作站硬件推荐)

一、机器学习与深度学习区别 机器学习&#xff08;ML&#xff1a;Machine Learning&#xff09;与深度学习&#xff08;DL&#xff1a;Deep Learning&#xff09;是人工智能&#xff08;AI&#xff09;领域内两个重要但不同的技术。它们在定义、数据依赖性以及硬件依赖性等方面…

空中交通新动能!2024深圳eVTOL展动力电池展区核心内容抢先看!

空中交通新动能&#xff01;2024深圳eVTOL展动力电池展区核心内容抢先看&#xff01; 关键词&#xff1a;2024深圳eVTOL展 动力电池 高能量密度电池 高性能电池材料 作为2024深圳eVTOL展重要组成部分&#xff0c;2024深圳eVTOL动力电池展将于9月23-25日在深圳坪山燕子湖国际会…

基于JAVA+SpringBoot+Vue的社区普法平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 社区普法平台旨在为社…

Python程序封装成Windows服务实践

1. WinSW 工具概述 WinSW&#xff08;Windows Service Wrapper&#xff09;是一个轻量级的、开源的工具&#xff0c;用于将任何可执行文件&#xff08;包括exe、jar、脚本文件等&#xff09;包装成一个Windows服务。这意味着&#xff0c;原本设计为命令行应用或需要手动启动的…

内存条必备知识

什么是内存条&#xff1f; 内存条&#xff1a;又称为随机存取存储器&#xff08;RAM&#xff09;&#xff0c;也叫主存&#xff0c;是与CPU直接交换数据的内部存储器。它可以随时读写&#xff08;刷新时除外&#xff09;&#xff0c;而且速度很快&#xff0c;通常用来暂时存储…

了解劳动准备差距:人力资源专业人员的战略

劳动准备差距是一个紧迫的问题&#xff0c;在全球人事部门回应&#xff0c;谈论未开发的潜力和错过的机会。想象一下&#xff0c;人才和需求之间的悬崖之间有一座桥&#xff0c;这促使雇主思考&#xff1a;我们是否为员工提供了足够的设备来应对未来的考验&#xff1f; 这种不…

碳化硅陶瓷膜的基本性能

碳化硅陶瓷膜作为一种由碳化硅(SiC)材料制成的高温陶瓷膜&#xff0c;以其独特的性能在多个领域得到了广泛的应用。以下是碳化硅陶瓷膜的基本性能&#xff0c;详细阐述如下&#xff1a; 一、电绝缘性 碳化硅陶瓷膜通常具有较好的电绝缘性&#xff0c;这一特性在高温环境中尤为重…

牛刀小试--下三角对称矩阵压缩存储

解析博客: 矩阵存储和特殊矩阵的压缩存储_n阶对称矩阵压缩-CSDN博客 函数功能: //为N阶下三角矩阵初始化成的一维数组分配空间 void Init_triangular_matrix(int *&matrix); //返回二维下三角矩阵的值(压缩存取) int get_Value_triangular_matrix(int matrix[],int x,int …

物流数据分析成本利润计算软件,佳易王物流货运单管理系统操作教程

前言&#xff1a; 物流数据分析成本利润计算软件&#xff0c;佳易王物流货运单管理系统操作教程 以下软件操作教程以&#xff0c;佳易王物流单统计分析软件为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 一、软件操作教程 1、佳易王物流货运…

数字人+展厅互动体验方案:多元化互动方式,拓宽文化文娱新体验

数字化创新已成为推动展厅可持续发展&#xff0c;创造全新消费体验&#xff0c;满足游客多元化需求的关键力量。 “数字人数字互动展厅”可以适应年轻一代的文化传播与多媒体互动新体验趋势&#xff0c;打造新生代潮玩聚集地&#xff0c;促进文化创意传播与互动体验场景创新&a…