Vue3 Ant Design 中后台模板教程：5分钟跑通 vue3-antd-admin

Vue3 Ant Design 中后台模板教程：5分钟跑通 vue3-antd-admin

【免费下载链接】vue3-antd-admin使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。项目地址: https://gitcode.com/gh_mirrors/vu/vue3-antd-admin

如果你不想从零搭中后台，vue3-antd-admin是一个开箱即用的选择：它基于 Vue 3 + Ant Design Vue + Vite + TypeScript 开发，权限系统、动态菜单、表格组件都已接好。这篇教程带你搞清楚这个中后台模板怎么跑起来、项目怎么组织、关键文件各管什么，读完你就能上手改页面。

这个模板帮你解决什么问题

做管理系统，最先头疼的三件事：布局怎么搭（侧边栏 + 顶栏 + 标签页）、不同权限的人该看到哪些菜单和页面、大量增删改查页面怎么快速写。vue3-antd-admin 把这三件事都替你处理了：UI 用的是 Ant Design Vue（蚂蚁风格的组件库，按钮、表格、表单拿来即用），导航有动态侧边栏和多标签页，还内置了一个tableLayout表格组件，用一段 JSON 配置就能生成「表单 + 弹窗 + 表格」的整套页面。

一条命令启动本地开发服务器

先克隆项目并安装依赖：

git clone https://gitcode.com/gh_mirrors/vu/vue3-antd-admin cd vue3-antd-admin npm install

接着执行npm run dev，Vite（新一代前端构建工具，改代码热更新几乎零等待）开发服务器就起来了。浏览器打开本地地址，先看到几秒加载动画，然后停在登录页——演示账号admin，密码123456。

登录后进入主界面：左侧多级菜单、顶部用户信息、中间的快捷标签页和右侧内容区，403/404/500 错误页也都现成可用。

启动链路：index.html 到 main.ts 在干什么

浏览器打开 index.html 时它只是个空壳：#app里放了一段纯 CSS 的 loading 动画，末尾用<script type="module" src="/src/main.ts">把真正的代码引进来。

main.ts 创建应用，然后按顺序装上四样东西：

const app = createApp(App) app.use(Antd) // Ant Design Vue 组件库 app.use(globalAxios) // 封装好的全局请求实例 app.use(store) // Vuex（管理全局状态的库） app.use(router) // Vue Router router.isReady().then(() => app.mount('#app')) // 等路由就绪再挂载

最后那行是关键：先等路由就绪才挂载，因为 permission.ts 在路由上挂了全局守卫。每次切换页面都会先查本地存储里的 token——没登录就弹回/login；已登录但还没拉用户信息，就先请求用户和菜单数据，再用addRoute把当前用户有权限的页面动态挂进路由表。这就是模板里「权限系统 + 动态菜单」的骨架。

状态存放在 store/，分四个模块：user（当前用户）、tabs（标签页）、menu（菜单，驱动侧边栏和路由）、keepAlive（页面缓存）。

骨架拆解：真正需要知道的目录只有这几处

其余像 errorPages/、types/、utils/ 现在可以先不管，用到自然会找上它们。

想改什么，就动哪个配置

想换开发端口、给接口加代理？改 vite.config.ts。它有两处直接影响开发体验：@别名指向src目录，写导入时可以敲@/store而不是一串../；server.proxy把/api开头的请求转发到远端后端并去掉前缀，浏览器里不用操心跨域。

在意打包产物？看 package.json 里的build脚本：vue-tsc --noEmit && vite build。前半句先跑 TypeScript（给 JavaScript 加上静态类型检查的超集）类型检查，后半句才真正打包——类型有错的代码根本出不了包，这是模板给自己上的保险。

编辑器里报类型错误？那是 tsconfig.json 的地盘，它同时声明了与 Vite 对应的@/*路径别名，保证 IDE 补全和运行时行为一致。

接下来可以做什么

到这里，「这是什么、怎么跑、怎么组织、各管什么」四个问题应该都有了答案。想快速验证自己真的懂了，最划算的一练是：在 src/views/ 下新建一个页面，配一条路由，看权限守卫怎么放行它——跑通这一圈，这个 Vue3 中后台模板基本就长在你手上了。

【免费下载链接】vue3-antd-admin使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。项目地址: https://gitcode.com/gh_mirrors/vu/vue3-antd-admin