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

参考文件导航

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

基础配置

参考文件	何时读取
references/global-config.md	全局配置、安装、国际化、云存储
references/api-style-guide.md	需要生成 Composition API 或 Options API 代码时
references/utility-apis.md	使用 Avue 全局工具函数 ($DialogForm, $Clipboard 等)

avue-crud (CRUD 表格组件)

参考文件	何时读取
references/crud-core.md	CRUD 基础属性、事件、方法、插槽、按钮、弹窗、分页
references/crud-column.md	列配置、字典、排序、过滤、格式化、渲染
references/crud-search.md	搜索栏配置、搜索字段属性
references/crud-form-dialog.md	CRUD 弹窗表单配置、验证规则、字段状态控制
references/crud-features.md	高级功能：树表、虚拟滚动、卡片模式、行编辑、导入导出、拖拽排序、权限控制等

avue-form (表单组件)

参考文件	何时读取
references/form-core.md	表单基础属性、事件、方法、插槽、布局
references/form-field-types.md	全部字段类型 (input/select/date/upload 等 27+ 种) 的详细配置属性
references/form-advanced.md	字典配置、验证规则、动态子表单、文件上传(含云存储)、字段联动

其他组件

参考文件	何时读取
references/tree-component.md	avue-tree 树组件
references/data-display.md	数据展示组件 (DataDisplay, DataCard 等)
references/other-components.md	Card、DialogForm、Calendar、Flow、Login、Tabs 等独立组件

代码生成核心规则

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. 字段类型速查

类型	type 值	说明
文本输入	input	支持 password/textarea/phone/currency/bankCard/idCard/email/code/plate/ip/mac/uscc 子类型
数字输入	number	数字步进器
下拉选择	select	单选/多选/远程搜索/分组
级联选择	cascader	多级联动选择
多选框	checkbox	多选组
单选框	radio	单选组
日期	date/datetime/daterange/datetimerange/week/month/year/dates	日期时间选择
时间	time/timerange	时间选择
开关	switch	布尔切换
文件上传	upload	支持阿里云/七牛/腾讯COS
数组	array	数组输入框
图片	img	图片输入
链接	url	超链接输入
树选择	tree	树型选择器
标签输入	input-tag	标签输入 (3.6.0+)
提及	mention	@提及组件 (3.6.0+)
表格选择	input-table	表格弹窗选择
颜色选择	color	颜色选择器
Cron表达式	input-cron	Cron可视化配置 (3.8.2+)
图标选择	icon	图标选择器
地图选择	map	高德地图坐标选择
评分	rate	星级评分
滑块	slider	滑动条
标题	title	分组标题
动态表单	dynamic	子表单/子表格

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 启用