兼容移动端！一款开源免费的中后台管理系统模版！
大家好，我是 Java陈序员。你是否还在为搭建中后台管理系统从零开始编写代码而烦恼吗？
今天给大家推荐一款开源免费且功能强大的中后台管理系统模板，兼容移动端！
关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。
项目介绍
vue-pure-admin —— 一款开源免费且开箱即用的中后台管理系统模版，完全采用 ECMAScript 模块（ESM）规范来编写和组织代码，使用了最新的 Vue3 主流技术开发。
功能特色：
[*]稳定最新的技术栈：基于 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发
[*]内置丰富的组件：除了提供颜色选择器、日期选择器、时间选择器、进度条、折叠面板等多种常用急促组件示例，并且集成代码编辑器（CodeMirror）、Markdown 编辑器、JSON 编辑器、表单设计器等组件
[*]高度可配置的主题：支持高度可配置的主题以及暗黑主题适配，并且提供左侧、顶部、混合、双栏四种菜单布局模式
[*]完善的系统管理模块：提供包含用户管理、角色管理、部门管理等基础权限管理功能，支持菜单权限配置
[*]轻量高效：提供国际化和非国际化两种精简版本，内置完善的打包优化方案，开启 brotli 压缩和 cdn 替换本地库模式后，可降至 350kb 以下
[*]多场景适配：支持 PC 端、暗色风格及移动端适配，界面美观，交互流畅
功能预览
PC 端
暗黑版本
移动端
本地开发
依赖 Node.js 环境。
1、克隆或下载项目源码
git clone https://github.com/pure-admin/vue-pure-admin.git2、代码目录结构
├── .github# GitHub 配置文件
│ ├── ISSUE_TEMPLATE# 问题提交参考模板
│ ├── workflows git# 工作流
├── .husky# 代码提交前校验配置文件
├── .vscode# IDE 工具推荐配置文件
│ │ ├── extensions.json# 一键安装平台推荐的 vscode 插件
│ │ ├── settings.json# 设置扩展程序或 vscode 编辑器的一些属性
│ │ ├── vue3.0.code-snippets# vue3.0 代码片段
│ │ └── vue3.2.code-snippets# vue3.2 代码片段
│ │ └── vue3.3.code-snippets# vue3.3 代码片段
├── build# 构建工具
│ │ ├── cdn.ts# 打包时采用 cdn 模式
│ │ ├── compress.ts# 打包时启用 gzip 压缩或 brotli 压缩
│ │ ├── info.ts# 输出打包信息（大小、用时）
│ │ ├── optimize.ts# vite 依赖预构建配置项
│ │ ├── plugins.ts# vite 相关插件存放处
│ │ ├── utils.ts# 构建工具常用方法抽离
├── locales# 国际化文件存放处
│ │ ├── en.yaml# 英文配置
│ │ ├── zh-CN.yaml# 中文配置
├── mock# mock 模拟后台数据
│ │ ├── asyncRoutes.ts# 模拟后台返回动态路由
│ │ ├── ...
├── node_modules# 模块依赖
├── public# 静态资源
│ │ ├── audio# 音频文件
│ │ ├── html# 静态 iframe 页面
│ │ ├── wasm# wasm 文件以及胶水代码
│ │ ├── favicon.ico# favicon
│ │ ├── logo.svg# logo
│ │ ├── platform-config.json# 全局配置文件（打包后修改也可生效）
├── src
│ ├── api# 接口请求统一管理
│ ├── assets# 字体、图片等静态资源
│ ├── components# 自定义通用组件
│ │ ├── ReAnimateSelector# (https://animate.style/) 选择器组件
│ │ ├── ReAuth# 按钮级别权限组件（根据路由meta中的auths字段进行判断）
│ │ ├── ReBarcode# 条形码组件
│ │ ├── ReCol# 封装 element-plus 的 el-col 组件
│ │ ├── ReCountTo# 数字动画组件
│ │ ├── ReCropper# 图片裁剪组件
│ │ ├── ReCropperPreview# 图片裁剪预览组件
│ │ ├── ReDialog# 基于 element-plus 中 el-dialog 组件开发的函数式弹框
│ │ ├── ReFlicker# 圆点、方形闪烁动画组件
│ │ ├── ReFlop# 时间翻牌组件
│ │ ├── ReFlowChart# LogicFlow 流程图组件
│ │ ├── ReIcon# 图标组件
│ │ ├── ReImageVerify# 图形验证码组件
│ │ ├── ReMap# 高德地图组件
│ │ ├── RePerms# 按钮级别权限组件（根据登录接口返回的permissions字段进行判断）
│ │ ├── RePureTableBar# 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/pure-admin/pure-admin-table */
│ │ ├── ReQrcode# 二维码组件
│ │ ├── ReSeamlessScroll# 无缝滚动组件
│ │ ├── ReSegmented# 分段控制器组件
│ │ ├── ReSelector# 选择器组件
│ │ ├── ReSplitPane# 切割面板组件
│ │ ├── ReText# 支持 Tooltip 提示的文本省略组件
│ │ ├── ReTreeLine# 树形连接线组件（基于element-plus）
│ │ ├── ReTypeit# 打字机效果组件
│ │ ├── ReVxeTableBar# 配合 vxe-table 实现快速便捷的表格操作
│ ├── config# 获取平台动态全局配置
│ ├── directives# 自定义指令
│ │ ├── auth# 按钮级别权限指令（根据路由meta中的auths字段进行判断）
│ │ ├── copy# 文本复制指令（默认双击复制）
│ │ ├── longpress# 长按指令
│ │ ├── optimize# 防抖、节流指令
│ │ ├── perms# 按钮级别权限指令（根据登录接口返回的permissions字段进行判断）
│ │ ├── ripple# 水波纹效果指令
│ ├── layout# 主要页面布局
│ ├── plugins# 处理一些库或插件，导出更方便的 api
│ ├── router# 路由配置
│ ├── store# pinia 状态管理
│ ├── style# 全局样式
│ │ ├── dark.scss# 暗黑模式样式适配文件
│ │ ├── element-plus.scss# 全局覆盖 element-plus 样式文件
│ │ ├── reset.scss# 全局重置样式文件
│ │ ├── sidebar.scss# layout 布局样式文件
│ │ ├── tailwind.css# tailwindcss 自定义样式配置文件
│ │ ├── ...
│ ├── utils# 全局工具方法
│ │ ├── http# 封装 axios 文件
│ │ ├── localforage# 二次封装 localforage (https://localforage.docschina.org/) 支持设置过期时间，提供完整的类型提示
│ │ ├── progress# 封装 nprogress
│ │ └── auth.ts# 处理用户信息和 token 相关
│ │ └── chinaArea.ts# 汉字转区域码
│ │ └── globalPolyfills.ts# 解决项目可能因为安装某个依赖出现 `global is not defined` 报错
│ │ └── message.ts# 消息提示函数
│ │ ├── mitt.ts# 触发公共事件，类似 EventBus
│ │ ├── preventDefault.ts# 阻止键盘F12、浏览器默认右键菜单、页面元素选中、图片默认可拖动的方法
│ │ ├── print.ts# 打印函数
│ │ ├── propTypes.ts# 二次封装 vue 的 propTypes
│ │ ├── responsive.ts# 全局响应式 storage 配置
│ │ ├── sso.ts# 前端单点登录逻辑处理
│ │ ├── tree.ts# 树结构相关处理函数
│ ├── views# 存放编写业务代码页面
│ ├── App.vue# 入口页面
│ ├── main.ts# 入口文件
├── types# 全局 TS 类型配置
│ │ ├── directives.d.ts# 全局自定义指令类型声明
│ │ ├── global-components.d.ts# 自定义全局组件获得 Volar 提示（自定义的全局组件需要在这里声明下才能获得 Volar 类型提示哦）
│ │ ├── global.d.ts# 全局类型声明，无需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可获得类型提示
│ │ ├── index.d.ts# 此文件跟同级目录的 global.d.ts 文件一样也是全局类型声明，只不过这里存放一些零散的全局类型，无需引入直接在 .vue 、.ts 、.tsx 文件使用即可获得类型提示
│ │ ├── router.d.ts# 全局路由类型声明
│ │ ├── shims-tsx.d.ts# 该文件是为了给 .tsx 文件提供类型支持，在编写时能正确识别语法
│ │ └── shims-vue.d.ts# .vue、.scss 文件不是常规的文件类型，typescript 无法识别，所以我们需要通过下图的代码告诉 typescript 这些文件的类型，防止类型报错
├── .browserslistrc# 配置目标浏览器的环境
├── .dockerignore# 排除不需要上传到 docker 服务端的文件或目录
├── .editorconfig# 编辑器读取文件格式及样式定义配置 https://editorconfig.org/
├── .env# 全局环境变量配置（当 .env 文件与 .env.development、.env.production、.env.staging 这三个文件之一存在相同的配置 key 时，.env 优先级更低）
├── .env.development# 开发环境变量配置
├── .env.production# 生产环境变量配置
├── .env.staging# 预发布环境变量配置
├── .gitattributes# 自定义指定文件属性
├── .gitignore# git 提交忽略文件
├── .gitpod.yml# gitpod 部署配置
├── .lintstagedrc# lint-staged 配置
├── .markdownlint.json# markdown 格式检查配置
├── .npmrc# npm 配置文件
├── .nvmrc# 用于指定在使用 Node Version Manager（NVM）时要使用的特定 Node.js 版本
├── .prettierignore# prettier 语法检查忽略文件
├── .prettierrc.js# prettier 插件配置
├── .stylelintignore# stylelint 语法检查忽略文件
├── CHANGELOG.en_US.md# 版本更新日志（英文版）
├── CHANGELOG.md# 版本更新日志（英文版）
├── CHANGELOG.zh_CN.md# 版本更新日志（中文版）
├── Dockerfile# 用来构建 docker 镜像
├── LICENSE# 证书
├── README.en-US.md# README（英文版）
├── README.md# README
├── commitlint.config.js# git 提交前检查配置
├── eslint.config.js# eslint 语法检查配置
├── index.html# html 主入口
├── package.json# 依赖包管理以及命令配置
├── pnpm-lock.yaml# 依赖包版本锁定文件
├── postcss.config.js# postcss 插件配置
├── stylelint.config.js# stylelint 配置
├── tailwind.config.ts# tailwindcss 配置
├── tsconfig.json# typescript 配置
└── vite.config.ts# vite 配置3、进入项目目录并安装依赖
pnpm install
## 推荐使用 pnpm, 如未安装 pnpm, 使用如下命令全局安装
npm install -g pnpm4、运行项目
pnpm run dev5、运行成功后，浏览器访问
http://localhost:88486、打包部署
pnpm run build可以说，vue-pure-admin 是一款非常优秀的中后台管理系统模板，无论是对于新手学习还是实际项目开发，都具有很高的价值。如果你正在寻找合适的中后台模板，不妨试试 vue-pure-admin，相信它会给你带来惊喜。
项目地址：https://github.com/pure-admin/vue-pure-admin最后
推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：
https://github.com/chenyl8848/great-open-source-project或者访问网站，进行在线浏览：
https://chencoding.top:8090/#/
我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。
但是任何人在群里打任何广告，都会被 T 掉。
如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：
关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。
大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]