Back to Details

avue

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:
  • Build management systems with Avue
  • Use Avue table and form components
  • Implement data-driven views
  • Use Avue global APIs ($DialogForm, $Clipboard, $ImagePreview, etc.)
  • Configure Avue forms and tables
  • Use Avue components (Tree, Upload, Select, etc.)
  • Implement CRUD operations with Avue
  • Customize Avue components
  • Configure internationalization
  • Use Avue plugins and extensions
当用户有以下需求时可使用本技能：
  • 使用Avue搭建管理系统
  • 使用Avue表格和表单组件
  • 实现数据驱动视图
  • 使用Avue全局API（$DialogForm、$Clipboard、$ImagePreview等）
  • 配置Avue表单和表格
  • 使用Avue组件（Tree、Upload、Select等）
  • 基于Avue实现CRUD操作
  • 自定义Avue组件
  • 配置国际化
  • 使用Avue插件和扩展

How to use this skill

如何使用本技能

This skill is organized to match the Avue official documentation structure (https://avuejs.com/). When working with Avue:
  1. Identify the topic from the user's request:
    • Getting started/快速开始 → 
      examples/getting-started/installation.md
      or 
      examples/getting-started/quick-start.md
    • Form/表单 → 
      examples/forms/basic-form.md
      or 
      examples/forms/form-config.md
    • Table/表格 → 
      examples/components/table.md
    • Tree/树形 → 
      examples/components/tree.md
    • Upload/上传 → 
      examples/components/upload.md
    • Global API/全局 API → 
      api/global-api.md
  2. Load the appropriate example file from the 
    examples/
    directory:
    Getting Started (快速开始) - 
    examples/getting-started/
    :
    • examples/getting-started/installation.md
      - Installing Avue and basic setup
    • examples/getting-started/quick-start.md
      - Quick start tutorial
    • examples/getting-started/global-config.md
      - Global configuration
    Forms (表单) - 
    examples/forms/
    :
    • examples/forms/basic-form.md
      - Basic form usage
    • examples/forms/form-config.md
      - Form configuration
    • examples/forms/form-validation.md
      - Form validation
    • examples/forms/form-table.md
      - Form with table selector
    Components (组件) - 
    examples/components/
    :
    • examples/components/table.md
      - Table component
    • examples/components/tree.md
      - Tree component
    • examples/components/upload.md
      - Upload component
    • examples/components/select.md
      - Select component
    • examples/components/input.md
      - Input component
    Advanced (高级) - 
    examples/advanced/
    :
    • examples/advanced/crud.md
      - CRUD operations
    • examples/advanced/internationalization.md
      - Internationalization
    • examples/advanced/plugins.md
      - Plugins and extensions
  3. Follow the specific instructions in that example file for syntax, structure, and best practices
    Important Notes:
    • All examples follow Avue API
    • Examples use Vue 2.x syntax
    • Each example file includes key concepts, code examples, and key points
    • Always check the example file for best practices and common patterns
    • Avue is based on Vue and Element UI
  4. Reference API documentation in the 
    api/
    directory when needed:
    • api/global-api.md
      - Global API reference
    • api/components.md
      - Component API reference
  5. Use templates from the 
    templates/
    directory:
    • templates/form-template.md
      - Form template
    • templates/table-template.md
      - Table template
    • templates/crud-template.md
      - CRUD template
本技能的组织结构与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模板

Doc mapping (one-to-one with official documentation)

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

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the 
examples/
directory (see mapping above).
To use examples:
  • Identify the topic from the user's request
  • Load the appropriate example file from the mapping above
  • Follow the instructions, syntax, and best practices in that file
  • Adapt the code examples to your specific use case
To use templates:
  • Reference templates in 
    templates/
    directory for common scaffolding
  • Adapt templates to your specific needs and coding style
本技能包含与官方文档结构一致的详细示例，所有示例都存放在
examples/
目录下（见上方映射关系）。
使用示例的方法：
  • 从用户请求中确定主题
  • 从上方映射关系中加载对应的示例文件
  • 遵循文件中的说明、语法和最佳实践
  • 根据你的具体使用场景调整代码示例
使用模板的方法：
  • 参考
    templates/
    目录下的模板搭建通用脚手架
  • 根据你的具体需求和编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the 
api/
directory, organized to match the official Avue API documentation structure:
api/
目录下提供了详细的API文档，组织结构与Avue官方API文档一致：

Global API (
api/global-api.md
)

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

  • $DialogForm - Dialog form
  • $Clipboard - Clipboard operations
  • $ImagePreview - Image preview
  • $Print - Print functionality
  • $Export - Export functionality
  • $Log - Logging
  • findObject, findArray, findNode - Utility functions
  • watermark - Watermark
  • downFile - File download
  • randomId - Random ID generation
  • loadScript - Script loading
  • deepClone - Deep clone
  • setPx - Pixel conversion
  • validatenull - Validation
  • vaildData - Data validation
  • $DialogForm - 弹窗表单
  • $Clipboard - 剪贴板操作
  • $ImagePreview - 图片预览
  • $Print - 打印功能
  • $Export - 导出功能
  • $Log - 日志记录
  • findObject、findArray、findNode - 工具函数
  • watermark - 水印
  • downFile - 文件下载
  • randomId - 随机ID生成
  • loadScript - 脚本加载
  • deepClone - 深拷贝
  • setPx - 像素转换
  • validatenull - 空值校验
  • vaildData - 数据校验

Components API (
api/components.md
)

组件API（
api/components.md
）

  • Component props and APIs
  • Component events and methods
  • Component configuration
To use API reference:
  1. Identify the API you need help with
  2. Load the corresponding API file from the 
    api/
    directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the 
    examples/
    directory
  • 组件属性与API
  • 组件事件与方法
  • 组件配置
使用API参考的方法：
  1. 确定你需要查询的API
  2. 从
    api/
    目录加载对应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考关联的示例文件了解详细使用模式
  5. 所有API文件都包含指向
    examples/
    目录下相关示例文件的链接

Best Practices

最佳实践

  1. Install Avue: Install @smallwei/avue package
  2. Import styles: Import Avue CSS styles
  3. Use Vue.use(): Register Avue with Vue.use(Avue)
  4. Data-driven: Use data-driven approach for forms and tables
  5. Configuration: Configure forms and tables via option objects
  6. Global API: Use Avue global APIs for common operations
  7. Internationalization: Configure i18n for multi-language support
  8. Plugins: Use Avue plugins for extended functionality
  9. Component composition: Compose components for complex UIs
  10. Performance: Optimize for performance with large datasets
  1. 安装Avue：安装@smallwei/avue包
  2. 引入样式：导入Avue CSS样式
  3. 注册组件：通过Vue.use(Avue)注册Avue
  4. 数据驱动：表单和表格采用数据驱动的开发方式
  5. 配置化：通过option对象配置表单和表格
  6. 全局API：使用Avue全局API实现通用操作
  7. 国际化：配置i18n实现多语言支持
  8. 插件扩展：使用Avue插件扩展功能
  9. 组件组合：组合组件实现复杂UI
  10. 性能优化：针对大数据集做性能优化

Resources

资源

Keywords

关键词

Avue, Vue, Element UI, data-driven, form, table, CRUD, $DialogForm, $Clipboard, $ImagePreview, $Print, $Export, tree, upload, select, 数据驱动, 表单, 表格, CRUD, 树形, 上传, 选择器
Avue, Vue, Element UI, data-driven, form, table, CRUD, $DialogForm, $Clipboard, $ImagePreview, $Print, $Export, tree, upload, select, 数据驱动, 表单, 表格, CRUD, 树形, 上传, 选择器