基于 Vue3.2 + Element-Plus 的后盾办理框架 Geeker Admin

雾中鹰

《开源精选》是咱们分享Github、gitee等开源社区中优质名目的栏目，包罗技术、学习、实用与各种乏味的内容。本期保举的是一个基于 Vue3.2 + Element-Plus 的后盾办理框架——Geeker Admin。

vucoidz5ywc.jpg

名目功用
使用 Vue3.2 开发，单文件组件 ＜script setup＞采取 Vite3 作为名目开发、打包工具（配置了 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、co妹妹itlint、co妹妹itizen、cz-git 标准提交信息（STANDARD.md 文件）名目截图登录页：

0izkxcoxkdz.jpg

pjfyojojmfy.jpg

首页：

ujyvrhbvmlt.jpg

ihbhs1hmugt.jpg

表格页：

fal3px3u1c1.jpg

5pkheggljsj.jpg

数据大屏：

jguk1w215gb.jpg

装置使用
Clone：# Gitee git clone http://gitee.com/laramie/Geeker-Admin.git # GitHub git clone http://github.com/HalseySpicy/Geeker-Admin.gitInstall：npm install cnpm install # npm install 装置失败，请降级 nodejs 到 16 以上，或尝试使用下列命令： npm install --registry=http://registry.npm.taobao.org # 这里只是为了指定依赖包版本，避免没有版本锁 lock 而装置最新依赖包，致使的名目报错 npm i @element-plus/[email protected] @vueuse/[email protected] @wangeditor/[email protected].十二 [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] qs@6.十一.0 [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] --saveRun：npm run dev npm run serveBuild：# 开发环境 npm run build:dev # 测试环境 npm run build:test # 出产环境 npm run build:pro开源协定：MIT
开源地址：http://github.com/HalseySpicy/Geeker-Admin