1 Star 0 Fork 1.1K

coshare / Geeker-Admin

forked from HalseySpicy / Geeker-Admin 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
0BSD

Vue 3.2 + TypeScript + Pinia + Vite2 + Element-Plus 管理系统(开源啦 🎉🎉)

banner

前言 📖

Geeker Admin,基于 Vue3.2、TypeScript、Vite2、Pinia、Element-Plus 开源的一套后台管理模板,目前利用空余时间开发 🕒🕒。项目中很多功能、样式都是借鉴其它的管理系统,但代码是完全自己编写的,整个项目还有很多地方不完善,后期会持续更新(项目文档),希望大家能多提意见。

?为什么开发这个管理系统 🤷‍♂️

  • 主要是学习下 Vue3 + TypeScript
  • 目前看了很多 Vue3 的开源后台管理系统,感觉都非常庞大,很多功能基本上也用不到,所以自己就尝试写了一下这个管理系统(适合自己的才是最好的 🤣)

一、在线预览 👀

二、Git 仓库地址 (欢迎 Star⭐)

三、🔨🔨🔨 项目功能

  • 🚀 使用 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:
# Gitee
git clone https://gitee.com/laramie/Geeker-Admin.git
# GitHub
git clone https://github.com/HalseySpicy/Geeker-Admin.git
  • Install:
npm install
cnpm install

# npm install 安装失败,请升级 nodejs 到 16 以上,或尝试使用以下命令:
npm install --registry=https://registry.npm.taobao.org

# 暂时没用,只是为了指定版本
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.5 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 dev
npm 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

五、项目截图 📷

1、登录页:

login_bg03

login_dark01

2、首页:

home_light

home-dark

3、表格页:

table_light

table-dark

4、数据大屏:

dataScreen02

六、文件资源目录 📚

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 格式化
├─ 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            # 项目规范文档
├─ stylelint.config.js    # stylelint 格式化配置
├─ tsconfig.json          # typescript 全局配置
└─ vite.config.ts         # vite 配置

七、浏览器支持

默认支持以下浏览器,vue3.2 不支持 IE 浏览器。更多浏览器可以查看 Can I Use Es Module

💢 请不要使用 QQ 浏览器开发,QQ 浏览器 不识别 某些 ES6 以上语法

Edge Firefox Chrome Safari
last 2 versions last 2 versions last 2 versions last 2 versions

八、项目后台接口 🧩

项目后台接口完全采用 Mock 数据,感谢以下 Mock 平台支持

九、微信交流群

😀 微信群超过 200 人了,请加我好友,我拉大家进群

微信二维码
Wechat QRcode

十、捐赠 🍵

如果你正在使用这个项目或者喜欢这个项目的,可以通过以下方式鼓励我

  • Star、Fork、Watch 一键三连 🚀🚀

  • 通过 微信、支付宝 一次性捐款,够维护访问地址就行 🤣🤣

微信 支付宝
Wechat QRcode Alipay QRcode
Copyright (c) 2022 Halsey Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

简介

✨✨✨ Geeker Admin,基于 Vue3.2、TypeScript、Vite2、Pinia、Element-Plus 开源的一套后台管理框架。 展开 收起
TypeScript
0BSD
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/katacode/Geeker-Admin.git
git@gitee.com:katacode/Geeker-Admin.git
katacode
Geeker-Admin
Geeker-Admin
master

搜索帮助

14c37bed 8189591 565d56ea 8189591