Geeker Admin后臺管理框架
Geeker Admin 是基于 Vue3.2、TypeScript、Vite2、Pinia、Element-Plus 開發(fā)的一套后臺管理模板。
項目功能
- ?? 使用 Vue3.2 開發(fā)（單文件組件
＜script setup＞） - ?? 采用 vite2 作為項目開發(fā)工具（配置了 Gzip 打包、圖片壓縮、跨域代理、打包預(yù)覽工具……）
- ?? 整個項目集成了 TypeScript （完全是為了想學(xué)習(xí) ??）
- ?? 使用 pinia 替代 Vuex，輕量、簡單、易用（香啊~??）
- ?? 使用 TypeScript 對 Axios 整個二次封裝 （全局錯誤攔截、常用請求封裝、重復(fù)請求取消……）
- ?? 對表格的所有操作基本都封裝成了 Hooks （表格搜索、重置、查詢、分頁、多選、單條數(shù)據(jù)操作、文件上傳、下載、格式化單元格）
- ?? 基于 Element 二次封裝 Pro-Table 組件 ，表格頁面全部傳成配置項 Columns
- ?? 支持 Element 組件大小切換，i18n 國際化（暫時沒配置所有文件，根據(jù)項目自行配置）
- ?? 使用 prettier 統(tǒng)一格式化代碼，集成 Eslint 代碼校驗規(guī)范
- ?? 使用 vue-router 進(jìn)行路由權(quán)限攔截、按鈕權(quán)限設(shè)置
- ?? 使用 keep-alive 對整個頁面進(jìn)行緩存，支持多級嵌套頁面（路由里可配置）
- ?? 常用自定義指令開發(fā)（復(fù)制、水印、拖拽、節(jié)流、防抖、長按……）
安裝使用步驟
- Clone：
git clone https://gitee.com/laramie/Geeker-Admin.git
git clone https://github.com/HalseySpicy/Geeker-Admin.git
- Install：
npm install
cnpn install
# npm install 安裝失敗，請升級 nodejs 到 16 以上，或嘗試使用以下命令：
npm install --registry=https://registry.npm.taobao.org
- Run：
npm run dev
- Build：
# 開發(fā)環(huán)境
npm run build:dev
# 測試環(huán)境
npm run build:test
# 生產(chǎn)環(huán)境
npm run build:pro
- Lint：
# eslint檢測
npm run lint:eslint
# prettier格式化修復(fù)
npm run lint:prettier
項目截圖
1、登錄頁：
2、首頁：
3、表格頁：
4、數(shù)據(jù)大屏：
文件資源目錄
Geeker-Admin ├─ .vscode # vscode推薦配置 ├─ public # 靜態(tài)資源文件（忽略打包） ├─ src │ ├─ api # API 接口管理 │ ├─ assets # 靜態(tài)資源文件 │ ├─ components # 全局組件 │ ├─ config # 全局配置項 │ ├─ directives # 全局指令文件 │ ├─ enums # 項目枚舉 │ ├─ hooks # 常用 Hooks │ ├─ language # 語言國際化 │ ├─ layout # 框架布局 │ ├─ routers # 路由管理 │ ├─ store # pinia store │ ├─ styles # 全局樣式 │ ├─ typings # 全局 ts 聲明 │ ├─ utils # 工具庫 │ ├─ views # 所有頁面 │ ├─ App.vue # 入口頁面 │ ├─ env.d.ts # ts 識別 vue 文件 │ └─ main.ts # 入口文件 ├─ .editorconfig # 編輯器配置（格式化） ├─ .env # vite 配置 ├─ .env.development # 開發(fā)環(huán)境配置 ├─ .env.production # 生產(chǎn)環(huán)境配置 ├─ .env.test # 測試環(huán)境配置 ├─ .eslintignore # 忽略 Eslint 校驗 ├─ .eslintrc.js # Eslint 校驗配置 ├─ .gitignore # git 提交忽略 ├─ .prettierignore # 忽略 prettier 格式化 ├─ .prettierrc.js # prettier 配置 ├─ index.html # 入口 html ├─ LICENSE # 開源協(xié)議 ├─ package-lock.json # 包版本鎖 ├─ package.json # 包管理 ├─ postcss.config.js # postcss 配置 ├─ README.md # README 介紹 ├─ STANDARD.md # 項目規(guī)范文檔 ├─ tsconfig.json # typescript 全局配置 └─ vite.config.ts # vite 配置
評論
圖片
表情