ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Vue3 后台管理模板 vue-pure-admin:三步跑起本地,Docker 一键部署,一篇讲透

Vue3 后台管理模板 vue-pure-admin:三步跑起本地,Docker 一键部署,一篇讲透 Vue3 后台管理模板 vue-pure-admin三步跑起本地Docker 一键部署一篇讲透【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin需要在一周内交付一个管理后台你还愿意从零写登录页、侧边菜单树和角色权限吗vue-pure-admin 就是能省掉这份麻烦的 Vue3 后台管理模板整套代码基于 Vue 3 Vite Element Plus TypeScript 编写状态管理用 Pinia样式走 Tailwind CSS布局同样兼容移动端。登录页、用户/角色/菜单管理、各种表格和表单页面都配好了连一套 mock 后端也带上不写一行后端代码就能先跑起来。没有后端也能跑它自带一套 mock 接口这个项目最先让人意外的是根目录下的 mock/ 文件夹登录、路由、列表、地图这些接口全部由 vite-plugin-fake-server 在本地伪造。也就是说 clone 下来你登录、切换菜单、点进用户管理页面一路都是通的不用先搭后端。系统管理页的模拟数据可以直接翻 mock/ 看。从 clone 到看见登录页只需要三步第一步拿代码。两条路直接 git clone或者用官方脚手架 pureadmin/cli先执行 npm install -g pureadmin/cli 全局安装再运行 pure create 交互式选模板生成项目。如果走 clone 路线git clone https://gitcode.com/GitHub_Trending/vu/vue-pure-admin第二步装依赖。这里有两个小门槛项目里用 preinstall 脚本锁死了 pnpm 安装engines 要求 Node ≥ 22.22.1、pnpm ≥ 11版本不够会卡住。进目录后执行cd vue-pure-admin pnpm install第三步启动开发服务器pnpm dev打开终端里给出的本地地址就是下面这个登录页。除了常规的账号密码还有手机验证码、扫码登录和注册等入口源码都在 src/views/login/ 下想改交互直接进去看跑起来之后先点哪几个页面试效果首页看板图表加数据小表格代码在 src/views/welcome/表格区内容最重的板块基础表格、可编辑表格、vxe-table 高性能表格、虚拟列表全在 src/views/table/ 下按目录分类系统管理用户、角色、菜单、部门一整套在 src/views/system/表单区schema 驱动的各种表单演示在 src/views/schema-form/文件上传支持多文件、自定义请求头演示页在 src/views/components/upload/。其中上传演示值得点开浏览器开发者工具看一眼它一次提交 4 个文件外加一个日期字段整体打包成 multipart/form-data翻到 Payload 页签每个文件都是独立的一条 form data做完之后打包与 Docker 部署页面调完打包静态产物只要一条命令pnpm build产物在 dist/ 里扔到任意静态服务器就能访问。如果你习惯用 Docker仓库自带的 Dockerfile 前级用 node:20-alpine 完成构建、后级用 nginx 直接对外服务两条命令的事docker build -t vue-pure-admin . docker run -dp 8080:80 --name pure-admin vue-pure-admin跑完后在浏览器打开 http://localhost:8080 看到的就是打包后的实际效果。遇到问题往哪儿查版本变更记录CHANGELOG.zh_CN.md菜单和路由每个菜单模块都是 src/router/modules/ 下的一个独立文件加菜单基本就是改这里状态管理app、user、permission、主题等 store 都在 src/store/modules/。给你的第一个小任务pnpm dev 跑起来之后先切换一次浅色/深色主题再打开任意表格页试下排序和列设置然后回头看 store 和 router 里哪个文件跟着变了。模板到底好不好用摸过一遍才知道。【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表