一款基于 Vue3 + TypeScript 开源的后台管理框架！
<p>大家好，我是 <code>Java陈序员</code>。</p><p>今天，给大家介绍一款基于 Vue3 + TypeScript 开源的后台管理框架！</p>
<blockquote>
<p>关注微信公众号：【Java陈序员】，获取<strong>开源项目分享、AI副业分享、超200本经典计算机电子书籍等。</strong></p>
</blockquote>
<h2 id="项目介绍">项目介绍</h2>
<p><code>Geeker-Admin</code> ——一款基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 开源的后台管理框架，封装了一些常用组件、Hooks、指令、动态路由、按钮级别权限控制等功能。</p>
<p><strong>功能特色</strong>：</p>
<ul>
<li><strong>最新技术栈开发</strong>：使用 Vue3.4 + TypeScript + Vite5 开发，采用单文件组件；用 Pinia 替代 Vuex，轻量、简单、易用，并且集成了 Pinia 持久化插件</li>
<li><strong>主题与布局</strong>：支持 Element 组件大小切换、多主题布局，支持暗黑模式、灰色模式、色弱模式配置；支持分栏布局、横向/纵向/经典布局切换；支持 i18n 国际化</li>
<li><strong>丰富的组件</strong>：基于 Element 二次封装 ProTable 组件，表格页面全部为配置项 Columns，提供强大功能，如打印、列对齐方式功能；还提供图标选择组件、图片上传组件及其属性、分类筛选器、wangEditor 富文本编辑器（完成二次封装）等</li>
<li><strong>权限管理</strong>：使用 VueRouter 配置动态路由权限拦截、路由懒加载，支持页面、按钮级别权限控制</li>
<li><strong>自定义指令</strong>：开发了常用自定义指令，如权限、复制、水印、拖拽、节流、防抖、长按等</li>
<li><strong>代码规范</strong>：使用 Prettier 统一格式化代码，集成 ESLint、Stylelint 进行代码校验规范；使用 husky、lint - staged、commitlint、czg、cz - git 规范提交信息</li>
</ul>
<h2 id="项目截图">项目截图</h2>
<ul>
<li><strong>登录页</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/Geeker-Admin/img-20250529222123.png"></p>
<ul>
<li><strong>Dashboard</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/Geeker-Admin/img-20250529222150.png"></p>
<ul>
<li><strong>数据大屏</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/Geeker-Admin/img-20250529222201.png"></p>
<ul>
<li><strong>表格页</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/Geeker-Admin/img-20250529222220.png"></p>
<ul>
<li><strong>富文本编辑器</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/Geeker-Admin/img-20250529222454.png"></p>
<ul>
<li><strong>暗黑模式</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/Geeker-Admin/img-20250529222546.png"></p>
<ul>
<li><strong>分栏布局</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/Geeker-Admin/img-20250529222627.png"></p>
<h2 id="本地开发">本地开发</h2>
<p>1、克隆项目</p>
<pre><code class="language-bash">## GitHub
git clone https://github.com/HalseySpicy/Geeker-Admin.git
## Gitee
git clone https://gitee.com/HalseySpicy/Geeker-Admin.git
</code></pre>
<p>2、进入项目目录并安装依赖</p>
<pre><code class="language-bash">cd Geeker-Admin
pnpm install
</code></pre>
<p>3、运行项目</p>
<pre><code class="language-bash">pnpm run dev
## 或者
pnpm run serve
</code></pre>
<p>4、运行成功后，浏览器访问：</p>
<pre><code class="language-bash">http://localhost:8848/
</code></pre>
<p>5、打包部署</p>
<pre><code class="language-bash">## 开发环境
pnpm run build:dev
## 测试环境
pnpm run build:test
## 生产环境
pnpm run build:pro
</code></pre>
<p>6、代码检查与格式化</p>
<pre><code class="language-bash">## eslint 检测代码
pnpm run lint:eslint
## prettier 格式化代码
pnpm run lint:prettier
## stylelint 格式化样式
pnpm run lint:stylelint
</code></pre>
<p>最后，贴上项目地址：</p>
<pre><code>项目地址：https://github.com/HalseySpicy/Geeker-Admin
</code></pre>
<h2 id="最后">最后</h2>
<p>推荐的开源项目已经收录到 <code>GitHub</code> 项目，欢迎 <code>Star</code>：</p>
<pre><code>https://github.com/chenyl8848/great-open-source-project
</code></pre>
<p>或者访问网站，进行在线浏览：</p>
<pre><code>https://chencoding.top:8090/#/
</code></pre>
<p><img src="https://chen-coding.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240629100336.png"></p>
<p><strong>我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目</strong>。</p>
<p><strong>但是任何人在群里打任何广告，都会被 T 掉</strong>。</p>
<p><strong>如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群</strong>：</p>
<p><strong>关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群</strong>。</p>
<blockquote>
<p>大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！</p>
</blockquote>
<hr><br><br>
来源：https://www.cnblogs.com/codechen8848/p/18910979
頁:
[1]