# Geeker-Admin **Repository Path**: sachwei/Geeker-Admin ## Basic Information - **Project Name**: Geeker-Admin - **Description**: ✨✨✨ Geeker Admin，基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 开源的一套后台管理框架。 - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: https://admin.spicyboy.cn - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1492 - **Created**: 2024-01-20 - **Last Updated**: 2025-12-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Geeker-Admin
🎯 在线预览 | 📚 项目文档 | 💬 技术交流
Vue TypeScript Vite Element Plus Pinia
## 📚 项目介绍 Geeker-Admin 是一款基于 **Vue 3.4**、**TypeScript**、**Vite 5**、**Pinia**、**Element Plus** 开发的企业级后台管理框架。采用最新的前端技术栈，为您提供高效的开发体验和强大的功能支持。 ### ✨ 核心亮点 - 🚀 **最新技术栈**: Vue 3.4 + TypeScript + Vite 5 + Pinia + Element Plus - 🛠️ **强大的 ProTable**: 基于 Element Plus 二次封装，支持配置化表格开发 - 🔐 **完善的权限系统**: 支持动态路由、按钮级别权限控制 - 🌍 **国际化支持**: 基于 vue-i18n，支持多语言切换 - 🎨 **主题系统**: 支持多主题、暗黑模式、布局切换 - 📱 **组件丰富**: 可复用组件、自定义指令、Hooks 封装 - 📝 **代码规范**: 集成 ESLint + Prettier + Stylelint + Husky - 📊 **ECharts 集成**: 内置多种图表类型，支持数据可视化 ### React 版本 🔥 - 有需要请加底部微信了解、购买 - Link：https://pro.spicyboy.cn ### 在线预览 👀 - Link：https://admin.spicyboy.cn ### 代码仓库 ⭐ - Gitee：https://gitee.com/HalseySpicy/Geeker-Admin - GitHub：https://github.com/HalseySpicy/Geeker-Admin ### 项目文档 📚 - 项目更新日志：[CHANGELOG.md](./CHANGELOG.md) - 项目文档地址：https://docs.spicyboy.cn ### 🏧 技本架构 #### 核心技本栈 | 技术 | 版本 | 描述 | | ------------ | ---- | ----------------------------------- | | Vue.js | 3.4+ | 渐进式 JavaScript 框架 | | TypeScript | 5.3+ | JavaScript 的超集，提供静态类型检查 | | Vite | 5.0+ | 新一代前端构建工具 | | Pinia | 2.1+ | Vue.js 的直观状态管理库 | | Element Plus | 2.5+ | Vue 3 组件库 | | Vue Router | 4.2+ | Vue.js 官方路由管理器 | #### 架构特色 ```mermaid graph TB A[用户访问] --> B[Vue Router 路由器] B --> C[权限守卫] C --> D[Layout 布局组件] D --> E[Page 页面组件] E --> F[Business 业务组件] F --> G[API 接口层] H[Pinia 状态管理] --> E I[全局组件] --> E J[自定义指令] --> E K[Hooks 封装] --> E ``` - **模块化设计**: 按功能模块划分目录结构，职责明确 - **组件化开发**: 高度可复用的组件库，提高开发效率 - **TypeScript 支持**: 全面的类型定义，提供更好的开发体验 - **状态管理**: 采用 Pinia 实现统一的状态管理，支持持久化 - **权限控制**: 支持动态路由和按钮级别权限控制 ### 🔨 项目功能 - 使用 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 规范提交信息 ### 项目截图 📷 - 登录页： ![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) ### 📱 核心组件 #### ProTable 表格组件 **高级表格解决方案**，基于 Element Plus Table 二次封装，支持： - 配置化列定义（Columns） - 自动分页、排序、筛选 - 列展示/隐藏、宽度调整 - 多选操作、行内操作 - 自定义搜索表单 #### 上传组件集 提供多种上传场景的组件： - **Img**: 单图上传组件 - **Imgs**: 多图上传组件 - **Files**: 文件上传组件 - **DocView**: 文档预览组件 - **PdfView**: PDF 预览组件 - **VideoView**: 视频播放组件 #### 选择器组件集 丰富的选择器组件，满足不同业务场景： - **cascader-select**: 级联选择器 - **user-select**: 用户选择器 - **org-select**: 组织选择器 - **tag-select**: 标签选择器 - **common-select**: 通用选择器 #### ECharts 图表组件 内置丰富的图表类型： - 柱状图、折线图、饼图 - 雷达图、水球图、地图 - 支持主题切换和响应式设计 ### 📊 状态管理 采用 **Pinia** 作为状态管理工具，模块化管理应用状态： - **user**: 用户信息和认证状态 - **auth**: 权限和菜单状态 - **global**: 全局配置（主题、语言、布局等） - **tabs**: 标签页管理 - **keepAlive**: 页面缓存管理 - **data**: 全局数据管理 ### 🛠️ 工具函数 & Hooks 提供丰富的工具函数和 Hooks 封装： #### Hooks 封装 - **useTable**: 表格逻辑封装 - **useAuthButtons**: 按钮权限控制 - **useTheme**: 主题切换逻辑 - **useDownload**: 文件下载封装 - **useHandleData**: 数据处理封装 - **useSelection**: 表格多选逻辑 #### 工具函数 - **颜色处理**: 主题颜色计算和转换 - **字典工具**: 数据字典管理 - **文件操作**: 文件下载、上传工具 - **错误处理**: 全局错误捕获和处理 ### 📝 开发规范 #### 代码规范 - **ESLint**: JavaScript/TypeScript 代码检查 - **Prettier**: 代码格式化工具 - **Stylelint**: CSS/SCSS 样式检查 - **EditorConfig**: 统一编辑器配置 #### Git 规范 - **Husky**: Git Hooks 管理 - **lint-staged**: 提交前代码检查 - **Commitlint**: 提交信息规范检查 - **cz-git**: 交互式提交工具 ### 📚 文件资源目录 ```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 全局配置文件 ``` ### 🚀 快速开始 #### 环境要求 在开始开发之前，请确保您的开发环境满足以下要求： | 工具 | 版本要求 | 描述 | | ------- | --------- | --------------------- | | Node.js | >= 16.0.0 | JavaScript 运行时环境 | | pnpm | 最新版本 | 推荐的包管理器 | | Git | >= 2.0.0 | 版本控制工具 | | VSCode | 最新版本 | 推荐的代码编辑器 | #### 安装步骤 1. **克隆项目** ```bash # 使用 Gitee（国内推荐） git clone https://gitee.com/HalseySpicy/Geeker-Admin.git # 或使用 GitHub git clone https://github.com/HalseySpicy/Geeker-Admin.git # 进入项目目录 cd Geeker-Admin ``` 2. **安装依赖** ```bash # 使用 pnpm（推荐） pnpm install # 或使用 npm npm install # 或使用 yarn yarn install ``` 3. **启动开发服务器** ```bash # 启动开发环境 pnpm dev # 或使用 pnpm serve ``` 4. **浏览器访问** 打开浏览器访问: [http://localhost:3000](http://localhost:3000) #### 构建命令 ```bash # 开发环境构建 pnpm build:dev # 测试环境构建 pnpm build:test # 生产环境构建 pnpm build:pro # 预览构建结果 pnpm preview ``` #### 代码检查命令 ```bash # ESLint 检查代码 pnpm lint:eslint # Prettier 格式化代码 pnpm lint:prettier # Stylelint 检查样式 pnpm lint:stylelint # 执行所有检查 pnpm lint:lint-staged ``` #### Git 提交 ```bash # 使用交互式提交（推荐） pnpm commit # 传统提交方式 git add . git commit -m "feat: 添加新功能" git push ``` ### 💻 开发指南 #### 推荐的 VSCode 插件 在 `.vscode/extensions.json` 中推荐了以下插件： - **Vue Language Features (Volar)**: Vue 3 语言支持 - **TypeScript Vue Plugin (Volar)**: Vue 中的 TypeScript 支持 - **ESLint**: 代码检查 - **Prettier**: 代码格式化 - **Stylelint**: 样式检查 - **Auto Rename Tag**: 自动重命名配对标签 - **Bracket Pair Colorizer**: 括号颜色区分 #### 环境变量配置 项目支持多环境配置，相关配置文件： - `.env`: 公共配置 - `.env.development`: 开发环境配置 - `.env.test`: 测试环境配置 - `.env.production`: 生产环境配置 #### 部署指南 **Nginx 部署示例**： ```nginx server { listen 80; server_name your-domain.com; root /var/www/geeker-admin/dist; index index.html; # gzip 压缩 gzip on; gzip_types text/css application/javascript application/json; # 处理 Vue Router 的 history 模式 location / { try_files $uri $uri/ /index.html; } # 静态资源缓存 location /assets/ { expires 1y; add_header Cache-Control "public, immutable"; } } ``` **Docker 部署**： ```dockerfile # Dockerfile FROM nginx:alpine COPY dist/ /usr/share/nginx/html/ COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` ### 🌎 浏览器支持 - 本地开发推荐使用 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 ### 微信交流群 👨‍👨‍👦‍👦 微信一群、二群、三群、四群已满，扫描二维码进入五群（支持知识付费）🤪 | 微信二维码 | | :-----------------------------------------------------------------------------------: | | | ### 捐赠 🍵 如果你正在使用这个项目或者喜欢这个项目的，可以通过以下方式支持我： - Star、Fork、Watch 一键三连 🚀 - 通过微信、支付宝一次性捐款 ❤ | 微信 | 支付宝 | | :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | | Alipay QRcode | Wechat QRcode | ### 🤝 贡献指南 欢迎大家参与 Geeker-Admin 的开发！如果您发现了 Bug 或有新的功能建议，请按照以下方式参与： #### 提交 Issue 1. 在 [GitHub Issues](https://github.com/HalseySpicy/Geeker-Admin/issues) 或 [Gitee Issues](https://gitee.com/HalseySpicy/Geeker-Admin/issues) 提交问题 2. 使用清晰的标题和详细的描述 3. 提供重现步骤和环境信息 #### 提交 Pull Request 1. Fork 项目到您的 GitHub 账户 2. 创建新的特性分支: `git checkout -b feature/your-feature` 3. 提交您的修改: `git commit -m 'feat: add some feature'` 4. 推送到分支: `git push origin feature/your-feature` 5. 提交 Pull Request #### 开发规范 - 遵循项目的代码规范（ESLint + Prettier） - 提交信息遵循 [Conventional Commits](https://conventionalcommits.org/) 规范 - 确保代码通过所有检查（`pnpm lint:lint-staged`） ### 📜 License 本项目基于 [MIT License](./LICENSE) 开源协议，您可以自由地使用、修改和分发。 ### 🚀 相关项目 - [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架 - [Element Plus](https://element-plus.org/) - Vue 3 组件库 - [Vite](https://vitejs.dev/) - 新一代前端构建工具 - [Pinia](https://pinia.vuejs.org/) - Vue 状态管理库 - [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集 ---

如果这个项目对您有帮助，请给个 ⭐️ Star 支持一下！

Made with ❤️ by Geeker