vue-admin-kit

企业级 Vue 3 后台管理组件工具套件，基于 Element Plus 和 VXE-Table 构建，提供配置驱动的 CRUD 页面模板。

📖 在线文档

✨ 特性

• 🚀 配置驱动 - 通过 JSON 配置快速生成搜索表单、数据表格、详情弹窗、编辑表单
• 📦 开箱即用 - 内置 14 种表单控件、字典管理、文件上传、权限指令
• 🎨 高度可定制 - 支持自定义组件、字典适配器、权限控制
• 📱 响应式设计 - 根据屏幕尺寸自动调整表单项大小
• 🔧 TypeScript - 完整的类型定义，提供良好的开发体验

📦 安装

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

Peer Dependencies

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

🚀 快速开始

1. 引入样式

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

2. 初始化配置

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,
        })),
      };
    },
  },
});

3. 创建 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>

📚 核心功能

表单控件

内置 14 种表单控件，通过 type 属性指定：

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

字典管理

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"]);

配置工具

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

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

// 注册
registerColumnConfigs([
  col("序号", { type: "seq", width: 60 }),
  col("状态", { field: "status", dictType: "sys_status", displayType: "tag" }),
]);

// 使用
const columns = getColumnConfig(["序号", "状态", ["名称", { minWidth: 200 }]]);

权限指令

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

📖 文档

完整文档请访问：https://vue-admin-kit.jiang.in/

• 快速开始
• 配置驱动
• 字典管理
• 表单控件
• API 参考

🔗 相关链接

• GitHub
• 更新日志
• Element Plus
• VXE-Table

📄 License

MIT © 2025 vue-admin-kit