React+Umi+Dva+Antd后台管理系统——开篇搭环境

最新推荐文章于 2024-08-31 21:19:14 发布
最新推荐文章于 2024-08-31 21:19:14 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38927862/article/details/114205540
版权
本文介绍了如何在Windows 10环境下，利用create-umi搭建React、Umi、Dva和Ant Design的后台管理系统。首先，讲解了所需的环境配置，包括Node.js、Umi和Yarn的版本。接着，详细阐述了如何全局安装umi插件，以及通过create-umi创建项目，选择项目类型和安装依赖。最后，启动项目并展示成功运行的默认界面。
摘要由CSDN通过智能技术生成

一、搭建环境

1、环境简介

本文是基于Windows 10系统环境，进行安装和使用。

  • create-umi
  • Node v14.16.0
  • Umi 3.3.9
  • Yarn 1.22.10

2、全局安装umi插件

# umi
## 全局安装umi，并确保版本是2.0.0或以上
$ yarn global add umi

在这里插入图片描述

二、通过脚手架创建项目

1、介绍 create-umi

umi 通过 create-umi 提供脚手架能力，包含：

  • project，通用项目脚手架，支持选择是否启用 TypeScript，以及 umi-plugin-react 包含的功能
  • ant-design-pro，仅包含 ant-design-pro 布局的脚手架，具体页面可通过 umi block 添加
  • block，区块脚手架
  • plugin，插件脚手架
  • library&#
最低0.47元/天 解锁文章
潇旭55599
关注
专栏目录
admin:基于ts + umi + dva + antd + mock的后台管理系统
03-11
蚂蚁设计专业版 该项目已使用初始化。 遵循是如何使用的快速指南。 环境准备 安装node_modules ： npm install 或者 yarn 提供的脚本 Ant Design Pro提供了一些有用的脚本，可帮助您快速启动和构建Web项目，代码样式检查和测试。 package.json提供的脚本。 修改或添加其他脚本是安全的： 开始项目 npm start 建立项目 npm run build 检查代码样式 npm run lint 您还可以使用脚本自动修复某些皮棉错误： npm run lint:fix 测试码 npm test 更多的 您可以在我们的上查看完整文档。 并欢迎在我们的任何反馈。
独立开发者必备的29个开源React后台管理模板
zz_jesse的博客
07-25 5680
React Web应用程序开发管理后台可能非常耗时，这和设计所有前端页面一样重要。以下是收集的近几年顶级React.js管理模板列表。这些模板确实很有价值，使开发人员更容易构建应用程序后端的用户界面。此外，它们将帮助您完善网站的管理后台，并克服自己制作所有UI部分的一些技术挑战。您可以将这些管理仪表板模板用作骨架，并为您的网站创建自己的Web应用程序和仪表板。1.Endless - React A...
UMI复现基础环境安装配置全流程（一）——CUDA和cuDNN
最新发布
qq_28912651的博客
08-31 1018
首先安装Ubuntu22.04，此处不介绍。安装CUDA和cuDNN需要先后完成以下几步，注意先后顺序：nvidia-smi指令查看的是驱动版本的CUDA（CUDA Driver）。nvcc -V查看的是PyTorch等深度学习环境调用的版本CUDA（CUDA Toolkit）。这里只需要 CUDA Driver≥CUDA Toolkit即可。
基于React+antd的后台管理模板（可预览）
热门推荐
张致豪
08-05 9万+
自己利用业余时间，基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面，不涉及后台交互。 特点： 我用
react 权限管理与ant design pro 框架搭建
一起学习前端知识，一起成为前端开发工程师！
07-19 1589
如果选择了umi@3，还可以选择pro的模板，pro是基础模板，只提供了框架运行的基本内容，complete包含所有区块，不太适合当基础模板来进行二次开发。首先在框架中的登录下拉信息页面，通过接口获取不同权限串，并通过比较进行分类，其中的initialState是设置全局默认state的属性值。对于一个涉及多用户登录的项目，往往会涉及到权限管理以及设计，这篇blog通过antdesginpro框架进行讲解。招到路由页面，对需要设置页面权限的页面进行权限的access即可完成权限的管理。...
GitHub上9款美观大气的后台管理系统，基于但不限于vue、react、Angular、Bootstrap框架
念兮为美
08-26 3541
GitHub上9款美观大气的后台管理系统，基于但不限于vue、react、Angular、Bootstrap框架。比如vue-element-admin、D2Admin、Vue-admin-better、AdminLTE、Ant Desiong Pro等。
dva+umi+Ant Design的react项目 + java 前后端分离
杨小猪 的博客
01-18 3442
参考链接： Umi dva react的详细介绍：https://www.cnblogs.com/lucas27/p/9292058.html 附带参考：https://www.jianshu.com/p/69f13e9123d9
umi-dva-antd-mobile：基于umi + dva + antd-mobile快速构建H5 APP应用
02-06
umi-dva-antd-mobile 该项目主要以 + 为一体框架，以为UI组件库，包含完整的前端工程化实践。 部分代码及功能参考于 :clapping_hands:已经支持微信开发，相见分支。 目录结构 |-- config # umi 配置，包含路由，...
react-admin:全栈cms系统：前端基于umi+dva+antd，后端基于egg+mysql
05-30
React Admin 项目结构 cms-api => 后端项目目录 cms-front => 前端项目目录 dva => 熟悉dva.js umi => 熟悉umi.js dva_antd => 了解dva-cli + antd
umi-ts-app：umi3 + typescript + dva + react hooks快速构建管理系统
02-05
umi-ts-app技术栈：umi3 + react hooks + dva +打字稿+ antd该项目以为前端框架，以为UI组件库， 为项目数据流， 编写前端业务组件，以做为静态类型检查，包含完整的前端工程化实践。目录结构|-- config # 项目配置...
clinic-management-system:诊所管理系统（全栈），技术栈：前端：react + antd + umi + dva + ts后台：nodejs + eggjs + ts
03-11
《诊所管理系统：全栈开发详解》 诊所管理系统是一款基于现代前端和后端技术构建的高效、易用的软件工具，其主要目标是帮助诊所进行日常运营和管理。本系统采用全栈开发模式，将前端与后端紧密结合，提供了一套完整...
umi-dva-antd-mobile-starter:Umi3.js和Ant Design Mobile入门
04-29
umi-dva-antd-mobile-starter 开始使用Umi.js和Ant Design Mobile。入门安装依赖项。 yarn 启动开发服务器。 yarn start 精简生产。 yarn build 精打细算为发展而建设。 yarn dev执照麻省理工学院
umijs+Procomponents的高级布局搭建中后台管理系统框架（一）
lexie_0921的博客
09-05 556
本文只搭建了框架，没有其他的附带内容，教小白手把手搭建一个中后台的框架，和Procomponents的高级布局demo是一样的，因为自己在搭建的时候一直报错，各种奇怪的报错，所以一步一步记录下来。
最好的 6 款 React 后台管理系统模板和框架
蒋川@卡拉云
03-21 1万+
React admin框架繁多，在本文里我们介绍 React 下最好的 6 款后台系统，每款均严格测试后，整理它们的优缺点方便你来挑选。同时我们给出一些实用建议，帮你避免选型时不注意可能导致的埋坑。
记一次umi开发后台管理系统的基础使用
xiaocuige007的博客
03-22 7192
先介绍一个umi,阿里开源的一个企业级可插拔的react脚手架, umi相对比react官方推荐的脚手架更加的简单,更贴近vue-cli的使用感受,而本文仅仅介绍基础使用方法,高手请绕行 开发展示 仿叮咚买菜后台管理系统预览: http://dingdong-admin.nodebook.top/ 仿叮咚买菜 前台页面: http://dingdong.nodebook.top/ 叮咚买菜后台管理...
【商城后台管理系统】项目初始化（UmiJS）
io_123io_123的博客
05-31 1667
关于UmiJS运行时配置、如何使用Umi UI、Umi使用总结以及封装
基于react+umi+antDesgin的学生实训考勤管理系统
one的博客
09-17 874
#基于react+umi+antDesgin的学生实现考勤管理系统 1.本系统主要针对目前高校学生实训课程出勤管理和在线请假而设计的信息管理系统。 2.前端所用框架：React+umi+AntDesgin。 3.实现管理员对老师、学生、项目组的管理。老师对学生的作业审批、请假审批和考勤管理。 4.所用技术：本系统前端主要采用routes配置路由、umi-request请求数据、全局的错误拦截以及异常处理。 前端 登录页面 管理员界面 1.教师信息管理 新增教师 编辑教师信息 2.学生信息管理 同样
umi+dva+antd后台管理系统(3)---完整登录逻辑
王阿星的博客
01-08 4598
界面准备好啦，登录操作开始： 1. 回顾一下redux是什么 redux 是一个应用数据流框架，主要解决了组件间状态共享的问题，原理是集中式管理，可以让数据更可控，react 中所有数据处理都在 redux 中进行，三个核心方法，action、store 和 reducer。 在 redux 中遵循的原则： 1. 一个项目只能有一颗数据树。 2. 所有的数据改变都需要在 reducer 中进行...
umi 后台管理demo
xueer43的博客
01-16 470
umi 后台管理demo umi + react + ts + dva + antd + egg (有待优化) 简单的前后端管理demo, 接口提供增删查改，前端也有相应功能 github代码：https://github.com/huiBuiling/ql_admin/tree/master - 前端目录 - 后端目录 - 效果图 ...
React + Umi + Dva + Antd
12-15
React + Umi + Dva + Antd 是一种常用的前端技术栈，其中： React 是一个用于构建用户界面的 JavaScript 库，提供了高效、灵活且可重用的组件。 Umi 是一个可插拔的企业级 React 应用框架，提供了类 Next.js 的约定式路由、插件化的配置、插件集成的方式等。 Dva 是一个基于 Redux 和 Redux-saga 的数据流方案，提供了简化开发体验的额外内置功能，例如 react-router 和 fetch。 Antd 是一个基于 React 的 UI 组件库，提供了丰富的组件和样式，可以帮助开发者快速构建美观且易于维护的用户界面。 以下是一个使用 React + Umi + Dva + Antd 的示例代码： ```javascript import React from 'react'; import { connect } from 'dva'; import { Button } from 'antd'; const ExamplePage = ({ dispatch, count }) => { const handleClick = () => { dispatch({ type: 'example/addCount', }); }; return ( <div> <h1>Count: {count}</h1> <<Button onClick={handleClick}>Add</Button> </div> ); }; export default connect(({ example }) => ({ count: example.count, }))(ExamplePage); ``` 在上面的示例代码中，我们使用了 connect 函数将组件与 Redux store 进行连接，从而可以通过 props 访问 store 中的数据和 dispatch 函数。同时，我们还使用了 Antd 提供的 Button 组件来渲染一个按钮。当用户点击按钮时，我们会触发一个名为 addCount 的 action，从而更新 store 中的 count 数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值