克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

SnowAdmin

介绍 📖

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

版本 📦

预览及文档

项目预览地址:SnowAdmin

项目文档地址:SnowAdmin-开发指南

代码仓库

平台 仓库地址
GitHub Github 仓库
Gitee Gitee 仓库

先行预览

登录页

首页

文件库

国际化

横向布局

混合布局

主题配置

黑暗模式-1

黑暗模式-2

黑暗模式-3

项目功能 🔨

  • 清晰的项目架构:结构清晰,优雅易懂,代码全注释。
  • 前沿技术应用:采用 Vue3, Vite5, TypeScript等最新流行的技术栈。
  • 使用 Pinia 替代 Vuex,轻量、简单、易用,集成 Pinia 持久化插件
  • 支持 Arco-Design 组件大小切换、多主题布局、暗黑模式、i18n 国际化
  • 使用 VueRouter 配置动态路由权限拦截、路由懒加载,支持页面按钮权限控制
  • 使用 KeepAlive 对页面进行缓存,支持多级嵌套路由缓存
  • 使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范
  • 使用 husky、lint-staged、commitlint等插件,规范提交信息
  • 丰富的页面组件:内置多样页面和组件,包括 401、404、500 页面,以及布局组件、标签组件、主题配置组件等。

环境准备 🏝️

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

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

安装使用步骤 📔

从 GitHub 获取代码 🔗

# 克隆代码
git clone https://github.com/WANG-Fan0912/SnowAdmin.git

从 Gitee 获取代码 🔗

# 克隆代码
git clone https://gitee.com/wang_fan_w/SnowAdmin.git

安装依赖 📌

安装项目依赖

pnpm install

插件配置 🛠️

安装 Vue - Official,禁用 Vetur

项目启动 🚀

{
  // 开发环境启动
  "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          # 全局指令文件
│  ├─ 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                   # vite 常用配置
├─ .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 全局配置文件

浏览器支持 🌎

  • 本地开发推荐使用 Chrome 最新版浏览器 Download
  • 生产环境支持现代浏览器,不再支持 IE 浏览器,更多浏览器可以查看 Can I Use Es Module
IE Edge Firefox Chrome Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions

鸣谢列表 🧩

特别鸣谢 🎉

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

支持作者 🌟

如果觉得框架不错,或者已经在使用了,希望你可以去 Github 或者 Gitee 帮我点个 ⭐ Star,这将是对我极大的鼓励与支持。

免责条款 📫

您充分了解并同意,您必须为自己使用本服务及注册帐号下的一切行为负责,包括您所发表的任何内容以及由此产生的任何后果。您应对本服务中的内容自行加以判断,并自行承担因使用内容而引起的所有风险。

SnowAdmin 对网站上所显示的信息或资料的准确性、内容、完整性、合法性、可靠性、可操作性或可用性不承担任何责任。

SnowAdmin 二次开发使用者因为违法而触犯中华人民共和国法律的,一切后果自己负责,SnowAdmin 作者不承担任何责任。

本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。

学习 & 商用 🌈

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

捐赠

微信 支付宝
微信 支付宝
MIT License Copyright (c) 2024 兔子先森Ace Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

SnowAdmin 一款基于 Vue3、TypeScript、Vite5、Pinia、Arco-Design 开源的后台管理框架,符合直觉的使用模式,使用目前最新技术栈开发。 展开 收起
TypeScript
MIT
取消

发行版

暂无发行版

贡献者 (2)

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化