一款基于 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 规范提交信息
  

项目截图

• 登录页
  

• Dashboard
  

• 数据大屏
  

• 表格页
  

• 富文本编辑器
  

• 暗黑模式
  

• 分栏布局
  

本地开发

1、克隆项目

1. ## GitHub
2. git clone https://github.com/HalseySpicy/Geeker-Admin.git
4. ## Gitee
5. git clone https://gitee.com/HalseySpicy/Geeker-Admin.git

复制代码

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

1. cd Geeker-Admin
3. pnpm install

复制代码

3、运行项目

1. pnpm run dev
3. ## 或者
4. pnpm run serve

复制代码

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

1. http://localhost:8848/

复制代码

5、打包部署

1. ## 开发环境
2. pnpm run build:dev
4. ## 测试环境
5. pnpm run build:test
7. ## 生产环境
8. pnpm run build:pro

复制代码

6、代码检查与格式化

1. ## eslint 检测代码
2. pnpm run lint:eslint
4. ## prettier 格式化代码
5. pnpm run lint:prettier
7. ## stylelint 格式化样式
8. pnpm run lint:stylelint

复制代码

最后，贴上项目地址：

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

复制代码

最后

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

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

复制代码

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

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

复制代码

我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。
但是任何人在群里打任何广告，都会被 T 掉。
如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：
关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！