百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

开源项目推荐:React18、TS、Vite、Antd5 开箱即用中后台前端项目

liuian 2025-02-20 16:44 24 浏览

近期发现很多小伙伴的简历难以区别于其他人,项目比较单一。

  • 比如有小伙伴没接触过小程序开发、脚手架开发、图片编辑器、数据大屏等开发。
  • 我一般都是建议多找找一些开源项目,学习掌握透彻后,也可以参与贡献代码,可以写到简历上(如果公司想招有类似项目经验的就会加分)。
  • github上有很多开源项目,平时多积累学习,真正需要时,不至于束手无措。
  • 后续也会多推荐一些实用的开源项目,拓宽大家的视野。

github: https://github.com/southliu/react-admin
技术栈:react18 + ts + antd5 + vite 等等 在线体验:https://southliu.github.io
我大致看了一下源码,相对简单些,有很多值得学习的。
以下是该项目的README介绍。


South Admin

? 简介

使用React18,Typescript,Vite,Antd5.0等主流技术开发的开箱即用的中后台前端项目,Vite实现自动生成路由,支持KeepAlive功能,react-redux状态管理,支持虚拟滚动表格,UnoCss开发样式。

项目演示

演示地址[1]

安装使用

  • 获取项目代码
git clone https://github.com/southliu/react-admin.git
  • 选择目录
cd react-admin
  • 安装全局依赖依赖,存在则不用安装
npm i -g pnpm
  • 安装依赖
pnpm install

如果使用pnpm安装依赖出现安装失败问题,请使用梯子或yarn安装。

  • 运行
pnpm dev
  • 打包
pnpm build

图标(iconify)

  • 参考 iconify官方地址[2]
  • VS Code安装Iconify IntelliSense - 图标内联显示和自动补全

? Git 提交示例

Git提交不规范会导致无法提交,feat关键字可以按照下面Git 贡献提交规范来替换。

git add .
git commit -m "feat: 新增功能"
git push

按照以上规范依旧无法提交代码,请在终端执行npx husky install之后重新提交。

Git 贡献提交规范

  • 参考 vue[3] 规范
    • feat 增加新功能
    • fix 修复问题/BUG
    • style 代码风格相关无影响运行结果的
    • perf 优化/性能提升
    • refactor 重构
    • revert 撤销修改
    • test 测试相关
    • docs 文档/注释
    • chore 依赖更新/脚手架配置修改等
    • workflow 工作流改进
    • ci 持续集成
    • types 类型定义文件更改
    • wip 开发中

路由

路由根据文件夹路径自动生成,路径包含以下文件名或文件夹名称则不生成:

  • components
  • utils
  • lib
  • hooks
  • model.tsx
  • 404.tsx

可自行在 src/router/utils/config.ts 修改路由生成规则。

关于封装

  1. 功能扩展,在原有的api上拓展。
  2. 功能整合,合并两个或两个以上组件的api。
  3. 样式统一,避免后期样式变动,导致牵一发而动全身。
  4. 公共组件二次封装或常用组件使用Basic开头,便于区分。

参考资料

[1] 演示地址:
https://southliu.github.io/

[2] iconify官方地址:
https://icon-sets.iconify.design/

[3] vue: https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md

相关推荐

教你把多个视频合并成一个视频的方法

一.情况介绍当你有一个m3u8文件和一个目录,目录中有连续的视频片段,这些片段可以连成一段完整的视频。m3u8文件打开后像这样:m3u8文件,可以理解为播放列表,里面是播放视频片段的顺序。视频片段像这...

零代码编程:用kimichat合并一个文件夹下的多个文件

一个文件夹里面有很多个srt字幕文件,如何借助kimichat来自动批量合并呢?在kimichat对话框中输入提示词:你是一个Python编程专家,完成如下的编程任务:这个文件夹:D:\downloa...

Java APT_java APT 生成代码

JavaAPT(AnnotationProcessingTool)是一种在Java编译阶段处理注解的工具。APT会在编译阶段扫描源代码中的注解,并根据这些注解生成代码、资源文件或其他输出,...

Unit Runtime:一键运行 AI 生成的代码,或许将成为你的复制 + 粘贴神器

在我们构建了UnitMesh架构之后,以及对应的demo之后,便着手于实现UnitMesh架构。于是,我们就继续开始UnitRuntime,以用于直接运行AI生成的代码。PS:...

挣脱臃肿的枷锁:为什么说Vert.x是Java开发者手中的一柄利剑?

如果你是一名Java开发者,那么你的职业生涯几乎无法避开Spring。它如同一位德高望重的老国王,统治着企业级应用开发的大片疆土。SpringBoot的约定大于配置、SpringCloud的微服务...

五年后,谷歌还在全力以赴发展 Kotlin

作者|FredericLardinois译者|Sambodhi策划|Tina自2017年谷歌I/O全球开发者大会上,谷歌首次宣布将Kotlin(JetBrains开发的Ja...

kotlin和java开发哪个好,优缺点对比

Kotlin和Java都是常见的编程语言,它们有各自的优缺点。Kotlin的优点:简洁:Kotlin程序相对于Java程序更简洁,可以减少代码量。安全:Kotlin在类型系统和空值安全...

移动端架构模式全景解析:从MVC到MVVM,如何选择最佳设计方案?

掌握不同架构模式的精髓,是构建可维护、可测试且高效移动应用的关键。在移动应用开发中,选择合适的软件架构模式对项目的可维护性、可测试性和团队协作效率至关重要。随着应用复杂度的增加,一个良好的架构能够帮助...

颜值非常高的XShell替代工具Termora,不一样的使用体验!

Termora是一款面向开发者和运维人员的跨平台SSH终端与文件管理工具,支持Windows、macOS及Linux系统,通过一体化界面简化远程服务器管理流程。其核心定位是解决多平台环境下远程连接、文...

预处理的底层原理和预处理编译运行异常的解决方案

若文章对您有帮助,欢迎关注程序员小迷。助您在编程路上越走越好![Mac-10.7.1LionIntel-based]Q:预处理到底干了什么事情?A:预处理,顾名思义,预先做的处理。源代码中...

为“架构”再建个模:如何用代码描述软件架构?

在架构治理平台ArchGuard中,为了实现对架构的治理,我们需要代码+模型描述所要处理的内容和数据。所以,在ArchGuard中,我们有了代码的模型、依赖的模型、变更的模型等,剩下的两个...

深度解析:Google Gemma 3n —— 移动优先的轻量多模态大模型

2025年6月,Google正式发布了Gemma3n,这是一款能够在2GB内存环境下运行的轻量级多模态大模型。它延续了Gemma家族的开源基因,同时在架构设计上大幅优化,目标是让...

比分网开发技术栈与功能详解_比分网有哪些

一、核心功能模块一个基本的比分网通常包含以下模块:首页/总览实时比分看板:滚动展示所有正在进行的比赛,包含比分、比赛时间、红黄牌等关键信息。热门赛事/焦点战:突出显示重要的、关注度高的比赛。赛事导航...

设计模式之-生成器_一键生成设计

一、【概念定义】——“分步构建复杂对象,隐藏创建细节”生成器模式(BuilderPattern):一种“分步构建型”创建型设计模式,它将一个复杂对象的构建与其表示分离,使得同样的构建过程可以创建...

构建第一个 Kotlin Android 应用_kotlin简介

第一步:安装AndroidStudio(推荐IDE)AndroidStudio是官方推荐的Android开发集成开发环境(IDE),内置对Kotlin的完整支持。1.下载And...