avue

适用场景

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

• 使用 Avue 构建管理系统
• 使用 Avue 表格和表单组件
• 实现数据驱动视图
• 使用 Avue 全局 API（$DialogForm、$Clipboard、$ImagePreview 等）
• 配置 Avue 表单和表格
• 使用 Avue 组件（Tree、Upload、Select 等）
• 使用 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 模板

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

• 查看示例和 API 文件 → https://avuejs.com

示例和模板

此技能包含详细示例，按官方文档结构组织。所有示例都位于 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. 性能：针对大型数据集优化性能

资源

• 官方网站：https://avuejs.com/
• GitHub 仓库：https://github.com/avue/avue

关键词

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