程序员经验分享-hwhale

React+AntDesign开发完整的考勤系统前端页面（一）

2023-11-08

一：项目准备工作

1：开发环境准备
准备好Visual Studio Code前端开发工具，下载并安装Node.js
2：项目准备
本次项目使用umi脚手架的方式创建
（1）打开开发工具打开项目文件夹并新建终端在终端里面输入命令 npm i yarn tyarn -g
使用yarn管理项目
（2）通过yarn导入umi 输入yarn global add umi
（3）同过yarn创建umi项目 yarn create umi
在创建项目的时候我们选择app并在下一步使用typescript ，选择antd这样脚手架项目便创建好了如下图所示
项目创建命令及效果图

（4）使用npm i安装umi项目
（5）项目创建成功后我们输入 umi dev让项目跑起来（如下图所示）
在这里插入图片描述
项目创建好后的目录结构如下图所示
在这里插入图片描述
最后我们访问本地地址可以看到如下图所示的画面便说明通过UMI脚手架创建的项目成功了
在这里插入图片描述
访问的页面其实就是layouts下面的index页面。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端开发技术类

ReactJS

考勤系统

antdesign

UmiJS

React+AntDesign开发完整的考勤系统前端页面（一） 的相关文章

随机推荐

  • QT QSS简单使用

    之前完成的QT程序完成逻辑控制后 界面全都使用图片填充的方式来做美化 但是使用到的组件看上去很丑 因此上网简单学习之后做总结如下 之前也未学习过CSS等知识属于纯小白 如有错误 不吝赐教 1 新建工程 略 新建一个工程用于本次demo的学习

  • 靠着这个计算机视觉目标跟踪实战项目，成功拿到商汤视觉算法工程师offer(深度学习/计算机视觉/图像处理/目标跟踪/物体检测)

    计算机视觉基本任务 开讲之前给大家准备了深度学习CV计算机视觉学习资料包 内含 两大Pytorch TensorFlow实战框架源码资料 OpenCV YOLO物体检测实战项目 计算机视觉等视频和资料以及深度学习书籍 名额有限 速速领取哦

  • Input.GetButtonDown("")的用法

    Input GetButtonDown 的用法 转载 2015 06 07 18 07 45 标签 it pic01 pic02 pic03 GetButtonDown的用法 1 通过 Edit Project settings Input

  • smtp协议源ip是服务器地址吗,什么是SMTP服务器

    什么是SMTP服务器 smtp服务器是什么 SMTP 的全称是Simple Mail Transfer Protocol 即简单邮件传输协议 它是一组用于从源地址到目的地址传输邮件的规范 通过它来控制邮件的中转方式 SMTP 协议属于TCP

  • Python 的 map、列表推导、循环效率比较

    话不多说 直接上代码 1 准备数据 三个列表 import time x x1 x2 for i in range 1000000 x append i x1 append i x2 append i 2 开始表演 2 1 for循环 st

  • docker是什么，能做什么，如何用

    Docker概述 Docker历史 docker能干嘛 Docker安装 Docker的基本组成 安装Docker 镜像加速 配置使用 回顾HelloWorld流程 底层原理 Docker为什么出现 一款产品 开发 上线 两套环境 应用环境

  • VS调试时显示FbxString内容

    在使用FBX SDK时 在VS里到了断点处 总是无法查看FBXString的字符串内容 在Watch里显示的也是一堆地址 以至于每次都得写下const char temp fbxString gt Buffer 今天竟然无意间发现在SDK根

  • ESP8266退出上电透传模式

    AT SAVETRANSLINK 1 192 168 6 110 1002 TCP 通过类似指令将TCP连接的信息写入到esp8266的Flash中去 并开启开机透传模式 及一开机就进入透传模式 此时的AT指令无效 要想重新使得AT指令有效

  • 由对称性知定点一定在x轴上_圆锥曲线解答题的经典答案：由椭圆的对称性知，定点在x轴上？...

    有很多圆锥曲线综合题要研究定点问题 答案里往往有这样一句话 由椭圆的对称性知 定点必在x轴上 或者说一句 显然定点在y轴上 看得童鞋们丈二和尚摸不着头脑 1 读者提问 一位来自广东 昵称为 h 的高三学生这样提问 左老师好 请教一个定点问题

  • 什么是AppImage

    A 什么是AppImage 在linux系统中使用AppImage 多年以来 我们一直使用 DEB packages 来管理 Debian Ubuntu的软件包 使用 RPM 管理 Fedora SUSE 的软件包 用户使用这些包管理工具可

  • 华为数字化转型之道认知篇第一章数字化转型，华为的战略选择

    第一章 数字化转型 华为的战略选择 农业经济以土地为生产资料 工业经济以石油和各类矿产为生产资料 数字经济则以数据为生产资料 数字化转型以ICT平台为生产工具 以数据为生产资料 以服务为产品 不仅能为企业的传统业务赋予新动能 也能为企业带来

  • jq匹配偶数行_jQuery中两种奇偶选择器的区别

    原标题 jQuery中两种奇偶选择器的区别 jQuery中的选择器在选择元素的时候经常用到 今天主要介绍jQuery中的奇偶选择器 jquery中的奇偶选择器要用到CSS3伪类选择器 nth child nth child 的用法 直接匹配

  • 为云服务器添加python web环境

    为云服务器添加python web环境 自用不喜勿喷 当前配置 阿里云win10云服务器 anaconda配置的python环境 操作步骤 1 参照教程配置python及Django 2 pyCharm如何运行Django https ww

  • vue标签属性及其用法

    一 Vue的特点 1 采用组件化模式 提高代码的复用率 且让代码更好维护 2 声明编码 让编码人员无需直接操作DOM 提高开发效率 3 使用学你DOM 优秀的Diff算法 尽量服用DOM节点 二 Vue模板语法有两大类 1 插值语法 功能

  • Springboot修改内置Tomcat版本

    背景 Tomcat的安全漏洞需要升级版本进行解决 如 9 0 63 gt 9 0 75 1 Pom文件Springboot的依赖配置项 2 Ctrl 右键点击红色框选 3 全局搜索 修改 修改数值 启动测试

  • C++实现——string的所有操作

    C 中string的操作 Constructors 构造函数 用于字符串初始化 Operators 操作符 用于字符串比较和赋值 append 在字符串的末尾添加文本 assign 为字符串赋新值 at 按给定索引值返回字符 begin 返

  • 基于python实现的CS通信和P2P通信

    实验要求 C S通信实现要求 两台计算机分别模拟服务器 客户端 通过编程实现服务器端 客户端程序Socket Client 服务器端程序监听客户端向服务器端发出的请求 并返回数据给客户端 不采用方式 自定义通信协议 传输文件要足够大 例如

  • Python GUI: PyCahrm结合Pyqt5开发图形化界面 详细步骤 踩坑!

    1 下载安装pythonPython官网下载地址 注意 1 1 Python版本选择并不是越新越好 后面会提到 我安装的版本是 V3 5 4 64位 1 2 安装的时候一定要勾选pip和add python to path 自动添加到环境变

  • 清华大佬耗时36个小时，终于整理出来了一份Python自学计划，学不会退出IT界

    在人工智能的风口 Python这门胶水语言越来越火 很多小伙伴也开始学习Python 但是没有一份合适的学习规划怎么能行 今天特意为大家整理了一份Python自学计划 希望可以帮助到处在迷茫期的你们 文末获取o 这份自学计划是我精心整理的

  • React+AntDesign开发完整的考勤系统前端页面（一）

    一 项目准备工作 1 开发环境准备 准备好Visual Studio Code前端开发工具 下载并安装Node js 2 项目准备 本次项目使用umi脚手架的方式创建 1 打开开发工具打开项目文件夹并新建终端在终端里面输入命令 npm i

热门标签