⚡

Avue框架开发技能Skill avue

此技能提供Avue框架的全面指导，帮助用户构建管理界面、实现CRUD操作、使用表单和表格组件等前端开发任务。关键词包括Avue, Vue, Element UI, 数据驱动, 表单, 表格, CRUD, 树形, 上传, 选择器，适合SEO搜索。

前端开发 0 次安装 0 次浏览 更新于 3/22/2026

name: avue description: 提供Avue框架的全面指导，包括CRUD操作、表单组件和数据管理。当用户询问Avue、需要构建管理界面、实现CRUD操作或使用Avue组件时使用。 license: 完整条款见LICENSE.txt

何时使用此技能

每当用户想要时使用此技能：

  • 使用Avue构建管理系统
  • 使用Avue表格和表单组件
  • 实现数据驱动的视图
  • 使用Avue全局API（$DialogForm、$Clipboard、$ImagePreview等）
  • 配置Avue表单和表格
  • 使用Avue组件（树形、上传、选择器等）
  • 使用Avue实现CRUD操作
  • 自定义Avue组件
  • 配置国际化
  • 使用Avue插件和扩展

如何使用此技能

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

  1. 从用户请求中识别主题：

    • 快速开始 → examples/getting-started/installation.md 或 examples/getting-started/quick-start.md
    • 表单 → examples/forms/basic-form.md 或 examples/forms/form-config.md
    • 表格 → examples/components/table.md
    • 树形 → examples/components/tree.md
    • 上传 → examples/components/upload.md
    • 全局API → api/global-api.md

  2. 从examples/目录加载适当的示例文件：

    快速开始 - examples/getting-started/：

    • examples/getting-started/installation.md - 安装Avue和基本设置
    • examples/getting-started/quick-start.md - 快速开始教程
    • examples/getting-started/global-config.md - 全局配置

    表单 - examples/forms/：

    • examples/forms/basic-form.md - 基本表单使用
    • examples/forms/form-config.md - 表单配置
    • examples/forms/form-validation.md - 表单验证
    • examples/forms/form-table.md - 带表格选择器的表单

    组件 - examples/components/：

    • examples/components/table.md - 表格组件
    • examples/components/tree.md - 树形组件
    • examples/components/upload.md - 上传组件
    • examples/components/select.md - 选择器组件
    • examples/components/input.md - 输入组件

    高级 - examples/advanced/：

    • examples/advanced/crud.md - CRUD操作
    • examples/advanced/internationalization.md - 国际化
    • examples/advanced/plugins.md - 插件和扩展

  3. 遵循该示例文件中的具体指令，包括语法、结构和最佳实践

    重要注意事项：

    • 所有示例遵循Avue API
    • 示例使用Vue 2.x语法
    • 每个示例文件包括关键概念、代码示例和要点
    • 始终检查示例文件以获取最佳实践和常见模式
    • Avue基于Vue和Element UI

  4. 需要时参考api/目录中的API文档：

    • api/global-api.md - 全局API参考
    • api/components.md - 组件API参考

  5. 使用templates/目录中的模板：

    • templates/form-template.md - 表单模板
    • templates/table-template.md - 表格模板
    • templates/crud-template.md - CRUD模板

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

示例和模板

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

使用示例：

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

使用模板：

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

API参考

详细的API文档可在api/目录中找到，组织方式与官方Avue API文档结构匹配：

全局API（api/global-api.md）

  • $DialogForm - 对话框表单
  • $Clipboard - 剪贴板操作
  • $ImagePreview - 图片预览
  • $Print - 打印功能
  • $Export - 导出功能
  • $Log - 日志记录
  • findObject, findArray, findNode - 实用函数
  • watermark - 水印
  • downFile - 文件下载
  • randomId - 随机ID生成
  • loadScript - 脚本加载
  • deepClone - 深克隆
  • setPx - 像素转换
  • validatenull - 验证
  • vaildData - 数据验证

组件API（api/components.md）

  • 组件属性和API
  • 组件事件和方法
  • 组件配置

使用API参考：

  1. 识别需要的API
  2. 从api/目录加载对应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考链接的示例文件以获取详细使用模式
  5. 所有API文件包括指向examples/目录中相关示例文件的链接

最佳实践

  1. 安装Avue：安装@smallwei/avue包
  2. 导入样式：导入Avue CSS样式
  3. 使用Vue.use()：用Vue.use(Avue)注册Avue
  4. 数据驱动：对表单和表格使用数据驱动方法
  5. 配置：通过选项对象配置表单和表格
  6. 全局API：使用Avue全局API进行常见操作
  7. 国际化：配置i18n以支持多语言
  8. 插件：使用Avue插件以扩展功能
  9. 组件组合：组合组件以构建复杂UI
  10. 性能：针对大数据集进行性能优化

资源

关键词

Avue, Vue, Element UI, 数据驱动, 表单, 表格, CRUD, $DialogForm, $Clipboard, $ImagePreview, $Print, $Export, 树形, 上传, 选择器