avue

JavaScript

Avue.js2.0是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易

Last updated Jul 9, 2026

2.3k

Stars

492

Forks

Issues

Stars/day

Attention Score

View on GitHub ↗ Open in github.dev

Topics

#avue #crud #element-ui #form #vue #vue-cli #web

Language breakdown

JavaScript 75.9%

Vue 16.0%

TypeScript 5.1%

SCSS 2.8%

Batchfile 0.1%

Shell 0.0%

▸ Files click to expand

README

Avue.js

Avue.js 是基于 Vue 3 与 Element Plus 的数据驱动型组件库，围绕表单、表格和业务配置场景做了进一步封装。它通过统一的配置方式降低重复开发成本，让 CRUD、表单联动、数据展示和常见业务组件的搭建更直接。

适合以下场景：

后台管理系统的快速搭建
表单和表格配置较多的业务系统
需要统一交互规范的中后台项目
需要复用常见业务组件的企业应用

特性

数据驱动视图，通过配置生成常见业务界面
深度适配 Vue 3 与 Element Plus 生态
内置 avue-crud、avue-form、avue-search 等高频组件
提供上传、导出、打印、水印、剪贴板、截图等常用能力
支持国际化、全局配置、Axios 注入和类型声明
附带大量本地示例，便于快速对照接入

环境要求

vue >= 3.2.0
element-plus >= 2.2.0
@element-plus/icons-vue >= 2.0.0

以上依赖为当前包的 peerDependencies，安装 Avue 时需要一并安装。

安装

pnpm add vue element-plus @element-plus/icons-vue @smallwei/avue

或使用其他包管理器：

npm install vue element-plus @element-plus/icons-vue @smallwei/avue

yarn add vue element-plus @element-plus/icons-vue @smallwei/avue

快速开始

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import Avue from "@smallwei/avue";
import "@smallwei/avue/lib/index.css";
import App from "./App.vue";
const app = createApp(App);
app.use(ElementPlus); app.use(Avue, {   size: "default",   menuType: "text",   locale: "zh-cn", });
app.mount("#app");

基础用法示例：

<template>
  <avue-form v-model="form" :option="option" />
</template>

全局配置

app.use(Avue, options) 支持常见全局参数：

| 参数 | 类型 | 说明 | | --- | --- | --- | | size | string | 全局组件尺寸 | | calcHeight | number | 全局高度修正值 | | menuType | string | 操作区按钮展示类型 | | formOption | Record<string, any> | 表单默认配置 | | crudOption | Record<string, any> | CRUD 默认配置 | | appendToBody | boolean | 弹层类组件是否挂载到 body | | locale | string \| object | 语言配置 | | i18n | any | 自定义国际化处理器 | | axios | any | 自定义请求实例 | | canvas | object | 水印默认配置 | | qiniu | object | 七牛上传默认配置 | | ali | object | 阿里云上传默认配置 |

组件与能力

当前仓库内置的能力主要包括：

表单与表格：avue-form、avue-crud、avue-search
输入组件：avue-input、avue-select、avue-input-tree、avue-input-table
业务组件：avue-login、avue-tabs、avue-tree、avue-chat、avue-flow
数据展示：avue-card、avue-comment、avue-count-up、avue-article
插件能力：导出、打印、截图、剪贴板、水印、日志、图片预览、弹窗表单

更完整的使用方式可参考文档站和仓库示例。

文档与示例

官方文档：https://avuejs.com
Gitee 仓库：https://gitee.com/smallweigit/avue
问题反馈：https://gitee.com/smallweigit/avue/issues
Element Plus 示例：examples/element-plus
数据展示示例：examples/data

本地开发

pnpm install
pnpm dev

常用命令：

pnpm dev
pnpm build
pnpm build:esm
pnpm build:cjs
pnpm build:browser
pnpm typecheck
pnpm gen:version

目录结构

| 目录 | 说明 | | --- | --- | | src | 组件与插件源码入口 | | packages | 组件实现与业务模块 | | styles | 样式资源 | | types | TypeScript 类型声明 | | examples | 本地示例与调试页面 | | build | 构建与版本生成脚本 | | lib | 构建产物 |