三步跑通 vue3-antd-admin启动链路、目录拆解到改配置快速看懂这个 Vue3 后台管理模板【免费下载链接】vue3-antd-admin使用vue3ant-design-vuevitets开发的通用后台框架实现了权限系统、动态菜单、表格集成快速使用等功能简洁干净开箱即用。项目地址: https://gitcode.com/gh_mirrors/vu/vue3-antd-adminvue3-antd-admin 是一个用 Vue3 Ant Design Vue Vite TypeScript 搭的通用后台框架内置权限系统、动态菜单和可复用的表格组件目标就是开箱即用。这篇教程带你从跑起来到知道该改哪看完你就清楚权限、菜单、请求这几个核心逻辑分别落在哪些文件里。 三步跑通本地开发环境依赖不多核心就是 Vue3、Ant Design Vue 2.x、Vuex 4 和 Vite 2 这套组合npm install装完直接起服务即可git clone https://gitcode.com/gh_mirrors/vu/vue3-antd-admin cd vue3-antd-admin npm install npm run devnpm run dev背后执行的是vite开发服务器默认监听http://localhost:3000浏览器打开就能看到登录页。 沿启动链路拆一遍入口文件先看浏览器从哪个 DOM 节点开始接管。项目根目录的index.html是 Vite 的模板文件里面有一段内联 loading 动画等首屏资源加载完就整体替换掉不想看到它就去掉style块div idapp!-- Vue 应用最终挂到 idapp 上 --/div script typemodule src/src/main.ts/script接着看src/main.ts应用在这里创建并依次装好四样东西顺序不对页面会报错但不需要改它app.use(Antd) // Ant Design Vue 组件 app.use(globalAxios) // 全局 axios请求/响应拦截在这里 app.use(store) // Vuexuser / tabs / menu / keepAlive app.use(router) // 路由 权限 router.isReady().then(() app.mount(#app))缺了最后那句isReady路由守卫还没执行应用就挂载了刷新受保护页面会闪一下再跳转。权限的入口在src/router/index.ts实例化完路由后挂了一行守卫想调整登录拦截逻辑就从这里进const router createRouter({ history: createWebHistory(/), routes: constantRouterMap }) permission(router) // 全局守卫权限校验全在这src/store/index.ts只负责拼装四个模块user存登录态、tabs管多页签、menu存动态菜单、keepAlive控制缓存新增业务状态就在modules目录下加模块再注册。 目录结构拆解每个模块干什么把启动链路看完再看目录就不慌了项目按职责切得很规整目录作用src/views/页面组件登录、团队、更新日志等src/layout/后台外壳侧边菜单、顶栏、页签、路由出口src/router/路由表 权限守卫权限系统核心src/store/modules/四个 Vuex 模块user / tabs / menu / keepAlivesrc/components/tableLayout/通用表格组件带表单弹窗和上传src/api/与src/request/接口定义和 axios 封装日常改页面去views改外壳样式去layout动权限去router/permission.ts。⚙️ 改 Vite 配置代理和别名两项必会vite.config.ts很短真正要你动手的只有两处。先看开发代理默认值把/api开头的请求转发到http://lelebk.com/api换自己后端就改targetrewrite决定转发时去不去掉/api前缀proxy: { /api: { target: http://lelebk.com/api, // 改成你的后端地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } }第二处是别名指向src全项目的/xxx导入都靠它改别名要连同 tsconfig 的paths一起动。再看package.json两个版本要留意Ant Design Vue 锁在 2.x直接升 4.x 会大面积破坏样式和组件 APITypeScript 是 4.3动tsconfig里的编译选项前先确认新特性版本支持依赖默认版本升级建议ant-design-vue^2.2.6升级前先过一遍 2.x → 4.x 的 API 变更vite^2.4.0Vite 3/4 有插件生态差异配合 main 一起升typescript^4.3.2保守升 5.x注意 vue-tsc 版本匹配 三个高频改造场景速查改端口vite.config.ts的server下加一行port: 5173当前没写默认值时 Vite 自己选端口。找不到页面base和createWebHistory(/)两处要保持一致部署到子路径时一起改。换主题色全局样式入口是src/assets/css/reset.css配合 Antd 的 less 变量文件改。拉下项目后先改代理的target指向你的后端再在src/views里随便加个页面挂到路由上看权限和菜单是否按预期生效整条链路就算彻底走通了。【免费下载链接】vue3-antd-admin使用vue3ant-design-vuevitets开发的通用后台框架实现了权限系统、动态菜单、表格集成快速使用等功能简洁干净开箱即用。项目地址: https://gitcode.com/gh_mirrors/vu/vue3-antd-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考