vue-next-admin免费 Vue3 后台管理模板3 分钟跑起来完整指南【免费下载链接】vue-next-admin基于vue3.x 、Typescript、vite、Element plus等适配手机、平板、pc 的后台开源免费模板库vue2.x请切换vue-prev-admin分支项目地址: https://gitcode.com/GitHub_Trending/vu/vue-next-adminvue-next-admin 是一个基于 Vue 3.2 TypeScript Vite 4 Element Plus 2.3 Pinia 的免费开源后台管理模板MIT 协议适配手机、平板和 PC。你准备做一个管理后台却不想从零写登录、菜单、权限、主题、多语言这些地基代码时直接用它克隆下来、装好依赖浏览器打开就是一个能登录、能切换布局、带权限控制的完整管理台你只需要往里填业务代码。这份模板替你省掉哪些活打开登录页之前先明确它已经替你做好的事这样你知道哪些代码不用写登录页账号密码、手机验证码、扫码三种方式src/views/login/component/默认账号admin密码123456验证码1234四套布局默认左侧菜单、经典上下结构、横向顶部菜单、分栏左侧一级 右侧二级右上角设置抽屉里一键切换权限体系路由级菜单显隐 按钮级v-auth指令前端控制/后端控制两种模式系统管理页菜单、角色、用户、部门、字典五个完整页面在src/views/system/下常用业务件封装好的表格组件带分页、导出、打印、列设置src/components/table/、wangEditor、裁剪、二维码、拖拽、ECharts 地图、流程图画板等示例细节功能暗色模式、灰色/色弱模式、水印、自动锁屏、TagsView 多标签、面包屑、菜单搜索、三语国际化简中/英文/繁中浏览器要求 Chrome ≥ 87、Edge ≥ 88、Safari ≥ 13Vue3 本身已不支持 IE11。3 分钟跑通本地环境本地只需 Node ≥ 16package.json中engines声明为16.0.0Vite 4 不再支持 Node 12/13/15。四条命令git clone https://gitcode.com/GitHub_Trending/vu/vue-next-admin cd vue-next-admin npm install npm run dev启动后访问http://localhost:8888端口来自根目录.env里的VITE_PORT想换端口直接改那里。用上面的admin / 123456 / 1234登录首页是一张 ECharts 数据大盘折线、饼图、柱状图左侧菜单能看到系统管理、权限演示、示例页面等分组。国内网络如果npm install卡住可换yarn或cnpm install效果相同。看懂项目怎么组织改东西前先看这里这个项目的目录命名很直白建议按你要改什么来定位而不是通读src/router/route.ts— 所有路由都写在这一个文件里每条路由的meta控制菜单标题、显隐、缓存、角色、图标。作者建议路由 path 与文件夹同名所以浏览器地址栏看到/system/user文件就在src/views/system/user/src/router/frontEnd.ts和backEnd.ts— 前端/后端两种权限路由的初始化逻辑两个文件互不影响改哪套看哪套src/layout/— 整个外壳侧边栏、顶栏、TagsView四种布局在src/layout/main/下各占一个文件src/stores/themeConfig.ts— 主题相关的每个开关都在这里颜色、暗色、水印、布局、锁屏界面上的设置抽屉就是读写这个 storesrc/api/src/utils/request.ts— 接口层axios 已封装好 token 注入、401 自动登出、超时提示src/i18n/—lang/是框架文案pages/是各页面文案按zh-cn / en / zh-tw三列组织权限深入一个开关切换前后端控制后台项目最纠结的往往是菜单该谁说了算。这份模板把两种做法都实现了靠src/stores/themeConfig.ts里一个布尔值isRequestRoutes切换false默认前端控制菜单结构写死在src/router/route.ts每条路由的meta.roles声明谁能看如[admin]或[admin, common]登录时前端按角色过滤出可见菜单。适合没有后端菜单接口的中小项目true后端控制菜单 JSON 由接口返回前端动态addRoute。src/api/menu/index.ts里目前是演示用的模拟接口接真实后端时把这里的地址换成你的即可登录入口src/views/login/component/account.vue会按这个开关走不同的初始化流程按钮级权限由三个自定义指令完成src/directive/authDirective.ts用法一行搞定el-button v-authadd新增/el-buttonv-auths是满足其一即显示v-auth-all是全部满足才显示不满足权限的元素会被直接从 DOM 移除。左侧菜单的权限分组里有前端控制、后端控制两组对照页面可以分别用 admin 和 test 账号登录体验差异。主题深入不写一行 CSS 换掉整个界面风格点右上角的设置图标会弹出一个布局配置抽屉里面的每一项都即时生效主色调、顶栏/菜单背景色、是否渐变、四种布局、暗色模式、面包屑/TagsView 显隐、页面切换动画、水印开关……几个值得知道的细节换默认主题抽屉里的改动只影响当前浏览器存在 localStorage要让所有用户看到你的品牌色改src/stores/themeConfig.ts里的primary等默认值忘了生效时点抽屉最底部一键恢复默认移动端适配src/layout/index.vue监听窗口尺寸宽度小于 1000px 时自动切到默认布局并收起侧边栏手机上打开是可用的锁屏与水印设置里可开启自动锁屏倒计时秒数可调和自定义水印文案对应src/layout/lockScreen/和src/utils/watermark.ts多语言顶栏可切换简中/英文/繁中Element Plus 组件的文案也跟着一起切新页面要国际化的话在src/i18n/pages/下按目录建三语言文件即可框架会自动聚合改造成你自己的项目加页面、加接口的最短路径假设你要加一个订单管理页面三步建页面在src/views/下新建order/index.vue写 Vue3 setup 语法糖组件即可注册路由在src/router/route.ts某个顶级节点的children数组里加一条记录path、component指向上面那个文件meta里填title和roles。前端控制模式下菜单立即出现后端控制模式则改为在后端菜单数据里配置接数据在src/api/下新建order/index.ts仿照src/api/login/index.ts导出一个函数内部调用已封装的request——token 附加、50 秒超时、401 跳登录页这些都不用你操心列表页如果不想手写分页和工具栏直接引入src/components/table/index.vue传数据和列配置就能得到带分页、导出、打印、列设置的表格src/views/make/tableDemo/下有现成用法可抄。上线发布一条构建命令两个要改的配置npm run build产物在dist/目录是纯静态文件丢到 Nginx、CDN 或任意静态服务器即可。构建时vite.config.ts已挂上vite-plugin-compression自动产出 gzip 压缩文件第三方依赖也会按包名自动拆 chunk。发布前检查两个地方.env中的VITE_PUBLIC_PATH模板默认是/vue-next-admin-preview/演示子路径你部署在站点根目录时把它置空否则资源路径会 404VITE_API_URL在.env.production里改成你的正式接口域名VITE_OPEN_CDN默认false置为true可把基础库走 CDN 引入并 external 掉进一步减小包体对应src/utils/build.ts改完默认文案也是上线前顺手的事网站主标题、副标题在src/stores/themeConfig.ts的globalTitle、globalViceTitle两个字段里改成你的项目名即可。下一步把npm run dev跑起来先用 admin 和 test 两个账号各登录一次对照左侧权限菜单感受两种路由控制模式的区别——这是后续接真实后端时最常要调整的部分。【免费下载链接】vue-next-admin基于vue3.x 、Typescript、vite、Element plus等适配手机、平板、pc 的后台开源免费模板库vue2.x请切换vue-prev-admin分支项目地址: https://gitcode.com/GitHub_Trending/vu/vue-next-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
