# Geeker-Admin
### 介绍 📖
Geeker-Admin 一款基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 开源的后台管理框架,使用目前最新技术栈开发。项目提供强大的 [ProTable](https://juejin.cn/post/7166068828202336263) 组件,在一定程度上提高您的开发效率。另外本项目还封装了一些常用组件、Hooks、指令、动态路由、按钮级别权限控制等功能。
### 在线预览 👀
- Link:https://admin.spicyboy.cn
### 项目文档 📚
- 项目更新日志:[CHANGELOG.md](./CHANGELOG.md)
- 项目文档地址:https://docs.spicyboy.cn
### 项目功能 🔨
- 使用 Vue3.4 + TypeScript 开发,单文件组件**<script setup>**
- 采用 Vite5 作为项目开发、打包工具(配置 gzip/brotli 打包、tsx 语法、跨域代理…)
- 使用 Pinia 替代 Vuex,轻量、简单、易用,集成 Pinia 持久化插件
- 使用 TypeScript 对 Axios 整个二次封装(请求拦截、取消、常用请求封装…)
- 基于 Element 二次封装 [ProTable](https://juejin.cn/post/7166068828202336263) 组件,表格页面全部为配置项 Columns
- 支持 Element 组件大小切换、多主题布局、暗黑模式、i18n 国际化
- 使用 VueRouter 配置动态路由权限拦截、路由懒加载,支持页面按钮权限控制
- 使用 KeepAlive 对页面进行缓存,支持多级嵌套路由缓存
- 常用自定义指令开发(权限、复制、水印、拖拽、节流、防抖、长按…)
- 使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范
- 使用 husky、lint-staged、commitlint、czg、cz-git 规范提交信息
### 安装使用步骤 📔
- **Clone:**
```text
# Gitee
git clone https://gitee.com/HalseySpicy/Geeker-Admin.git
# GitHub
git clone https://github.com/HalseySpicy/Geeker-Admin.git
```
- **Install:**
```text
pnpm install
```
- **Run:**
```text
pnpm dev
pnpm serve
```
- **Build:**
```text
# 开发环境
pnpm build:dev
# 测试环境
pnpm build:test
# 生产环境
pnpm build:pro
```
- **Lint:**
```text
# eslint 检测代码
pnpm lint:eslint
# prettier 格式化代码
pnpm lint:prettier
# stylelint 格式化样式
pnpm lint:stylelint
```
- **commit:**
```text
# 提交代码(提交前会自动执行 lint:lint-staged 命令)
pnpm commit
```
### 项目截图 📷
- 登录页:
![login_light](https://i.imgtg.com/2023/04/13/8tknp.png)
![login_dark](https://i.imgtg.com/2023/04/13/8tmpP.png)
- 首页:
![home_light](https://i.imgtg.com/2023/04/13/8tl1j.png)
![home_dark](https://i.imgtg.com/2023/04/13/8tpfb.png)
- 表格页:
![table_light](https://i.imgtg.com/2023/04/13/8tfMx.png)
![table_dark](https://i.imgtg.com/2023/04/13/8tv8F.png)
- 数据可视化
![dashboard](https://i.imgtg.com/2023/04/14/82Grx.png)
- 数据大屏:
![dataScreen](https://i.imgtg.com/2023/01/16/QP8HF.png)
### 文件资源目录 📚
```text
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 全局配置文件
```
### 浏览器支持 🌎
- 本地开发推荐使用 Chrome 最新版浏览器 [Download](https://www.google.com/intl/zh-CN/chrome/)。
- 生产环境支持现代浏览器,不再支持 IE 浏览器,更多浏览器可以查看 [Can I Use Es Module](https://caniuse.com/?search=ESModule)。
| ![IE](https://i.imgtg.com/2023/04/11/8z7ot.png) | ![Edge](https://i.imgtg.com/2023/04/11/8zr3p.png) | ![Firefox](https://i.imgtg.com/2023/04/11/8zKiU.png) | ![Chrome](https://i.imgtg.com/2023/04/11/8zNrx.png) | ![Safari](https://i.imgtg.com/2023/04/11/8zeGj.png) |
| :---------------------------------------------: | :-----------------------------------------------: | :--------------------------------------------------: | :-------------------------------------------------: | :-------------------------------------------------: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
### 项目后台接口 🧩
项目后台接口完全采用 Mock 数据,感谢以下 Mock 平台支持:
- FastMock: https://www.fastmock.site
- EasyMock:https://mock.mengxuegu.com
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus的一套后台管理框架源码+项目说明.zip基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus的一套后台管理框架源码+项目说明.zip基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus的一套后台管理框架源码+项目说明.zip基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus的一套后台管理框架源码+项目说明.zip 【资源说明】 1、该资源内项目代码都是经过测试运行成功,功能正常的情况下才上传的,请放心下载使用。 2、适用人群:主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等)的同学或企业员工下载使用,具有较高的学习借鉴价值。 3、不仅适合小白学习实战练习,也可作为大作业、课程设计、毕设项目、初期项目立项演示等,欢迎下载,互相学习,共同进步!
资源推荐
资源详情
资源评论
收起资源包目录
基于 Vue3.4、TypeScript、Vite5、Element-Plus的一套后台管理框架源码+项目说明.zip (354个子文件)
commitlint.config.cjs 6KB
.eslintrc.cjs 3KB
.stylelintrc.cjs 2KB
.prettierrc.cjs 2KB
lint-staged.config.cjs 387B
postcss.config.cjs 60B
commit-msg 91B
.env.development 639B
.editorconfig 537B
.env 196B
.eslintignore 111B
avatar.gif 6KB
.gitignore 287B
index.html 3KB
china.json 981KB
authMenuList.json 27KB
package.json 4KB
settings.json 2KB
tsconfig.json 2KB
alarmList.Json 1KB
extensions.json 341B
authButtonList.json 193B
CHANGELOG.md 27KB
README.md 7KB
DIN.otf 27KB
bg.png 627KB
login_left5.png 275KB
login_left4.png 150KB
book-bg.png 124KB
login_left3.png 109KB
welcome.png 74KB
login_left1.png 41KB
login_left.png 35KB
login_left2.png 31KB
dataScreen-header-center-bg.png 26KB
dataScreen-header-warn-bg.png 18KB
dataScreen-main-cb.png 16KB
dataScreen-main-lt.png 16KB
dataScreen-main-rb.png 16KB
dataScreen-main-rt.png 16KB
dataScreen-main-lc.png 16KB
dataScreen-main-rc.png 16KB
woman.png 16KB
dataScreen-main-lb.png 16KB
dataScreen-header-left-bg.png 15KB
403.png 12KB
logo.png 8KB
4-bg.png 8KB
500.png 8KB
3-bg.png 8KB
404.png 8KB
2-bg.png 7KB
msg04.png 7KB
1-bg.png 7KB
msg02.png 6KB
msg01.png 6KB
msg03.png 6KB
msg05.png 6KB
dataScreen-warn-bg.png 5KB
map-title-bg.png 4KB
book-sum.png 3KB
dataScreen-header-right-bg.png 2KB
man.png 2KB
man-bg.png 2KB
contrast-bg.png 1KB
woman-bg.png 1KB
notData.png 1KB
dataScreen-header-btn-bg-l.png 1KB
dataScreen-header-btn-bg-r.png 1KB
add_team.png 1KB
book_sum.png 859B
total.png 788B
add_person.png 780B
today.png 704B
rankingChart-bg.png 661B
line-bg.png 595B
dataScreen-title.png 485B
dataScreen-alarm.png 405B
pre-commit 78B
.prettierignore 72B
.env.production 612B
index.scss 7KB
element.scss 5KB
index.scss 4KB
index.scss 3KB
common.scss 2KB
index.scss 2KB
index.scss 2KB
reset.scss 2KB
index.scss 2KB
index.scss 2KB
index.scss 1KB
index.scss 1KB
index.scss 1KB
index.scss 1KB
iconfont.scss 886B
index.scss 840B
index.scss 773B
index.scss 764B
element-dark.scss 741B
共 354 条
- 1
- 2
- 3
- 4
资源评论
龙年行大运
- 粉丝: 1002
- 资源: 3854
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功