一款基于 Vue3 + TypeScript 开源的后台管理框架！

大家好，我是 Java陈序员。

今天，给大家介绍一款基于 Vue3 + TypeScript 开源的后台管理框架！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

Geeker-Admin —— 一款基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 开源的后台管理框架，封装了一些常用组件、Hooks、指令、动态路由、按钮级别权限控制等功能。

功能特色：

最新技术栈开发：使用 Vue3.4 + TypeScript + Vite5 开发，采用单文件组件；用 Pinia 替代 Vuex，轻量、简单、易用，并且集成了 Pinia 持久化插件
主题与布局：支持 Element 组件大小切换、多主题布局，支持暗黑模式、灰色模式、色弱模式配置；支持分栏布局、横向/纵向/经典布局切换；支持 i18n 国际化
丰富的组件：基于 Element 二次封装 ProTable 组件，表格页面全部为配置项 Columns，提供强大功能，如打印、列对齐方式功能；还提供图标选择组件、图片上传组件及其属性、分类筛选器、wangEditor 富文本编辑器（完成二次封装）等
权限管理：使用 VueRouter 配置动态路由权限拦截、路由懒加载，支持页面、按钮级别权限控制
自定义指令：开发了常用自定义指令，如权限、复制、水印、拖拽、节流、防抖、长按等
代码规范：使用 Prettier 统一格式化代码，集成 ESLint、Stylelint 进行代码校验规范；使用 husky、lint - staged、commitlint、czg、cz - git 规范提交信息

1、克隆项目

## GitHub
git clone https://github.com/HalseySpicy/Geeker-Admin.git

## Gitee
git clone https://gitee.com/HalseySpicy/Geeker-Admin.git

2、进入项目目录并安装依赖

cd Geeker-Admin

pnpm install

3、运行项目

pnpm run dev

## 或者
pnpm run serve

4、运行成功后，浏览器访问：

http://localhost:8848/

5、打包部署

## 开发环境
pnpm run build:dev

## 测试环境
pnpm run build:test

## 生产环境
pnpm run build:pro

6、代码检查与格式化

## eslint 检测代码
pnpm run lint:eslint

## prettier 格式化代码
pnpm run lint:prettier

## stylelint 格式化样式
pnpm run lint:stylelint

最后，贴上项目地址：

项目地址：https://github.com/HalseySpicy/Geeker-Admin

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/

我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。

但是任何人在群里打任何广告，都会被 T 掉。

如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：

关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！