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 |