Antd-Vue3 构建后台管理系统

前言

随着前端 Vue3 技术发展和生态的完善，越来越多企业使用 Vue3 技术栈搭建后台管理系统，本课程采用 Vue3 生态的 antd-vue 热门组件库，帮助开发者快速构建后台管理系统模板。

课程收获

1. 最新 Vue3 前端技术栈应用
2. 详解 ESLint + Prettier 团队编码规范
3. Antd-Vue 组件库主题定制&布局搭建
4. 动态路由菜单和权限控制
5. 等...

Vue3 项目初始化

Vue3 官网：https://cn.vuejs.org/

初始化 Vue3

初始化安装

选择模板功能

VS Code 扩展安装

推荐安装扩展：

• 输入
  @recommended
  可一键安装推荐拓展

• "Vue.volar",
  • Vue.js 语言插件，提供 Vue 文件代码提示等功能。
• "Vue.vscode-typescript-vue-plugin",
  • Vue.js 文件中 TypeScript 的增强支持。
• "dbaeumer.vscode-eslint",
  • ESLint 插件，用于在编写 JavaScript 和 TypeScript 时检查和修复代码质量问题。
• "esbenp.prettier-vscode"
  • Prettier 是一个代码格式化工具，保持一致的代码风格。

项目文件清理

1. 删除 src 所有文件
2. 新建 App.vue 和 main.js

准备基础代码

开发服务器启动时，自动在浏览器中打开应用程序。

团队编码规范

eslint + prettier 配置参考，可根据项目情况定制。

组件文件名规范

新建文件

，结果文件名报错，配置 ESlint 规则为允许

index.vue

命名。

同时配置 jsx 语法支持，用于动态生成侧栏菜单。

统一添加末尾分号(可选)

温馨提示：prettierrc 的配置复制一份到 eslintrc 中，用于避免插件冲突。

VS Code工作区设置

新建文件

，保存时自动运行 eslint

antd-vue 组件库

官方文档：https://www.antdv.com/docs/vue/introduce-cn

antdv 组件库

安装依赖

安装组件库

基本使用

注意：此时发现组件库按钮不生效，若全量导入组件库体积太大，建议配置按需引入组件。

自动按需引入组件

安装依赖

vite.config.js

antdv 图标库

安装和基本使用

安装依赖

使用图标

图标全局按需导入

组件库代码提示配置和 @ 别名映射

配置后使用 antd 组件库有代码提示，@ 导入的文件也

antdv 定制主题和国际化

antdv 默认主题色时蓝色，默认语言为英文。

• 国际化： https://www.antdv.com/docs/vue/i18n-cn

• 定制主题： https://www.antdv.com/docs/vue/customize-theme-cn

• ConfigProvider 全局化配置: https://www.antdv.com/components/config-provider-cn

CSS 预处理器和全局样式

安装依赖

考虑到不同的团队习惯把 sass 和 less 都安装上，按需使用。

样式全局变量

styles/var.less

styles/main.less

antdv 布局和项目路由

antd 布局

vue-router 路由

加载进度条和标题设置

安装依赖

应用

环境变量

• .env.development

• .env.production

VITE_APP_TITLE = 后台管理系统
VITE_APP_BASE_URL = https://slwl-api.itheima.net/manager

基于路由生成菜单

JSX 版侧栏菜单-静态结构

侧栏菜单：

项目路由参考

新建静态路由

新建动态路由

，基于模块生成路由树。

新建路由模块

• 新建多个路由模块1：
  src\router\modules\base.js

• 新建多个路由模块2：
  src\router\modules\base.js

导入并应用路由

删除掉旧路由，替换成新的路由。

• 注意：侧栏菜单需要用到图标，记得在
  src\components\Icons\index.js
  全局导入。

基于路由生成菜单

高亮侧栏菜单

监听路由切换，展开并高亮对应的菜单项

Pinia 状态管理和持久化

Vue3 推荐的 Store 状态管理是 pinia (Vuex5)，项目中一般会按需配置 Store 的持久化。

Pinia官方：https://pinia.vuejs.org/zh/

持久化存储：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/config.html#paths

安装依赖

新建用户模块

配置持久化存储

全局应用 Store

测试 Store 数据

Mock 模拟数据

安装依赖

项目配置

• 配置 mock 服务：
  vite.config.js

参考例子

• 新建 mock 数据文件：
  src\mock\user.js

• 在 vue 文件中使用，先使用原生 fetch 获取数据，可根据项目需要换成 axios 。

注意事项：mock 数据更新后不生效，需要重启服务

。

request 封装

axios官网：https://www.axios-http.cn/docs/intro

安装依赖

封装 axios 工具

新建文件：

参考例子

权限控制

权限控制常见有两种业务需求：权限指令、权限路由(菜单)。

权限指令

基于权限控制按需展示某些功能模块，相当于结合了权限控制的

指令。

权限指令封装

指令入口管理

全局注册指令

参考例子

权限路由(菜单)

业务较为复杂，请参考素材中的源码解读。

权限路由常见业务为：

1. 获取后端返回的用户菜单(权限)
2. 基于返回的菜单(权限)，查找匹配的路由
3. 注册成路由，添加路由导航守卫等
4. 基于新注册的路由，生成后台管理系统的菜单
5. 退出登录，清理用户信息的同时，清理权限路由

感言

感谢各位小伙伴能学习到这里，自己动手丰衣足食。

当然 Vue3 生态在国内非常活跃，有很多优秀的后台管理系统模板，作为最后给大家的分享。

Vue3 生态后台管理系统分享

GitHub 排名