vue-pure-admin三步本地跑起来的免费 Vue3 后台管理系统模板【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-adminvue-pure-admin 是一款开源免费的 Vue3 后台管理系统中后台模板全部采用 ESMES Modules现代 JS 模块规范编写整合了 Vue 3、Vite、Element Plus、TypeScript、Pinia、Tailwind CSS 等主流技术。克隆下来装完依赖即可启动内置登录、权限、表格、表单等常见页面的完整演示既适合新手研究后台系统的结构也适合作为实际项目的起点脚手架。 这是一套什么样的模板它解决的是后台项目从零搭架子的重复劳动登录页、菜单、权限校验、常用业务页面都已做好MIT 协议完全免费。整套代码统一使用 ESM 语法组织模块边界清晰没有 CommonJS 混写带来的加载问题。核心技术栈及版本取自 package.json技术版本作用Vue3.5.41UI 框架组件化开发Vite8.2.2构建工具冷启动和热更新快TypeScript6.0.3类型检查写错参数编译期就能发现Element Plus2.14.5组件库提供按钮、表格、表单等控件Pinia4.0.3状态管理组件间共享登录态、菜单等数据Tailwind CSS4.3.3原子化 CSS写样式比手写 SCSS 更快vue-router5.2.0路由管理与权限控制配合使用依赖里还预置了 ECharts图表、wangEditor富文本、vxe-table高性能表格等常用库覆盖后台项目的多数场景省去逐个查文档引入的成本。⚡ 三步本地跑起来环境要求Node.js 不低于 22.22.1pnpm 不低于 11package.json的 engines 字段明确写死了下限。完整流程只有三步# 1. 拉取代码并安装依赖 git clone https://gitcode.com/GitHub_Trending/vu/vue-pure-admin cd vue-pure-admin pnpm install # 2. 启动开发服务器 pnpm dev启动后 Vite 默认监听8848端口由 .env 里的VITE_PORT决定浏览器打开即可看到登录页登录走的是本地 mock 数据vite-plugin-fake-server拦截 mock/login.ts 定义的接口无需连接任何后端。进入主界面后可以自由浏览各演示页需要产出部署包时执行pnpm build产物输出到dist/目录。 目录拆解核心代码在哪里读后台系统源码时先抓住下面四块其余可以按需查阅src/router/路由中枢。静态路由通过import.meta.glob自动扫描modules/子目录新增一个页面只需新增一个.ts文件不用手动注册登录后动态路由与菜单由权限 store 组合生成。src/store/modules/六个 Pinia 模块各管一摊user登录态、permission路由与菜单、settings布局偏好、multiTags多标签页、app全局参数、epTheme主题。src/layout/页面骨架内置垂直、水平、混合三种菜单布局附带全局搜索、通知中心、标签栏等周边组件。src/utils/http/基于 axios 封装的请求层统一处理 token 注入与 401 时刷新 token业务接口文件里不用重复写这些逻辑。另外 src/components/ 收纳了以Re前缀命名的业务组件ReIcon、ReDialog、ReAuth 等每个组件都是index.ts导出加src/源码的固定结构src/views/ 下有对应演示页可直接对照使用。️ 关键配置文件怎么改配置分散在三处看懂它们能少走不少弯路环境变量文件.env、.env.development、.env.production、.env.staging四个文件按运行模式加载。常用项包括VITE_PORT本地端口、VITE_ROUTER_HISTORY路由模式hash或h5、VITE_CDN打包时是否用 CDN 替换本地库、VITE_COMPRESSIONgzip 或 brotli 压缩级别。public/platform-config.json启动时由 axios 拉取的运行时全局配置见 src/config/index.ts控制平台名称、菜单风格、主题色等这类设置改文件即可生效不用动代码。vite.config.ts 与 build/构建目标定为 es2015JS、CSS 分别拆分到static/js、static/[ext]并带哈希指纹CDN 替换与压缩逻辑集中在build/plugins.ts里组装。典型场景部署到子目录时改VITE_PUBLIC_PATH想用 history 模式路由记得在服务端补上 rewrite 规则。 三个最实用的特性1. 按钮级权限控制。路由权限之外项目提供了Auth与Perms两个全局组件在 src/main.ts 中注册以及配套自定义指令模板里给组件传上权限码就会根据当前用户角色自动显示或隐藏不用手写 if 判断。2. 内置 mock 服务。mock/ 目录提供了登录、动态路由、用户列表、地图等接口数据本地开发即可完成登录—拉菜单—查数据的完整闭环不写一行后端代码接入真实后端时只需把 http 层指向真实 API。3. 中英双语开箱即用。i18n 基于 vue-i18n文案集中在 locales/zh-CN.yaml 与 locales/en.yaml顶栏切换语言后菜单和页面文案随之切换。src/views/ 下有数十个演示页表格全家桶、富文本、图表、流程图、甘特图等。以文件上传为例打开上传演示页提交表单请求由本地 mock 服务直接拦截开发者工具中可看到完整的 Payload 生产部署Docker 一键预览仓库自带可用的 Dockerfile采用常见的两阶段构建第一阶段用node:20-alpine安装依赖并执行pnpm build第二阶段把dist/产物拷入nginx:stable-alpine以 80 端口对外服务。# 构建镜像末尾的 . 表示使用当前目录的 Dockerfile docker build -t vue-pure-admin . # 将容器 80 端口映射到主机 8080 并启动 docker run -dp 8080:80 --name pure-admin vue-pure-admin完成后访问http://localhost:8080即可预览。不用 Docker 的话本地执行pnpm build得到产物再用pnpm preview可快速自检打包效果。 新手上手注意事项仓库的工程化约束比较严格照做能少踩坑必须用 pnpmpreinstall脚本通过only-allow pnpm锁定包管理器直接用 npm 安装会报错退出。善用质量检查脚本pnpm lint依次跑 ESLint、Prettier、Stylelintpnpm typecheck做类型检查提交信息受 husky 与 commitlint 约束需遵循feat、fix、perf等规范见 commitlint.config.js。建议的阅读顺序先从 src/views/login/ 的登录流程和 src/router/modules/ 的静态路由入手理解静态路由 动态路由如何拼装再深入权限与布局部分。实际项目选型README 说明本仓库是完整版真实项目开发建议选用作者提炼的精简版分国际化与非国际化两种体积更小且永久同步更新。浏览器推荐最新版 Chrome、Edge、Firefox不支持 IE。【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考