名称: avue-form 描述: 提供关于Avue表单组件的全面指导，包括表单配置、验证和动态表单。当用户询问Avue表单、需要创建动态表单、实现表单验证或处理表单配置时使用此技能。许可证: 完整条款见LICENSE.txt

何时使用此技能

每当用户想要：

在Vue项目中安装和设置Avue-form
在Vue应用中使用Avue-form组件
配置表单选项和列
处理表单验证
使用表单事件和方法
自定义表单组件
理解Avue-form API和方法
解决Avue-form问题

如何使用此技能

此技能组织方式匹配Avue-form官方文档结构（https://avuejs.com/form/form-doc.html）。当使用Avue-form时：

识别主题 从用户的请求中：
- 安装 → examples/components/installation.md
- 基础用法 → examples/components/basic-usage.md
- 配置 → examples/components/configuration.md
- 功能特性 → examples/features/
- API文档 → api/
加载适当的示例文件 从 examples/ 目录：

组件：
- examples/components/intro.md - Avue-form介绍
- examples/components/installation.md - 安装指南
- examples/components/basic-usage.md - 基础用法
- examples/components/configuration.md - 配置
- examples/components/options.md - 表单选项
- examples/components/columns.md - 表单列
- examples/components/validation.md - 表单验证
- examples/components/events.md - 表单事件
- examples/components/methods.md - 表单方法
功能特性：
- examples/features/dynamic-form.md - 动态表单
- examples/features/form-layout.md - 表单布局
- examples/features/form-rules.md - 表单规则
- examples/features/form-submit.md - 表单提交
- examples/features/form-reset.md - 表单重置
- examples/features/custom-components.md - 自定义组件
- examples/features/form-group.md - 表单分组
- examples/features/form-tabs.md - 表单标签页
遵循特定指令 在该示例文件中，了解语法、结构和最佳实践

重要注意事项：
- Avue-form基于Vue
- 组件使用Vue语法
- 示例包括Options API和Composition API
- 每个示例文件包含关键概念、代码示例和要点
参考API文档 在 api/ 目录中根据需要：
- api/form-api.md - 表单组件API
- api/options-api.md - 选项API
- api/columns-api.md - 列API
- api/events-api.md - 事件API
- api/methods-api.md - 方法API
使用模板 从 templates/ 目录：
- templates/installation.md - 安装模板
- templates/basic-form.md - 基础表单模板
- templates/configuration.md - 配置模板

1. 理解Avue-form

Avue-form是一个Vue表单组件库，提供丰富的表单控件和配置选项。

关键概念：

表单组件：主表单组件
选项：表单配置选项
列：表单字段定义
验证：表单验证规则
事件：表单事件
方法：表单方法

2. 安装

使用npm：

npm install @avue/form

使用yarn：

yarn add @avue/form

使用pnpm：

pnpm add @avue/form

3. 基本设置

// main.js
import Vue from 'vue'
import Avue from '@avue/form'
import '@avue/form/lib/theme-default/index.css'

Vue.use(Avue)

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

<script>
export default {
  data() {
    return {
      form: {},
      option: {
        column: [
          {
            label: '姓名',
            prop: 'name',
            type: 'input'
          }
        ]
      }
    }
  }
}
</script>

文档映射（与官方文档一对一）

examples/ → https://avuejs.com/form/form-doc.html

示例和模板

此技能包含详细示例，组织方式匹配官方文档结构。所有示例在 examples/ 目录中（见上述映射）。

使用示例：

从用户的请求中识别主题
根据上述映射加载适当的示例文件
遵循该文件中的指令、语法和最佳实践
将代码示例调整到特定用例

使用模板：

参考 templates/ 目录中的模板进行常见脚手架
根据特定需求和编码风格调整模板

API参考

详细API文档在 api/ 目录中，组织方式匹配Avue-form官方API文档结构：

表单组件API (`api/form-api.md`)

表单组件属性
表单组件事件
表单组件插槽

选项API (`api/options-api.md`)

表单选项配置
选项属性
选项方法

列API (`api/columns-api.md`)

列定义
列属性
列类型

事件API (`api/events-api.md`)

表单事件
事件处理器
事件参数

方法API (`api/methods-api.md`)

表单方法
方法参数
方法返回值

使用API参考：

识别需要的API
从 api/ 目录加载对应的API文件
查找API签名、参数、返回类型和示例
参考链接的示例文件了解详细使用模式
所有API文件包含到 examples/ 目录中相关示例文件的链接

最佳实践

正确配置选项：正确设置表单选项
清晰定义列：使用适当类型定义表单列
处理验证：适当使用验证规则
处理事件：使用表单事件进行交互
使用方法：利用表单方法进行操作
自定义组件：根据需要自定义组件
遵循Vue模式：遵循Vue.js最佳实践

资源

官方文档：https://avuejs.com/form/form-doc.html
GitHub仓库：https://github.com/avue/avue

关键词

Avue-form, avue-form, @avue/form, Vue表单, 表单组件, 表单配置, 表单验证, 表单事件, 表单方法, 动态表单, 表单布局, 表单规则, 表单提交, 表单重置, 自定义组件, 表单分组, 表单标签页

名称: avue-form 描述: 提供关于Avue表单组件的全面指导，包括表单配置、验证和动态表单。当用户询问Avue表单、需要创建动态表单、实现表单验证或处理表单配置时使用此技能。 许可证: 完整条款见LICENSE.txt