怎么用Vue3 Ant Design Admin从零搭建好用的企业级后台？

很多转做前端企业级后台的朋友最近都绕不开Ant Design这个库，搭配Vue3的话基本就是首选Vue3 Ant Design Admin了，这套组合拳厉害就厉害在省时间、颜值在线、功能模块成熟，不用自己从登录页、表格组件、权限系统挨个造轮子，但也有朋友拿到开源版后不知道怎么上手改自己的东西，甚至觉得预设的东西太多改不动，别慌，今天就用日常对话的方式,把从零到一搭一套能用又好上手的企业级后台的坑和干货都唠清楚。

从零开始？先搞懂基础选型和环境准备

其实说“从零”有点夸张啦，毕竟Vue3 Ant Design Admin是个成熟的开箱即用的基础模板，但选对版本、搭好开发环境才是真的第一步，先说说版本选择吧，别一上来就随便拉个最新的最新开发版,企业级项目还是得稳。

开发环境的硬性要求，得提一嘴，别漏了踩坑，Node.js得是哪个？至少LTS（长期维护）版本，比如18.x或者20.x，太高的边缘版可能会有依赖冲突，太低的16.x现在有些库已经不再适配了，然后是包管理器，npm、yarn、pnpm都行，但个人推荐pnpm，pnpm的硬链接机制能省不少磁盘空间，安装依赖的速度也快，适合企业级这种依赖多的项目，开发工具VS Code肯定是首选，装上Vue - Official插件（以前叫Volar），把Vetur禁用掉，不然会有冲突，代码补全、语法高亮都用不了最新的。

接下来是模板选择，现在开源平台上有好几个主流的Vue3 Ant Design Admin模板，比如国内程序员写的最火的那个，就不说具体名字了，反正搜关键词第一个就是，选它的原因很简单，更新频率高，社区活跃，有官方中文文档，踩坑了去Issues区或者掘金、CSDN搜一下基本都能找到解决方案，还有一些精简版的模板，比如去掉了复杂仪表盘、去掉了国际化、权限控制做的轻一点的，如果你是做小型项目，比如部门内部的管理系统，可以选精简版，改起来更方便，但如果是要做标准的企业级后台，还是用完整版吧，比如仪表盘可以留着以后改成自己公司的业务看板，国际化现在很多公司也有需求,留着总比没有强。

模板拉下来之后，第一件事不是改东西，而是先把依赖安装好，把项目跑起来看看，熟悉一下整个项目的结构，安装依赖的时候如果遇到网络问题，可以切换一下镜像源，比如国内的淘宝镜像源,速度会快很多。

项目跑起来之后？别急着改代码，先摸透目录结构

很多朋友拉下来项目直接去改登录页的Logo和文字，改完之后就不知道怎么加自己的页面了，这就是没摸透目录结构的原因，其实完整版的Vue3 Ant Design Admin目录结构设计的挺清晰的，只要搞懂了每个文件夹是干什么的，加页面、加路由、加权限都很简单。

先简单说一下最核心的几个目录吧，首先是src文件夹，这个是所有业务代码和核心逻辑所在的地方，其他的比如public、node_modules、.env这些都是辅助的，src里面有哪些核心文件夹？第一个是components，这个文件夹放的是全局通用的组件，比如封装好的表格组件、表单组件、文件上传组件、图表组件这些，要是你觉得这些组件不够用或者不好用，可以自己在这里封装，封装的时候要注意命名规范，比如以大写字母开头，用驼峰命名法，比如ProTable.vue，这样和Ant Design Vue的原生组件区分开，第二个是layout，这个文件夹放的是后台的整体布局组件，比如侧边栏、顶部导航栏、标签栏这些，要是你想改后台的布局，比如把侧边栏改成顶部导航栏，或者把标签栏去掉，就可以在这里改，第三个是router，这个文件夹放的是路由配置文件，要是你想加自己的页面，首先就要在这里加路由配置，第四个是store，这个文件夹放的是全局状态管理，用的是Pinia，现在Vue3官方推荐的就是Pinia，比Vuex简单很多，这里面会存一些全局的状态，比如用户的登录信息、权限信息、当前的主题颜色这些，第五个是views，这个文件夹放的是所有的业务页面组件，每个路由对应的页面就放在这里，比如可以在views文件夹下面建一个user文件夹，放用户管理相关的页面，建一个product文件夹，放产品管理相关的页面，第六个是utils，这个文件夹放的是全局通用的工具函数，比如封装好的请求拦截器、响应拦截器、日期格式化函数、金额格式化函数这些，第七个是api，这个文件夹放的是所有的接口请求函数，比如可以在api文件夹下面建一个user.js文件，放用户管理相关的接口请求，建一个product.js文件,放产品管理相关的接口请求。

除了这些核心的文件夹之外，还有一些辅助的文件夹和文件，比如assets文件夹放的是静态资源，比如图片、字体、样式文件这些；styles文件夹放的是全局的样式文件；.env.development和.env.production这些是环境变量配置文件，比如可以在开发环境下配置接口的地址是http://localhost:3000，在生产环境下配置接口的地址是https://api.example.com。

摸透目录结构之后？来个小实战，比如加上自己的页面

现在我们来个小实战，比如加上一个“部门管理”的页面，包括部门列表、新增部门、编辑部门、删除部门这些功能，这个实战做完之后，你就基本上手了,其他的业务页面也是类似的做法。

首先第一步，我们要在api文件夹下面建一个department.js文件，放部门管理相关的接口请求，比如可以写getDepartmentList函数，用来获取部门列表；写addDepartment函数，用来新增部门；写editDepartment函数，用来编辑部门；写deleteDepartment函数，用来删除部门，这些函数里面要调用封装好的请求工具函数,比如request。

然后第二步，我们要在views文件夹下面建一个department文件夹，放部门管理相关的页面组件，比如可以建一个List.vue文件，用来显示部门列表，包括新增按钮、编辑按钮、删除按钮、搜索栏、分页器这些；如果新增和编辑部门是弹窗的话，可以不用单独建页面，直接在List.vue里面写个抽屉或者弹窗组件就行。

接下来第三步，我们要修改router文件夹下面的路由配置文件，首先要找到路由配置文件在哪里，一般是在router/index.js或者router/routes.js文件里，然后我们要在路由配置数组里面加上部门管理的路由配置，比如path是'/system/department'，name是'SystemDepartment'，component是views/department/List.vue，meta里面可以配置一下路由的标题、图标、权限这些，比如标题是'部门管理'，图标是'PieChartOutlined'，权限是['admin','manager']这些。

然后第四步，我们要修改Pinia的状态管理吗？其实如果只是简单的部门管理功能，不需要修改Pinia的状态管理，直接在List.vue里面用ref或者reactive来管理局部状态就行。

接下来第五步，我们要修改侧边栏的显示吗？其实不用，因为Vue3 Ant Design Admin的侧边栏是根据路由配置自动生成的，只要你在路由配置的meta里面加上了icon和title，而且路由配置的父级路由是'/system'，侧边栏就会自动显示“系统管理”下面的“部门管理”菜单。

然后第六步，我们要修改封装好的ProTable组件吗？其实ProTable组件已经封装好了搜索栏、表格、分页器这些，直接传参数就行，比如columns数组，用来配置表格的列；request函数，用来请求部门列表的数据；api参数，用来传接口的一些参数，比如pageSize、current这些。

最后一步，我们要测试一下部门管理的页面能不能正常显示，能不能正常请求接口，如果接口请求失败，要检查一下请求拦截器和响应拦截器有没有配置对不对，比如有没有加上Authorization请求头,有没有处理接口返回的错误码这些。

除了加页面，企业级后台还有哪些核心功能需要重点改？

刚才那个小实战只是入门，企业级后台还有很多核心功能需要重点改，比如登录页、权限系统、主题切换、接口请求这些，这些功能改好了,整个后台才算是好用的企业级后台。

先说说登录页的修改吧，登录页一般是用户进入后台看到的第一个页面，所以一定要改得符合自己公司的品牌形象，比如可以把登录页的Logo改成自己公司的Logo，把登录页的背景图改成自己公司的背景图，把登录页的文字改成自己公司的文字，欢迎使用XX公司管理系统”这些，除了这些视觉上的修改，还可以修改一下登录的逻辑，比如原来的登录逻辑是用户名密码登录，可以加上手机号验证码登录、第三方登录比如微信登录、钉钉登录这些，还要修改一下登录之后的跳转逻辑，比如原来的登录之后是跳转到仪表盘,可以改成跳转到用户自己设置的首页。

然后说说权限系统的修改吧，权限系统是企业级后台的核心功能之一，Vue3 Ant Design Admin的预设权限系统是基于角色的权限控制（RBAC），已经比较成熟了，但可能有些公司的需求不一样，比如需要基于资源的权限控制（ABAC），或者需要更细粒度的权限控制，比如按钮级别的权限控制，要是需要修改权限系统的话，首先要修改一下Pinia的用户状态管理，比如加上用户的资源权限数组；然后要修改一下路由守卫，比如在路由守卫里面判断用户有没有访问当前路由的权限，如果没有的话，就跳转到403页面；还要修改一下全局通用的组件，比如封装好的按钮组件，加上一个v-permission指令，用来判断用户有没有访问当前按钮的权限，如果没有的话,就隐藏或者禁用当前按钮。

接下来说说主题切换的修改吧，Vue3 Ant Design Admin的预设主题切换功能是支持亮色主题、暗色主题、跟随系统主题，而且可以自定义主题颜色，要是需要修改主题切换的话，首先要修改一下styles文件夹下面的全局样式文件，比如加上一些自定义的主题颜色；然后要修改一下Pinia的主题状态管理，比如加上用户自定义主题颜色的功能；还要修改一下全局通用的组件，比如封装好的主题切换组件,加上一些自定义的主题颜色选项。

然后说说接口请求的修改吧，接口请求是企业级后台和后端交互的核心，Vue3 Ant Design Admin的预设请求拦截器和响应拦截器已经比较成熟了，但可能有些公司的后端接口返回的数据格式不一样，或者需要加上一些自定义的请求头，比如X-Request-ID这些，要是需要修改接口请求的话，首先要修改一下utils文件夹下面的request.js文件，修改一下请求拦截器和响应拦截器；然后要修改一下api文件夹下面的所有接口请求函数,根据后端接口返回的数据格式来修改。

部署上线的时候要注意哪些问题？

整个企业级后台开发完成之后，接下来就是部署上线了，部署上线的时候要注意哪些问题呢？首先要注意一下环境变量的配置，比如在生产环境下要把接口的地址改成生产环境的接口地址，把调试信息关掉，比如console.log这些；然后要注意一下打包的配置，比如修改一下vite.config.js文件，比如配置一下打包的输出目录，配置一下打包的文件名，配置一下打包的压缩，比如去掉console.log这些，压缩一下JS和CSS文件；还要注意一下路由的模式，Vue3 Ant Design Admin的预设路由模式是hash模式，要是需要改成history模式的话，首先要修改一下router/index.js文件，把createWebHashHistory改成createWebHistory；然后要注意一下Nginx的配置，比如在Nginx的配置文件里面加上try_files $uri $uri/ /index.html;这句话,不然刷新页面的时候会出现404错误。

除了这些部署上线的问题之外，还要注意一下性能优化的问题，比如图片懒加载、组件懒加载、路由懒加载这些，这些性能优化的问题做好了，整个企业级后台的加载速度会快很多，用户体验也会好很多，比如路由懒加载的话，Vue3 Ant Design Admin的预设路由配置已经用上了，不用自己再改了；比如图片懒加载的话，可以用vue-lazyload这个第三方库，也可以自己用IntersectionObserver API来实现；比如组件懒加载的话,可以用defineAsyncComponent这个Vue3的内置函数来实现。

要注意一下代码规范的问题，比如用ESLint来检查代码的语法错误，用Prettier来格式化代码，用Husky和lint-staged来在提交代码的时候自动检查和格式化代码，这样整个团队的代码风格会统一很多,维护起来也会方便很多。

好啦，今天关于怎么用Vue3 Ant Design Admin从零搭建好用的企业级后台的内容就唠到这里了，其实这套组合拳真的很厉害，只要你摸透了目录结构，加上自己的业务页面，修改一下核心功能，部署上线，很快就能做出一套好用的企业级后台，要是你在搭建过程中遇到了什么问题，可以在评论区留言,我们一起讨论一下。