vue-pure-admin：ESM + Vue3 + Vite + Element-Plus + TypeScript 的中后台管理系统模版
vue-pure-admin 是一款开源免费、开箱即用的中后台管理系统模版，完全采用 ECMAScript 模块（ESM）规范编写与组织代码，技术栈为 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss，兼容移动端，并提供精简版本、Tauri 版本、Electron 版本，采用 MIT 许可证。
社区作者 · zZz
它解决什么问题
vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。项目完全采用 ECMAScript 模块（ESM）规范来编写和组织代码，使用了最新的 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发。研发理念为“稳定中求创新，技术中见未来”。
精简版本：实际项目开发请用精简版本，官方提供非国际化、国际化两个版本选择。精简版本是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于 2.3MB，并且会永久同步完整版的代码。开启 brotli 压缩和 cdn 替换本地库模式后，打包大小低于 350kb。
配套资源：官方提供配套视频（含 UI 设计、快速开发教程）、配套保姆级文档（vue-pure-admin 文档、@pureadmin/utils 文档），以及高级服务、Tauri 版本、Electron 版本入口。
预览与界面：页面提供预览入口，涵盖 PC 端、暗色风格与移动端（可见配图 1 至配图 5 的 PureAdmin 界面截图）。
在线开发：支持使用 Gitpod（适用于 GitHub 的免费在线开发环境）打开项目并立即开始编码（对应配图 6 “Open in Gitpod”按钮）。
Docker 支持：可通过命令行构建镜像并运行容器，也可通过 Docker Desktop 可视化界面操作 docker 项目（对应配图 8 docker-desktop）。贡献方式：欢迎提交 Issue 或 Pull Request，PR 流程为 Fork 代码、创建自己的分支 git checkout -b feat/xxxx、提交修改 git commit -am 'feat(function): add xxxxx'、推送分支 git push origin feat/xxxx、提交 pull request。
Git 提交规范参考 vue 规范（Angular），类型包括 feat、fix、style、perf、refactor、revert、test、docs、chore、workflow、ci、types、wip。
浏览器支持：本地开发推荐使用 Chrome、Edge、Firefox 浏览器，作者常用的是最新版 Chrome；Firefox 在动画上感觉更丝滑，可个人爱好选择。更详细的兼容性见“Vue 支持哪些浏览器？”与“Vite 浏览器兼容性”。IE 不支持，Edge、Firefox、Chrome、Safari 支持最后两个版本（对应配图 9 至配图 12 的浏览器图标）。
维护者为 xiaoxian521、Ten-K，许可证为 MIT © 2020-present, pure-admin。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
一、准备环境
- 需要本地具备 Node.js 运行环境与 pnpm 包管理器（来源未给出具体版本号，待核验）。
- 本地开发推荐使用 Chrome、Edge、Firefox 浏览器，作者常用最新版 Chrome；IE 不支持。
如需容器化部署，需安装 Docker 或
Docker Desktop（可视化界面操作，见配图 8 docker-desktop）。
二、拉取代码（三种方式任选） 1）推荐使用 @pureadmin/cli 脚手架：
全局安装：
npm install -g @pureadmin/cli2）从 GitHub 上拉取：
- 交互式选择模板并创建项目：pure create
- 脚手架详细用法见 @pureadmin/cli 相关文档（对应配图 7 pure-admin-cli 演示动图）。
git clone https://github.com/pure-admin/vue-pure-admin.git3）从 Gitee 上拉取：
git clone https://gitee.com/yiming_chang/vue-pure-admin.git三、安装依赖
cd vue-pure-adminpnpm install四、启动平台（首次运行）
pnpm dev启动后在浏览器访问开发服务器地址即可预览。
五、项目打包
pnpm build六、Docker 部署 1）构建自定义镜像名为 vue-pure-admin 的镜像（注意命令末尾有一个点 . 表示使用当前路径下的 Dockerfile 文件，可根据实际情况指定路径）：
docker build -t vue-pure-admin .2）端口映射并启动 docker 容器（8080:80 表示在容器中使用 80 端口，并将该端口转发到主机的 8080 端口；pure-admin 表示自定义容器名；vue-pure-admin 表示自定义镜像名）：
docker run -dp 8080:80 --name pure-admin vue-pure-admin3）操作完上面两个命令后，在浏览器打开 http://localhost:8080 即可预览。
4）也可以通过
Docker Desktop 可视化界面去操作 docker 项目。
七、在线开发 可直接在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目并立即开始编码（对应配图 6 “Open in Gitpod”按钮）。
八、常见问题与提示
- 实际项目开发官方建议使用精简版本，精简版包含主体功能，会永久同步完整版代码；全局引入 element-plus 时打包体积仍低于 2.3MB，开启 brotli 压缩和 cdn 替换本地库模式后低于 350kb。
- 浏览器兼容：IE 不支持；Edge、Firefox、Chrome、Safari 支持最后两个版本，更详细兼容性参考 Vue 支持哪些浏览器与 Vite 浏览器兼容性文档。
- 贡献流程：Fork 代码 → 创建分支 git checkout -b feat/xxxx → 提交修改 git commit -am 'feat(function): add xxxxx' → 推送分支 git push origin feat/xxxx → 提交 pull request；提交信息类型参考 vue（Angular）规范：feat、fix、style、perf、refactor、revert、test、docs、chore、workflow、ci、types、wip。
