[开源]一个清新优雅、高颜值且功能强大的后台管理系统 可免费商用

开源系统流程管理
2026-06-28 06:28 1 次浏览 • 0 次下载 0KB
[开源]一个清新优雅、高颜值且功能强大的后台管理系统 可免费商用

一、开源项目简介

SnowAdmin

SnowAdmin 是一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite6, TypeScript, Pinia。它内置了丰富的主题配置和组件,代码规范严谨,实现了自动化的文件路由系统。SnowAdmin 为您提供了一站式的后台管理解决方案,无需额外配置,开箱即用。同样是一个快速学习前沿技术的最佳实践。

二、开源协议

使用MIT开源协议

SnowAdmin 是免费和开源的,可免费用于学习、商业使用 。

三、界面展示

先行预览 ️

图片
图片
图片
图片
图片
图片
图片
图片
图片
图片

四、功能概述

图片

五、技术选型

环境准备 ️

确保你的环境满足以下要求(重要):

  • git
    你需要 git 来克隆和管理项目版本。
  • NodeJS
    >=18.12.0,推荐 20.12.0 或更高。
  • pnpm
    >= 8.7.0,推荐最新版本。

安装使用步骤

获取代码

# 克隆代码
git clone SnowAdmin

安装依赖

安装项目依赖

pnpm install

插件配置 ️

安装 Vue - Official,禁用 Vetur

  • Vue - Official - Vue 服务插件

项目启动

{
  // 开发环境启动
  "dev": "vite",
  // 开发环境构建
  "build:dev": "vue-tsc && vite build --mode development",
  // 生产环境构建
  "build:prod": "vue-tsc && vite build --mode production",
  // 测试环境构建
  "build:test": "vue-tsc && vite build --mode test",
  // 预览环境启动
  "preview": "vite preview"
}

文件资源目录

SnowAdmin
├─ .husky                 # husky 配置文件
├─ .vscode                # VSCode 推荐配置
├─ build                  # vite项目配置目录
├─ public                 # 静态资源文件(该文件夹不会被打包)
├─ src
│  ├─ api                 # API 接口管理
│  ├─ assets              # 静态资源文件
│  ├─ components          # 全局组件
│  ├─ config              # 全局配置项
│  ├─ directives          # 全局自定义指令文件
│  ├─ globals             # 全局函数
│  ├─ hooks               # 常用 Hooks 封装
│  ├─ lang                # 语言国际化 i18n
│  ├─ layout              # 框架布局模块
│  ├─ mock                # 本地数据mock
│  ├─ router              # 路由管理
│  ├─ store               # pinia store
│  ├─ style               # 全局样式文件
│  ├─ typings             # 全局 ts 声明
│  ├─ utils               # 常用工具库
│  ├─ views               # 项目所有页面
│  ├─ App.vue             # 项目主组件
│  ├─ main.ts             # 项目入口文件
│  └─ vite-env.d.ts       # 指定 ts 识别 vue
├─ .editorconfig          # 代码编辑器配置文件
├─ .env                   # 通用环境配置
├─ .env.development       # 开发环境配置
├─ .env.production        # 生产环境配置
├─ .env.test              # 测试环境配置
├─ .eslintignore          # 忽略 Eslint 校验
├─ .eslintrc.cjs          # Eslint 校验配置文件
├─ .gitignore             # 忽略 git 提交
├─ .prettierignore        # 忽略 Prettier 格式化
├─ .prettierrc.cjs        # Prettier 格式化配置
├─ .stylelintignore       # 忽略 Stylelint 校验
├─ .stylelintrc.cjs       # Stylelint 格式化配置
├─ commitlint.config.cjs  # git 提交规范配置
├─ index.html             # 入口 html
├─ LICENSE                # 开源协议
├─ lint-staged.config.cjs # lint-staged 配置文件
├─ package-lock.json      # 依赖包包版本锁
├─ package.json           # 依赖包管理
├─ pnpm-lock.yaml         # 依赖包包版本锁
├─ README.md              # README 介绍
├─ tsconfig.json          # typescript 全局配置
└─ vite.config.ts         # vite 全局配置文件

鸣谢列表

  • vue
  • axios
  • nprogress
  • sortablejs
  • sass
  • typescript
  • vite
  • wangeditor
  • qrcodejs
  • print-js
  • eslint
  • prettier
  • arco.design
  • pinyin-pro
  • qrcode
  • jsbarcode
  • fingerprintjs2

特别鸣谢

  • vue-next-admin
  • Gi-admin
  • Geeker-Admin

感谢以上框架为本项目提供了帮助,项目中的很多设计思想值得参考和学习,再次感谢。