Avue Design

Avue Design - 组件代码生成 Skill 集合

Avue 是基于 Vue3 + Element-Plus 的低代码前端框架，通过 JSON 配置生成页面。版本：v3.8.2，MIT 协议。

快速安装

npm i @smallwei/avue -S
# 或
yarn add @smallwei/avue -S

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { createApp } from 'vue'
import Avue from '@smallwei/avue'
import '@smallwei/avue/lib/index.css'

const app = createApp({})
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(ElementPlus)
app.use(Avue)
// 若使用字典或上传组件，需传入 axios：
// import axios from 'axios'
// app.use(Avue, { axios })

参考文件导航

根据用户需求，读取对应的参考文件获取完整配置信息：

基础配置

avue-crud (CRUD 表格组件)

avue-form (表单组件)

其他组件

代码生成核心规则

1. 两种 API 风格

生成代码时必须确认用户要用哪种风格（默认 Composition API）。详细模板见 references/api-style-guide.md。

Composition API (推荐)：使用 <script setup>，ref()/reactive() 声明数据，箭头函数定义方法。

Options API：使用 export default {}，data() 返回数据，methods 对象定义方法。

2. avue-crud 基本结构

<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
      :table-loading="loading"
      v-model="form"
      v-model:page="page"
      v-model:search="search"
      :permission="permissionList"
      :before-open="beforeOpen"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    />
  </basic-container>
</template>

3. avue-form 基本结构

<template>
  <avue-form
    ref="form"
    v-model="formData"
    :option="option"
    @submit="handleSubmit"
    @reset-change="handleReset"
  />
</template>

4. option 配置核心

option 是 Avue 组件的核心配置对象，包含：

• 表格/表单级属性（size, height, border, stripe 等）
• column 数组：每个字段的完整配置（label, prop, type, rules, dicData 等）
• group 数组：分组配置（仅表单）

const option = {
  // 表格级配置
  height: 'auto',
  border: true,
  stripe: true,
  index: true,
  selection: true,
  // 列配置
  column: [
    {
      label: '名称',
      prop: 'name',
      type: 'input',        // 字段类型
      search: true,          // 启用搜索
      span: 12,              // 表单中占栅格数
      rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      // 字典配置
      dicData: [],           // 本地字典
      dicUrl: '',            // 远程字典URL
      props: { label: 'label', value: 'value' },
    }
  ]
}

5. 字段类型速查

6. 关键注意事项

• column 可以是数组也可以是对象格式（3.2.15+，用 prop 做 key）
• 深层数据绑定用 bind 属性：bind: 'info.address'
• 字典联动用 cascader 属性指定子字段 prop
• 字段动态控制用 control 属性（支持 Promise，3.5.0+）
• 表单分组用 group 配置，标签页显示设 tabs: true
• 所有组件都支持 render 函数自定义渲染（3.4.2+）
• CRUD 弹窗类型用 dialogType: 'drawer' 可改为抽屉模式
• 搜索字段通过在 column 中设 search: true 启用