Umi + React + Ant Design Pro + TS 项目搭建

news/2024/7/15 17:45:05 标签: react.js, 前端, 前端框架

新建项目目录

mkdir 【项目名称】

在对应目录 D:\react\demo 中,安装 Umi 脚手架:

yarn create umi

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
接下来,安装将要用到的相关依赖 @umijs/plugins:

npm i @umijs/plugins -D

@umijs/plugins 是 Umi 的官方插件集,包含了 valtio、react-query、styled-components、locale、access、qiankun 等大量插件,可让用户通过配置的方式一键开启和使用。

安装成功:
在这里插入图片描述

继续安装 antd , axios , @ant-design/pro-layout:

antd 是基于 Ant Design 设计体系的 React UI 组件库;

axios 是前端常用的网络请求库;

@ant-design/pro-layout 是用于生成中后台布局的组件。(将运行时依赖和编译时依赖分别保存到 dependencies 和 devDependencies,这也是目前社区推荐的方式。)

npm i antd axios @ant-design/pro-layout -S

安装完成:
在这里插入图片描述

大功告成,执行命令启动项目:

npm run dev

http://www.niftyadmin.cn/n/5082748.html

相关文章

CCF CSP题解:坐标变换(其二)(202309-2)

链接和思路 OJ链接:传送门 对于平面直角坐标系上的坐标 ( x , y ) (x,y) (x,y),定义如下两种操作: 拉伸 k k k倍:横坐标 x x x变为 k x kx kx, 纵坐标 y y y 变为 k y ky ky;旋转 θ \theta θ &#xf…

数学建模——人工神经网络模型

一、人工神经网络简介 1、神经网络起源与应用 1943年心理学家McCulloch和数学家Pitts提出神经元生物数学模型(M-P模型),后来人工神经网络(Artifical Neural Network,ANN)是在生物神经网络(Biological Neural Network,BNN)基础上发展起来的&a…

EGE——通讯录

一、简介 1、基础功能:增、查、删、改 2、界面的交互功能:鼠标和按钮的交互,按钮的点击效果,界面切换动态效果 3、以文档格式储存 对EGE中,窗口delay_fps()帧率刷新理解有一定提升。控制了重画界面的时机和次数&am…

python 操作redis 消息队列

文章目录 redis消息队列使用方式发布消息的时候,数据类型可以是字典类型吗接收到的message 是什么类型,怎么转成字符串 redis消息队列使用方式 使用Redis消息队列(Redis Message Queue)需要以下步骤: 安装Redis:首先,…

【JavaEE初阶】 死锁详解

文章目录 🎋死锁的概念🌳死锁的三个典型情况🚩一个线程一把锁🚩两个线程两把锁🚩n个线程m把锁(哲学家就餐问题) 🎄如何破除死锁🚩破坏循环等待 本文重点: 死锁咋回事 死锁的三个典型…

Unity基础课程之物理引擎8-扔保龄球游戏案例(完)

三个脚本: 1.给求添加力 2.分数管理器 3.检测是否发生碰撞 ----------------------------------------------- 脚本源码 1.给求添加力 using System.Collections; using System.Collections.Generic; using UnityEngine;public class RoleControl : MonoBeha…

2023年中国数控系统市场发展历程及趋势分析:数控系统市场规模将持续扩大[图]

数控系统是根据计算机存储器中存储的控制程序,执行部分或全部数值控制功能,并配有接口电路和伺服驱动装置的专用计算机系统。通过利用数字、文字和符号组成的数字指令来实现一台或多台机械设备动作控制,它所控制的通常是位置、角度、速度等机…

以太坊 CALL 数据解析【ETH】

文章目录 前言代码前言 当我们通过 jsonrpc CALL 获取到数据时,不可读,怎么办? 这里直接给大家一个工具类 代码 package trace// author JavaPub shiyuwangimport ("encoding/json""fmt""io/ioutil""net/http""strings&qu…