Geeker-Admin:基于Vue3.4、TypeScript、Vite5、Pinia和Element-Plus的开源后台管理框架

Geeker-Admin:基于Vue3.4、TypeScript、Vite5、Pinia和Element-Plus的开源后台管理框架

一、引言

随着技术的不断发展,前端开发领域也在不断演变。为了满足现代应用程序的需求,开发人员需要使用最新、最强大的工具和技术。Geeker-Admin正是一款基于Vue 3.4、TypeScript、Vite 5、Pinia和Element-Plus的开源后台管理框架,它利用了当前最先进的技术栈,为开发者提供了一套高效、便捷的开发解决方案。

二、技术栈概览

  1. Vue 3.4:Vue是一款流行的JavaScript框架,用于构建用户界面。Vue 3.4版本在性能和功能上都有显著提升,包括更快的渲染速度和更强大的组件系统。

  2. TypeScript:TypeScript是JavaScript的超集,它添加了静态类型系统和其他的语言特性,使开发者能够编写更加可靠、可维护的代码。

  3. Vite 5:Vite是一款现代化的前端构建工具,提供了快速的冷启动和热更新,以及与ESBuild和Rollup等其他工具的兼容性。

  4. Pinia:Pinia是一个状态管理库,用于Vue应用程序,它提供了简单、可扩展的状态管理解决方案。

  5. Element-Plus:Element-Plus是Element UI的增强版本,为开发者提供了一套丰富的UI组件,用于快速构建用户界面。

三、Geeker-Admin的主要特性

  1. ProTable组件:ProTable组件是一个强大的表格组件,提供了丰富的功能,如排序、筛选、分页等,极大地提高了开发效率。

  2. 常用组件、Hooks、指令:Geeker-Admin封装了一系列常用的组件、Hooks和指令,使得开发者可以快速地构建应用程序。

  3. 动态路由:动态路由使得应用程序的路由配置更加灵活,可以根据不同的条件动态生成路由。

  4. 按钮级别权限控制:这个特性使得开发者能够实现精细的权限控制,每个按钮都可以设置不同的权限,提高了系统的安全性。

在线预览 👀

  • Link:https://admin.spicyboy.cn

代码仓库 ⭐

  • Gitee:https://gitee.com/HalseySpicy/Geeker-Admin

  • GitHub:https://github.com/HalseySpicy/Geeker-Admin

项目文档 📚

  • 项目更新日志:CHANGELOG.md

  • 项目文档地址:https://docs.spicyboy.cn

项目功能 🔨

  • 使用 Vue3.4 + TypeScript 开发,单文件组件<script setup>

  • 采用 Vite5 作为项目开发、打包工具(配置 gzip/brotli 打包、tsx 语法、跨域代理…)

  • 使用 Pinia 替代 Vuex,轻量、简单、易用,集成 Pinia 持久化插件

  • 使用 TypeScript 对 Axios 整个二次封装(请求拦截、取消、常用请求封装…)

  • 基于 Element 二次封装 ProTable 组件,表格页面全部为配置项 Columns

  • 支持 Element 组件大小切换、多主题布局、暗黑模式、i18n 国际化

  • 使用 VueRouter 配置动态路由权限拦截、路由懒加载,支持页面按钮权限控制

  • 使用 KeepAlive 对页面进行缓存,支持多级嵌套路由缓存

  • 常用自定义指令开发(权限、复制、水印、拖拽、节流、防抖、长按…)

  • 使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范

  • 使用 husky、lint-staged、commitlint、czg、cz-git 规范提交信息

安装使用步骤 📔

Clone:# Giteegit clone https://gitee.com/HalseySpicy/Geeker-Admin.git# GitHubgit clone https://github.com/HalseySpicy/Geeker-Admin.git

Install:pnpm install

Run:pnpm devpnpm serve

Build:# 开发环境pnpm build:dev
# 测试环境pnpm build:test
# 生产环境pnpm build:pro

Lint:# eslint 检测代码pnpm lint:eslint
# prettier 格式化代码pnpm lint:prettier
# stylelint 格式化样式pnpm lint:stylelint

commit:# 提交代码(提交前会自动执行 lint:lint-staged 命令)pnpm commit

项目截图 📷

  • 登录页:

图片

图片

  • 首页:

图片

图片

  • 表格页:

图片

图片

  • 数据可视化

图片

  • 数据大屏:

图片

文件资源目录 📚

Geeker-Admin
├─ .husky                  # husky 配置文件
├─ .vscode                 # VSCode 推荐配置
├─ build                   # Vite 配置项
├─ public                  # 静态资源文件(该文件夹不会被打包)
├─ src
│  ├─ api                  # API 接口管理
│  ├─ assets               # 静态资源文件
│  ├─ components           # 全局组件
│  ├─ config               # 全局配置项
│  ├─ directives           # 全局指令文件
│  ├─ enums                # 项目常用枚举
│  ├─ hooks                # 常用 Hooks 封装
│  ├─ languages            # 语言国际化 i18n
│  ├─ layouts              # 框架布局模块
│  ├─ routers              # 路由管理
│  ├─ stores               # pinia store
│  ├─ styles               # 全局样式文件
│  ├─ typings              # 全局 ts 声明
│  ├─ utils                # 常用工具库
│  ├─ views                # 项目所有页面
│  ├─ App.vue              # 项目主组件
│  ├─ main.ts              # 项目入口文件
│  └─ vite-env.d.ts        # 指定 ts 识别 vue
├─ .editorconfig           # 统一不同编辑器的编码风格
├─ .env                    # vite 常用配置
├─ .env.development        # 开发环境配置
├─ .env.production         # 生产环境配置
├─ .env.test               # 测试环境配置
├─ .eslintignore           # 忽略 Eslint 校验
├─ .eslintrc.cjs           # Eslint 校验配置文件
├─ .gitignore              # 忽略 git 提交
├─ .prettierignore         # 忽略 Prettier 格式化
├─ .prettierrc.cjs         # Prettier 格式化配置
├─ .stylelintignore        # 忽略 stylelint 格式化
├─ .stylelintrc.cjs        # stylelint 样式格式化配置
├─ CHANGELOG.md            # 项目更新日志
├─ commitlint.config.cjs   # git 提交规范配置
├─ index.html              # 入口 html
├─ LICENSE                 # 开源协议文件
├─ lint-staged.config.cjs  # lint-staged 配置文件
├─ package-lock.json       # 依赖包包版本锁
├─ package.json            # 依赖包管理
├─ postcss.config.cjs      # postcss 配置
├─ README.md               # README 介绍
├─ tsconfig.json           # typescript 全局配置
└─ vite.config.ts          # vite 全局配置文件

四、总结与展望

Geeker-Admin是一个强大而灵活的开源后台管理框架,它利用了最新的前端技术栈,为开发者提供了一套高效、便捷的开发解决方案。通过使用Geeker-Admin,开发者可以快速地构建出高质量的应用程序,满足现代业务的需求。

未来,随着技术的不断发展,我们期待Geeker-Admin能够继续保持其创新性和前瞻性,不断吸收新的技术趋势,为开发者提供更多先进的功能和工具。同时,我们也期待更多的开发者能够参与到Geeker-Admin的开发中来,共同推动开源社区的发展。

欢迎关注我的前端技术微信公众号: 前端组件开发

d848d5658a07453c843277846948c608.png

欢迎加入“前端组件开发学习”交流群,可关注  “前端组件开发” 公众号后,私信后申请入群。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux 文件页反向映射

0. 引言 操作系统中与匿名页相对的是文件页,文件页的反向映射对比匿名页的反向映射更为简单。如果还不清楚匿名页反向映射逻辑的,请移步 匿名页反向映射 1. 文件页反向映射数据结构 struct file: 用户进程每open()一次文件,则会生…

分布式事务(一)

一、序言 本文介绍分布式事务相关的基本概念。 二、什么是分布式事务 分布式事务是指涉及多个独立计算机或系统的事务操作,这些计算机或系统可能位于不同的物理位置,彼此之间通过网络进行通信。分布式事务的目标是确保在分布式环境中的多个参与者之间…

物联网:门锁RNBN-K18使用记录

摘要:对 RNBN品牌下 K18智能门锁日常使用操作经验记录。 常见问题: 1.门锁联网时,找不到 wifi 怎么办。 答:检查一下几个方面:1. wifi 信号是否是2.4G,2.wifi信号是否距离没锁很远。因为门锁只能获取到2…

数据分析案例(三):基于RFM分析的客户分群

实验2 基于RFM分析的客户分群 Tips:"分享是快乐的源泉💧,在我的博客里,不仅有知识的海洋🌊,还有满满的正能量加持💪,快来和我一起分享这份快乐吧😊! 喜欢…

Alibaba --- 如何写好 Prompt ?

如何写好 Prompt 提示工程(Prompt Engineering)是一项通过优化提示词(Prompt)和生成策略,从而获得更好的模型返回结果的工程技术。总体而言,其实现逻辑如下: (注:示例图…

PE程序底层结构与恶意代码插入与执行的研究

Windows PE程序底层结构分析 PE(Portable Executable)是一种Windows操作系统下可执行文件的标准格式 Windows PE程序结构和Linux的elf程序结构类似,首先一个名为simple64.exe程序里有一个头文件和一个段文件,头文件里主要存放的是…

使用Charles断点修改接口返回数据

问题:数量/金额原来接口是用一个字段返回,由于业务需要换行展示,后端便拆分成了两个字段,前端则需要用新拆分的字段去取值,导致目前发现有个字段的金额也取成了件数(红框部分);需求&…

设备树下的 LED 驱动实验

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、修改设备树文件二 创建设备树节点并获取属性 前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断…

有真的副业推荐吗?

#有真的副业推荐吗# 我做副业项目的时候,认识了一位带娃宝妈,讲一下她空闲时间做副业赚钱的故事吧。在一个温馨的小家庭里,李婷是一位全职宝妈,她的主要任务是照顾和陪伴自己可爱的宝宝。然而,随着宝宝逐渐长大&#x…

196算法之谜在 JSP 中使用内置对象 request 获取 form 表单的文本框 text 提交的数据。

(1)编写 inputNumber . jsp ,该页面提供一个 form 表单,该 form 表单提供一个文本框 text ,用于用户输入一个正整数,用户在 form 表单中输入的数字,单击 submit 提交键将正整数提交给 huiwenNumber . jsp 页…

5.9 mybatis之callSettersOnNulls作用

文章目录 1. 当callSettersOnNullstrue时2. 当callSettersOnNullsfalse时 在mybatis的settings配置参数中有个callSettersOnNulls参数,官方解释为:指定当结果集中值为 null 的时候是否调用映射对象的 setter(map 对象时为 put)方法…

【菜狗学前端】ES6+笔记(包含Promise及async、await等)

老样子。复制上来的图片都没了,想看原版可以移步对应资源下载(资源刚上传,还在审核中) (免费)菜狗学前端之ES6笔记https://download.csdn.net/download/m0_58355897/89135424 一 解构赋值 解构赋值 解构指的是把一个数据…

2024年广东省网络系统管理样题第3套网络部署部分

2024年广东省网络系统管理样题第3套网络部署部分 模块A:网络构建 极安云科专注职业教育技能培训4年,包含信息安全管理与评估、网络系统管理、网络搭建等多个赛项及各大CTF模块培训学习服务。本团队基于赛项知识点,提供完整全面的系统性理论教…

Bridge 桥接

意图 将抽象部分与其显示部分分离,使他们都可以独立地变化。 结构 其中: Abstraction定义抽象类的接口,维护一个指向Implementer类型对象的指针。RefinedAbstraction扩展由Abstraction定义的接口。Implementor定义实现类的接口&#xff0c…

并发编程之ThreadLocal使用及原理

ThreadLocal主要是为了解决线程安全性问题的 非线程安全举例 public class ThreadLocalDemo {// 非线程安全的private static final SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");public static Date parse(String strDate) throws ParseExc…

Spring源码刨析之配置文件的解析和bean的创建以及生命周期

public void test1(){XmlBeanFactory xmlBeanFactory new XmlBeanFactory(new ClassPathResource("applicationContext.xml"));user u xmlBeanFactory.getBean("user",org.xhpcd.user.class);// System.out.println(u.getStu());}先介绍一个类XmlBeanFac…

服务器主机关机重启告警

提取时间段内系统操作命名,出现系统重启命令,若要出现及时联系确认 重启命令: reboot / init 6 / shutdown -r now(现在重启命令) 关机命令: init 0 / shutdown -h now(关机&#…

防汛物资仓库管理系统|实现应急物资仓库三维可视化

系统概述 智慧应急物资仓库可视化系统(智物资DW-S300)采用了 B/S 架构的设计,通过浏览器即可快速登录操作。实现对库房内的应急物资从申购入库、出库、调拨、库内环境监测、维修保养、检测试验、处置报废等全周期、科学、规范的管理。系统以…

恢复MySQL!是我的条件反射,PXB开源的力量...

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…

如何进行计量经济分析

计量经济分析是定量分析的常用方法,在经济分析领域有着广泛且重要的应用。计量经济分析以一定的经济理论和统计数据为基础,运用数学、统计学相关方法,通过建立计量模型,并运用软件进行操作,从而实现对经济问题的定量分…