SnowAdmin

SnowAdmin是一款基于Vue3、TypeScript、Vite5等最新技术栈开发的开源后台管理框架,提供RBAC权限控制、多主题布局、国际化支持等功能,具有清晰的项目架构和丰富的页面组件。

Check out SnowAdmin on CurateClick

• Copy the embed code to showcase this product on your website

• Share on X to spread the word about this amazing tool

SnowAdmin是什么一款基于 Vue3、TypeScript、Vite5、Pinia、Arco-Design 开源的后台管理框架,符合直觉的使用模式,使用目前最新技术栈开发。### 版本 📦预览及文档项目预览地址:SnowAdmin项目文档地址:SnowAdmin-开发指南代码仓库| 平台 | 仓库地址 || ------ | -------------------------------------------------------- || GitHub | Github 仓库 || Gitee | Gitee 仓库 |ImageImageImage### 主要功能- 清晰的项目架构:结构清晰,优雅易懂,代码全注释- 前沿技术应用:采用 Vue3, Vite5, TypeScript等最新流行的技术栈- 内置RBAC角色权限模型,实现路由、角色、按钮权限访问控制- 使用 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 获取代码 🔗bash# 克隆代码git clone https://github.com/WANG-Fan0912/SnowAdmin.git### 从 Gitee 获取代码 🔗bash# 克隆代码git clone https://gitee.com/wang_fan_w/SnowAdmin.git### 安装依赖 📌安装项目依赖bashpnpm install### 插件配置 🛠️安装 Vue - Official,禁用 Vetur- Vue - Official - Vue 服务插件### 项目启动 🚀json{ // 开发环境启动 "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"}### 文件资源目录 📚textSnowAdmin├─ .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 全局配置文件### 浏览器支持 🌎- 本地开发推荐使用 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 |

Latest Weekly Picks

make.ink favicon
Weekly Pick

Your AI tattoo generator for pro-grade concepts

Leo Wade
sellfy.com favicon
Weekly Pick

A code-free online store builder to turn views into revenue. Sell digital products, subscriptions, and merch, without fees or hassle.

Maris
www.videotoblog.ai favicon
Weekly Pick

Convert videos into awesome blog posts.

Video To Blog
www.sellerpic.ai favicon
Weekly Pick

SellerPic is the all-in-one AI design platform for e-commerce

SellerPic
fastimage.ai favicon
Weekly Pick

Fast Image AI instantly transforms your photos into stunning styles like Ghibli, Sketch, and Pixar. Effortlessly control image elements and create amazing effects with just one click.

Fast AI Team
linkedinpro.daisy.so favicon
Weekly Pick

AI-powered tool that transforms casual photos into professional LinkedIn headshots instantly. No photographer needed—just upload and download.

Gabriel
crevas.ai favicon
Weekly Pick

Crevas unifies Veo 3, Sora 2, Nano Banana and more into one intuitive canvas — so filmmakers can script, prompt, and generate cinematic stories without switching tools or losing consistency.

Spark Alpha
fotominiatur.com favicon
Weekly Pick

AI Foto Edit - Text to Image & Image Edit

foto miniatur