avue-crud-plus

v3.4.38

Published

7 months ago

A Magic Configurable Web Framework

0High
0Medium
0Low

zhujinhui

vue element-plus avue

Avue CRUD Plus

介绍

Avue CRUD Plus 是基于 Vue 3 和 Element Plus 的二次封装框架，核心理念为数据驱动视图。主要针对 table 表格和 form 表单场景进行优化，同时衍生出更多企业常用的组件，达到高复用、易维护和易扩展的目标。

核心特性

🚀 数据驱动 - 通过配置化的方式快速构建页面
📦 开箱即用 - 丰富的组件库，满足企业级应用需求
🎨 主题定制 - 支持多种主题和样式定制
🌍 国际化 - 内置多语言支持
📱 响应式 - 完美适配各种屏幕尺寸
🔧 插件化 - 丰富的插件生态，支持功能扩展

浏览器兼容性

支持所有符合 ES5 标准的浏览器（不支持 IE8 及以下版本）。

快速开始

安装

# npm
npm install avue-crud-plus

# yarn
yarn add avue-crud-plus

# pnpm
pnpm add avue-crud-plus

使用

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import Avue from 'avue-crud-plus'
import 'element-plus/dist/index.css'
import 'avue-crud-plus/lib/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(Avue, {
  permissions: useUserStore().permissions,
})
app.mount('#app')

基础示例

<template>
  <avue-crud
    :data="data"
    :option="option"
    @row-save="rowSave"
    @row-update="rowUpdate"
    @row-del="rowDel"
  />
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: '张三',
          age: 25,
          email: '[email protected]'
        }
      ],
      option: {
        column: [
          {
            label: '姓名',
            prop: 'name',
            rules: [{ required: true, message: '请输入姓名' }]
          },
          {
            label: '年龄',
            prop: 'age',
            type: 'number'
          },
          {
            label: '邮箱',
            prop: 'email',
            type: 'email'
          }
        ]
      }
    }
  },
  methods: {
    rowSave(row, done, loading) {
      // 保存逻辑
      setTimeout(() => {
        done()
      }, 1000)
    },
    rowUpdate(row, index, done, loading) {
      // 更新逻辑
      setTimeout(() => {
        done()
      }, 1000)
    },
    rowDel(row, index) {
      // 删除逻辑
    }
  }
}
</script>

组件库

核心组件

| 组件名 | 说明 | 文档 | |--------|------|------| | avue-crud | 数据表格组件，支持增删改查 | 文档 | | avue-form | 表单组件，支持多种表单控件 | 文档 |

数据展示组件

| 组件名 | 说明 | |--------|------| | avue-data-card | 卡片数据展示 | | avue-data-display | 数据展示面板 | | avue-data-progress | 进度条组件 | | avue-data-icons | 图标展示组件 | | avue-data-tabs | 标签页组件 | | avue-data-panel | 面板组件 |

表单控件

| 组件名 | 说明 | |--------|------| | avue-input | 输入框组件 | | avue-select | 选择器组件 | | avue-date | 日期选择器 | | avue-upload | 文件上传组件 | | avue-tree | 树形控件 | | avue-cascader | 级联选择器 |

其他组件

| 组件名 | 说明 | |--------|------| | avue-article | 文章组件 | | avue-chat | 聊天组件 | | avue-comment | 评论组件 | | avue-flow | 流程图组件 | | avue-login | 登录组件 | | avue-verify | 验证码组件 |

插件系统

内置插件

导出插件 - 支持 Excel、CSV 等格式导出
打印插件 - 页面打印功能
截图插件 - 页面截图功能
水印插件 - 页面水印功能
剪贴板插件 - 剪贴板操作
日志插件 - 日志记录功能

使用插件

// 导出功能
this.$Export.excel({
  title: '用户列表',
  columns: this.option.column,
  data: this.data
})

// 打印功能
this.$Print({
  title: '用户列表',
  columns: this.option.column,
  data: this.data
})

// 水印功能
this.$Watermark({
  text: 'avuejs.com',
  fontFamily: 'microsoft yahei',
  color: '#999',
  fontSize: 16
})

开发指南

环境要求

Node.js >= 14.0.0
Vue >= 3.2.0
Element Plus >= 2.8.1

本地开发

# 克隆项目
git clone https://gitee.com/smallweigit/avue.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

项目结构

avue-plus/
├── build/                 # 构建配置
├── docs/                  # 文档
├── examples/              # 示例
├── lib/                   # 构建输出
├── packages/              # 组件源码
│   ├── core/             # 核心组件
│   ├── data/             # 数据展示组件
│   └── element-ui/       # Element UI 组件
├── src/                   # 源码
│   ├── core/             # 核心功能
│   ├── plugin/           # 插件
│   ├── ui/               # UI 组件入口
│   └── utils/            # 工具函数
└── styles/               # 样式文件

文档

社区

贡献

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

在提交问题之前，请务必提供详细的问题描述和截图，不符合准则的问题将会被拒绝。

许可证

MIT

致谢

感谢以下开源项目的支持：