基於 Vue3、TypeScript、Vite2、Pinia 開源的後臺管理框架

一、開源項目簡介

Geeker Admin，基於 Vue3.2、TypeScript、Vite2、Pinia、Element-Plus 開源的一套後臺管理框架。

二、開源協議

使用 0BSD 開源協議

三、界面展示

項目截圖

1、登錄頁：

2、首頁：

3、表格頁：

4、數據大屏：

四、功能概述

項目功能

使用 Vue3.2 開發，單文件組件＜script setup＞
採用 Vite2 作爲項目開發、打包工具（配置了 Gzip 打包、TSX 語法、跨域代理、打包預覽工具……）
整個項目集成了 TypeScript （完全是爲了想學習）
使用 Pinia 替代 Vuex，輕量、簡單、易用（香啊~ 集成了持久化插件）
使用 TypeScript 對 Axios 整個二次封裝（全局錯誤攔截、常用請求封裝、全局請求 Loading、取消重複請求……）
對錶格的所有操作基本都封裝成了 Hooks （表格數據搜索、重置、查詢、分頁、多選、單條數據操作、文件上傳、下載、格式化單元格內容……）
基於 Element 二次封裝 Pro-Table 組件，表格頁面全部傳成配置項 Columns
支持 Element 組件大小切換、暗黑模式、i18n 國際化（i18n 暫時沒配置所有文件，根據項目自行配置）
使用 vue-router 進行路由權限攔截（403 頁面）、頁面按鈕權限配置、路由懶加載
使用 keep-alive 對整個頁面進行緩存，支持多級嵌套頁面（緩存路由裏可配置、頁面切換帶動畫）
常用自定義指令開發（複製、水印、拖拽、節流、防抖、長按……）
使用 Prettier 統一格式化代碼，集成 Eslint、Stylelint 代碼校驗規範（STANDARD.md 文件）
使用 husky、lint-staged、commitlint、commitizen、cz-git 規範提交信息（STANDARD.md 文件）

五、技術選型

Clone：

訪問一飛開源：https://code.exmay.com/

Install：

npm installcnpm install# npm install 安裝失敗，請升級 nodejs 到 16 以上，或嘗試使用以下命令：npm install --registry=https://registry.npm.taobao.org# 這裏只是爲了指定依賴包版本，防止沒有版本鎖 lock 而安裝最新依賴包，導致的項目報錯npm i @element-plus/icons-vue@1.1.4 @vueuse/core@8.0.1 axios@0.27.2 echarts@5.3.0 echarts-liquidfill@3.1.0 element-plus@2.2.6 js-md5@0.7.3 nprogress@0.2.0 pinia@2.0.12 pinia-plugin-persistedstate@1.6.1 qs@6.10.3 vue@3.2.25 vue-i18n@9.1.9 vue-router@4.0.12 vue3-seamless-scroll@1.2.0 --save

Run：

npm run devnpm run serve

Build：

# 開發環境npm run build:dev# 測試環境npm run build:test# 生產環境npm run build:pro

Lint：

# eslint 檢測代碼npm run lint:eslint# prettier 格式化代碼npm run lint:prettier# stylelint 格式化樣式lint:stylelint

commit：

# 提交代碼（提交前會自動執行 lint:lint-staged 命令）npm run commit

Geeker-Admin
├─ .vscode                # vscode推薦配置
├─ public                 # 靜態資源文件（忽略打包）
├─ src│  
├─ api                 # API 接口管理
│  ├─ assets              # 靜態資源文件
│  ├─ 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       # 開發環境配置
├─ .env.production        # 生產環境配置
├─ .env.test              # 測試環境配置
├─ .eslintignore          # 忽略 Eslint 校驗
├─ .eslintrc.js           # Eslint 校驗配置
├─ .gitignore             # git 提交忽略
├─ .prettierignore        # 忽略 prettier 格式化
├─ .prettierrc.js         # prettier 配置
├─ .stylelintignore       # 忽略 stylelint 格式化
├─ .stylelintrc.js        # stylelint 樣式格式化配置
├─ CHANGELOG.md           # 項目更新日誌
├─ commitlint.config.js   # git 提交規範配置
├─ index.html             # 入口 html
├─ LICENSE                # 開源協議文件
├─ lint-staged.config     # lint-staged 配置文件
├─ package-lock.json      # 依賴包包版本鎖
├─ package.json           # 依賴包管理
├─ postcss.config.js      # postcss 配置
├─ README.md              # README 介紹
├─ STANDARD.md            # 項目編碼規範說明書
├─ tsconfig.json          # typescript 全局配置
└─ vite.config.ts         # vite 配置

瀏覽器支持

默認支持以下瀏覽器，vue3.2 不支持 IE 瀏覽器。更多瀏覽器可以查看 Can I Use Es Module

請不要使用 QQ 瀏覽器開發，QQ 瀏覽器不識別某些 ES6 以上語法

pGmjP9

來源： https://www.toutiao.com/article/7123585618927469070/?log_from=97a90dba9aa82_1659661876707

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/XeisD4mCVksMFIsm7-K5BQ