avue-form

适用场景

当用户希望执行以下操作时，请使用此技能：

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

使用方法

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

1. 识别用户请求涉及的主题：

   • Installation/安装 → examples/components/installation.md
   • Basic Usage/基础用法 → examples/components/basic-usage.md
   • Configuration/配置 → examples/components/configuration.md
   • Features/功能特性 → examples/features/
   • API/API 文档 → api/

2. 从 examples/ 目录中加载相应的示例文件：

   组件（Components）：

   • 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 - 表单方法

   功能特性（Features）：

   • 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 - 表单标签页

3. 根据该示例文件中的具体说明编写语法和结构，并遵循最佳实践

   重要说明：

   • Avue-form 基于 Vue
   • 组件使用 Vue 语法
   • 示例同时包含 Options API 和 Composition API
   • 每个示例文件都包含关键概念、代码示例和要点

4. 必要时参考 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

5. 使用 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: 'Name',
            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）

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

Options API（api/options-api.md）

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

Columns API（api/columns-api.md）

• 列定义
• 列属性
• 列类型

Events API（api/events-api.md）

• 表单事件
• 事件处理程序
• 事件参数

Methods API（api/methods-api.md）

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

使用 API 参考：

1. 确定需要查询的 API
2. 从 api/ 目录中打开对应的 API 文件
3. 查找 API 签名、参数、返回类型和示例
4. 参考链接中的示例文件，了解详细用法
5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

1. 正确配置选项：正确设置表单选项
2. 清晰定义列：为表单列设置合适的类型
3. 处理验证：合理使用验证规则
4. 处理事件：使用表单事件进行交互
5. 使用方法：利用表单方法执行操作
6. 自定义组件：按需自定义组件
7. 遵循 Vue 模式：遵循 Vue.js 最佳实践

资源

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

关键词

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