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.gitInstall：pnpm installRun：pnpm devpnpm serveBuild：# 开发环境pnpm build:dev
# 测试环境pnpm build:test
# 生产环境pnpm build:proLint：# eslint 检测代码pnpm lint:eslint
# prettier 格式化代码pnpm lint:prettier
# stylelint 格式化样式pnpm lint:stylelintcommit：# 提交代码（提交前会自动执行 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

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

activiti初次学习

activiti初次学习

源代码地址：https://gitee.com/ZSXYX/activiti.git​ 1、安装插件 首先安装下图所示activiti,不确定是哪个插件有用的，有时间可排除下 在resources下创建一个文件夹：processes,右键，新建 生成： 选中act.bpmn20.xm…
阅读更多...
基于ICEEMDAN-SVD的信号去噪算法

基于ICEEMDAN-SVD的信号去噪算法

一、代码原理 ICEEMDAN-SVD算法是一种结合了Improved Complete Ensemble Empirical Mode Decomposition with Adaptive Noise (ICEEMDAN) 和奇异值分解 (SVD) 的信号去噪方法。这种算法结合了两种先进的信号处理技术，旨在提高信号去噪的效果。以下是该算法的基本原…
阅读更多...
第24次修改了可删除可持久保存的前端html备忘录:文本编辑框不再隐藏，又增加了哔哩哔哩搜索和必应搜索

第24次修改了可删除可持久保存的前端html备忘录:文本编辑框不再隐藏，又增加了哔哩哔哩搜索和必应搜索

第24次修改了可删除可持久保存的前端html备忘录:文本编辑框不再隐藏&#xff0c;又增加了哔哩哔哩搜索和必应搜索. <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"…
阅读更多...
shell-将密码输入错误超过4次的IP地址通过firewalld防火墙阻止访问

shell-将密码输入错误超过4次的IP地址通过firewalld防火墙阻止访问

应用场景&#xff1a;防止恶意IP尝试ssh登录 脚本说明&#xff1a;将密码输入错误超过四次得ip地址通过iptable防火墙访问。 分析&#xff1a; 首先&#xff0c;需要知道ssh远程访问记录在哪一个文件中 /var/log/secure 其次&#xff0c;模拟远程访问输错密码&#xff0c;查…
阅读更多...
Vulnhub靶机 DC-1渗透详细过程

Vulnhub靶机 DC-1渗透详细过程

Vulnhub靶机:DC-1渗透详细过程 目录 Vulnhub靶机:DC-1渗透详细过程一、将靶机导入到虚拟机当中二、攻击方式主机发现端口扫描web渗透利用msf反弹shell数据库信息web管理员密码提权 一、将靶机导入到虚拟机当中 靶机地址&#xff1a; https://www.vulnhub.com/entry/dc-1-1,29…
阅读更多...
【域适应】基于域分离网络的MNIST数据10分类典型方法实现

【域适应】基于域分离网络的MNIST数据10分类典型方法实现

关于 大规模数据收集和注释的成本通常使得将机器学习算法应用于新任务或数据集变得异常昂贵。规避这一成本的一种方法是在合成数据上训练模型&#xff0c;其中自动提供注释。尽管它们很有吸引力&#xff0c;但此类模型通常无法从合成图像推广到真实图像&#xff0c;因此需要域…
阅读更多...
在Mac上更好的运行Windows，推荐这几款Mac虚拟机 mac运行windows虚拟机性能

在Mac上更好的运行Windows，推荐这几款Mac虚拟机 mac运行windows虚拟机性能

想要在Mac OS上更好的运行Windows系统吗&#xff1f;推荐你使用mac虚拟机。虚拟机通过生成现有操作系统的全新虚拟镜像&#xff0c;它具有真实windows系统完全一样的功能&#xff0c;进入虚拟系统后&#xff0c;所有操作都是在这个全新的独立的虚拟系统里面进行&#xff0c;可以…
阅读更多...
vue列表列表过滤

vue列表列表过滤

对已知的列表进行数据过滤(根据输入框里面的内容进行数据过滤) 编写案例 通过案例来演示说明 效果就是这样的 输入框是模糊查询 想要实现功能&#xff0c;其实就两大步&#xff0c;1获取输入框内容 2根据输入内容进行数据过滤 绑定收集数据 我们可以使用v-model去双向绑定 …
阅读更多...
深入理解Cortex-M7 SVC和PendSV

深入理解Cortex-M7 SVC和PendSV

1前言 1.1 PendSV 在ARM V7上&#xff0c;PendSV用来作为RTOS调度器的御用通道&#xff0c;上下文切换&#xff0c;任务调度都是在其ISR中实现的。所谓pend&#xff0c;字面意思即有悬起等待的意思&#xff0c;ARM官方也明确说明&#xff0c;PendSV应该在其他异常处理完毕后执…
阅读更多...
python的算术运算符

python的算术运算符

python常用算术运算符代码如下&#xff1a; #算术运算符操作 x 10 y 20 z 30 #加法运算 a x y print("a的值为&#xff1a;", a) #减法运算 a x - y print("a的值为&#xff1a;", a) #乘法运算 a x*y print("a的值为&#xff1a;", a) …
阅读更多...
计算机网络——ARP协议

计算机网络——ARP协议

前言 本博客是博主用于复习计算机网络的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 这篇博客是在B站掌芝士zzs这个UP主的视频的总结&#xff0c;讲的非常好。 可以先去看一篇视频&#xff0c;再来参考这篇笔记&#xff08;或者说直接偷走&#xff09;。 …
阅读更多...
OpenCV4.9​​​​基本阈值操作

OpenCV4.9​​​​基本阈值操作

目标 在本教程中&#xff0c;您将学习如何&#xff1a; 使用 OpenCV 函数 cv&#xff1a;&#xff1a;threshold 执行基本阈值操作 理论依据 注意 下面的解释属于 Bradski 和 Kaehler 的 Learning OpenCV 一书 阈值&#xff1f; 最简单的分割方法应用示例&#xff1a;分…
阅读更多...
步骤大全：网站建设3个基本流程详解

步骤大全：网站建设3个基本流程详解

一.领取一个免费域名和SSL证书&#xff0c;和CDN 1.打开网站链接&#xff1a;https://www.rainyun.com/z22_ 2.在网站主页上&#xff0c;您会看到一个"登陆/注册"的选项。 3.点击"登陆/注册"&#xff0c;然后选择"微信登录"选项。 4.使用您的…
阅读更多...
Claude3和GPT4哪个强？

Claude3和GPT4哪个强？

在短短两个月内&#xff0c;全球最强人工智能的桂冠再次易主。此前&#xff0c;Claude3 Opus以其卓越的表现超越了GPT-4&#xff0c;吸引了无数用户抛弃GPT&#xff0c;转而拥抱Claude3。然而&#xff0c;OpenAI近日强势回归&#xff0c;用实力证明了GPT依然是人工智能领域的霸…
阅读更多...
Jmeter杂记：测试计划参数详解

Jmeter杂记：测试计划参数详解

测试计划各参数详解 1&#xff0c;用户自定义变量&#xff0c;是全局变量&#xff0c;供所有线程组使用&#xff0c;可用配置元件&#xff1a;用户自定义变量替代 2&#xff0c;连续的运行线程组&#xff0c;默认不勾选&#xff0c;则随机的运行多个线程组中的取样器&#xff…
阅读更多...
图机器学习NetworkX代码实战-创建图和可视化

图机器学习NetworkX代码实战-创建图和可视化

完整代码见资源&#xff0c;下面列举了其中的几个图 安装networkX及相应工具包 pip install numpy pandas matplotlib tqdm networkx 当安装完成后&#xff0c;输入如下代码验证版本及是否安装成功 import networkx as nxnx.__version__ import matplotlib.pyplot as plt …
阅读更多...
国内ai人工智能软件大全

国内ai人工智能软件大全

很多人一直在寻找一个稳定且可靠的全球AI大模型测试平台&#xff0c;希望它不仅真实可信&#xff0c;而且能提供稳定、快速的服务&#xff0c;不会频繁出现故障或响应缓慢。迄今为止&#xff0c;我已经尝试了国内外至少10个不同的服务站点。不幸的是&#xff0c;这些站点总是存…
阅读更多...
Linux 文件页反向映射

Linux 文件页反向映射

0. 引言 操作系统中与匿名页相对的是文件页&#xff0c;文件页的反向映射对比匿名页的反向映射更为简单。如果还不清楚匿名页反向映射逻辑的&#xff0c;请移步 匿名页反向映射 1. 文件页反向映射数据结构 struct file&#xff1a; 用户进程每open()一次文件&#xff0c;则会生…
阅读更多...
分享一个 git stash 的实际使用场景。

分享一个 git stash 的实际使用场景。

当我将新的变更记录提交为 git commit --amend 后&#xff0c;发现这需要修改云端上的提交记录&#xff0c;也就是 vscode 中会出现这张图 于是&#xff0c;我通过 git reset head^ 撤销掉刚刚的提交。 reset 前&#xff1a; reset 后&#xff1a; 但在撤销的同时&#xf…
阅读更多...
深入理解计算机网络分层结构

深入理解计算机网络分层结构

一、 为什么要分层&#xff1f; 计算机网络分层的主要目的是将复杂的网络通信过程分解为多个相互独立的层次&#xff0c;每个层次负责特定的功能。这样做有以下几个好处&#xff1a; 模块化设计&#xff1a;每个层次都有清晰定义的功能和接口&#xff0c;使得网络系统更易于设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023