一款基于 Vue3 + TypeScript 開源的后臺管理框架！

Geeker-Admin —— 一款基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 開源的后臺管理框架，封裝了一些常用組件、Hooks、指令、動態路由、按鈕級別權限控制等功能。

大家好，我是 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陳序員】，回復【開源項目交流群】進群，或者通過公眾號下方的菜單添加個人微信，并備注【開源項目交流群】，通過后拉你進群。

大家的點贊、收藏和評論都是對作者的支持，如文章對你有幫助還請點贊轉發支持下，謝謝！

posted @ 2025-06-06 09:20 Java陳序員閱讀(321) 評論(0) 收藏舉報

刷新頁面返回頂部