【vue-admin-kit】配置驱动的 Vue 3 后台管理组件工具套件

📖 在线文档：https://vue-admin-kit.jiang.in/

前言

在企业级后台管理系统开发中，CRUD 页面占据了大量的开发工作。搜索表单、数据表格、新增/编辑弹窗、详情展示……这些重复性的工作不仅耗时，还容易产生不一致的代码风格。

vue-admin-kit 正是为解决这一痛点而生。它是一个基于 Vue 3、Element Plus 和 VXE-Table 构建的企业级组件工具套件，采用配置驱动的设计理念，让你用最少的代码实现标准化的 CRUD 操作。

核心特性

🚀 配置驱动

通过 JSON 配置快速生成搜索表单、数据表格、详情弹窗、编辑表单，告别重复的模板代码：

const searchConfig = defineSearchConfig([
  { type: "input", prop: "name", label: "名称" },
  { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
]);

const formConfig = defineFormConfig([
  { type: "input", prop: "name", label: "名称", required: true },
  { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
]);

const columnsConfig = defineColumnsConfig([
  { type: "seq", title: "序号", width: 60 },
  { field: "name", title: "名称", minWidth: 120 },
  {
    field: "status",
    title: "状态",
    dictType: "sys_status",
    displayType: "tag",
  },
]);

📦 开箱即用

内置 14 种表单控件，覆盖后台管理系统的常见场景：

类型	说明	类型	说明
`input`	输入框	`textarea`	多行输入
`number`	数字输入	`select`	下拉选择
`radio`	单选	`date`	日期选择
`time`	时间选择	`upload`	文件上传
`uploadCard`	卡片上传	`editor`	富文本编辑器
`line`	分割线	`inputGroup`	输入组
`addableInputGroup`	可增删输入组	`selectChange`	搜索选择

🎨 高度可定制

支持自定义组件、字典适配器、权限控制，满足各种业务需求。

📱 响应式设计

根据屏幕尺寸自动调整表单项大小，适配不同设备。

🔧 TypeScript 支持

完整的类型定义，提供良好的开发体验和代码提示。

快速开始

安装

npm install vue-admin-kit
# 或
pnpm add vue-admin-kit

安装依赖

pnpm add vue@^3.4.0 element-plus@^2.0.0 vxe-table@^4.0.0 vxe-pc-ui@^4.0.0 xe-utils@^3.0.0 @element-plus/icons-vue@^2.0.0 @vueuse/core@^10.0.0

引入样式

// main.ts
import "vue-admin-kit/style.css";

初始化配置

import { setupPageTemplate } from "vue-admin-kit";
import { getDicts } from "@/api/system/dict";

setupPageTemplate({
  dependencies: {
    dictLoader: async (dictType) => {
      const res = await getDicts(dictType);
      return {
        success: true,
        data: res.data.map((item) => ({
          label: item.dictLabel,
          value: item.dictValue,
          elTagType: item.listClass,
        })),
      };
    },
  },
});

创建 CRUD 页面

<script setup lang="ts">
import { ref } from "vue";
import {
  useState,
  PageTemplate,
  Table,
  defineSearchConfig,
  defineFormConfig,
  defineColumnsConfig,
} from "vue-admin-kit";
import type { PageTemplateExposed } from "vue-admin-kit";

const pageTemplateRef = ref<PageTemplateExposed>();

const searchConfig = defineSearchConfig([
  { type: "input", prop: "name", label: "名称" },
  { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
]);

const formConfig = defineFormConfig([
  { type: "input", prop: "name", label: "名称", required: true },
  { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
]);

const columnsConfig = defineColumnsConfig([
  { type: "seq", title: "序号", width: 60 },
  { field: "name", title: "名称", minWidth: 120 },
  {
    field: "status",
    title: "状态",
    dictType: "sys_status",
    displayType: "tag",
  },
]);

useState({
  api: {
    list: (params) => getList(params),
    add: (data) => addItem(data),
    edit: (data) => updateItem(data),
    delete: (id) => deleteItem(id),
  },
  searchConfig,
  formConfig,
  columnsConfig,
  tableOptions: {
    operateColumns: [
      {
        title: "编辑",
        onClick: (row) => pageTemplateRef.value?.handleEdit(row),
      },
      {
        title: "删除",
        onClick: (row) => pageTemplateRef.value?.handleDelete(row),
      },
    ],
  },
});
</script>

<template>
  <PageTemplate ref="pageTemplateRef">
    <template #table>
      <Table />
    </template>
  </PageTemplate>
</template>

就这么简单！一个完整的 CRUD 页面就完成了。

核心功能详解

字典管理

vue-admin-kit 提供完整的字典管理功能，支持字典加载、缓存、响应式获取：

import { useDict, useDictLabel, preloadDicts } from "vue-admin-kit";

// 响应式获取字典
const { dictData, loaded } = useDict("sys_status");

// 获取字典标签
const label = useDictLabel("sys_status", "1");

// 预加载字典
await preloadDicts(["sys_status", "sys_yes_no"]);

还支持自定义字典适配器，将任意数据源转换为字典格式：

const customAdapters = {
  user_list: {
    api: () => getUserList(),
    params: () => ({ status: "1" }),
    transform: (res) =>
      res.data.map((item) => ({
        label: item.name,
        value: String(item.id),
      })),
  },
};

配置复用

采用"注册-使用"模式，支持配置复用：

import { col, registerColumnConfigs, getColumnConfig } from "vue-admin-kit";

// 注册通用列配置
registerColumnConfigs([
  col("序号", { type: "seq", width: 60 }),
  col("状态", { field: "status", dictType: "sys_status", displayType: "tag" }),
  col("创建时间", { field: "createTime", minWidth: 160 }),
]);

// 在页面中使用
const columns = getColumnConfig([
  "序号",
  "状态",
  ["名称", { field: "name", minWidth: 200 }], // 可覆盖配置
  "创建时间",
]);

条件显示

操作按钮支持灵活的条件显示：

import { showWhen, showWhenIn, showAll, showAny } from "vue-admin-kit";

const operateColumns = defineOperateColumns([
  { title: "编辑", show: showWhen("status", "0") }, // 状态为 0 时显示
  { title: "启用", show: showWhenIn("status", ["0", "2"]) }, // 状态为 0 或 2 时显示
  {
    title: "审核",
    show: showAll(showWhen("status", "1"), showWhen("role", "admin")),
  }, // AND 组合
]);

权限指令

内置权限指令，轻松实现按钮级权限控制：

<template>
  <el-button v-hasPermi="['system:user:add']">新增</el-button>
  <el-button v-hasRole="['admin']">管理员操作</el-button>
</template>

核心组件

组件	说明
`PageTemplate`	主 CRUD 页面模板组件，集成搜索、表格、表单、详情功能
`Table`	VXE-Table 封装，支持分页、列配置、操作按钮
`FormDialog`	表单弹窗组件
`DetailDialog`	详情弹窗组件
`Drawer`	抽屉组件
`SearchForm`	搜索表单组件
`Descriptions`	数据展示组件
`DictTag`	字典标签组件

技术栈

Vue 3.4+：使用 Composition API 和 <script setup> 语法
TypeScript 5.7：启用严格模式，完整类型支持
Element Plus 2.x：UI 组件库
VXE-Table 4.x：高性能表格组件
VueUse：Vue 组合式工具函数

适用场景

vue-admin-kit 特别适合以下场景：

企业级后台管理系统开发
需要快速搭建 CRUD 页面的项目
追求代码规范和一致性的团队
希望减少重复代码的开发者

总结

vue-admin-kit 通过配置驱动的设计理念，大幅简化了后台管理系统的开发工作。它不仅提供了丰富的内置功能，还保持了高度的可定制性，让你既能快速开发，又能满足各种业务需求。

如果你正在开发 Vue 3 后台管理系统，不妨试试 vue-admin-kit，相信它会成为你的得力助手！