Provides comprehensive guidance for Avue Form component including form configuration, validation, and dynamic forms. Use when the user asks about Avue Form, needs to create dynamic forms, implement form validation, or work with form configurations.
Use this skill whenever the user wants to:
This skill is organized to match the Avue-form official documentation structure (https://avuejs.com/form/form-doc.html). When working with Avue-form:
Identify the topic from the user's request:
examples/components/installation.mdexamples/components/basic-usage.mdexamples/components/configuration.mdexamples/features/api/Load the appropriate example file from the examples/ directory:
Components (组件):
examples/components/intro.md - Introduction to Avue-formexamples/components/installation.md - Installation guideexamples/components/basic-usage.md - Basic usageexamples/components/configuration.md - Configurationexamples/components/options.md - Form optionsexamples/components/columns.md - Form columnsexamples/components/validation.md - Form validationexamples/components/events.md - Form eventsexamples/components/methods.md - Form methodsFeatures (功能特性):
examples/features/dynamic-form.md - Dynamic formexamples/features/form-layout.md - Form layoutexamples/features/form-rules.md - Form rulesexamples/features/form-submit.md - Form submitexamples/features/form-reset.md - Form resetexamples/features/custom-components.md - Custom componentsexamples/features/form-group.md - Form groupexamples/features/form-tabs.md - Form tabsFollow the specific instructions in that example file for syntax, structure, and best practices
Important Notes:
Reference API documentation in the api/ directory when needed:
api/form-api.md - Form component APIapi/options-api.md - Options APIapi/columns-api.md - Columns APIapi/events-api.md - Events APIapi/methods-api.md - Methods APIUse templates from the templates/ directory:
templates/installation.md - Installation templatestemplates/basic-form.md - Basic form templatestemplates/configuration.md - Configuration templatesAvue-form is a Vue form component library that provides rich form controls and configuration options.
Key Concepts:
Using npm:
npm install @smallwei/avue
Using yarn:
yarn add @smallwei/avue
Using pnpm:
pnpm add @smallwei/avue
// main.js
import Vue from 'vue'
import Avue from '@smallwei/avue'
import '@smallwei/avue/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.htmlThis skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).
To use examples:
To use templates:
templates/ directory for common scaffoldingDetailed API documentation is available in the api/ directory, organized to match the official Avue-form API documentation structure:
api/form-api.md)api/options-api.md)api/columns-api.md)api/events-api.md)api/methods-api.md)To use API reference:
api/ directoryexamples/ directoryAvue-form, avue-form, @avue/form, Vue form, form component, 表单组件, 表单配置, 表单验证, 表单事件, 表单方法, form options, form columns, form validation, form events, form methods, dynamic form, form layout, form rules, form submit, form reset, custom components, form group, form tabs
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控。