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:

Identify the topic from the user's request:

Getting started/快速开始 →

examples/getting-started/installation.md

examples/getting-started/quick-start.md

Form/表单 →

examples/forms/basic-form.md

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
```

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

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
Reference API documentation in the
```
api/
```
directory when needed:
- ```
api/global-api.md
```
  - Global API reference
- ```
api/components.md
```
  - Component API reference

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时：

从用户请求中确定主题：

快速开始 →

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
```

从
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
```
- 插件与扩展

遵循示例文件中的具体说明，包括语法、结构和最佳实践

重要提示:
- 所有示例均遵循Avue API规范
- 示例使用Vue 2.x语法
- 每个示例文件都包含核心概念、代码示例和关键点
- 请务必参考示例文件中的最佳实践和通用模式
- Avue基于Vue和Element UI构建
必要时参考
api/
目录中的API文档:
- ```
api/global-api.md
```
  - 全局API参考
- ```
api/components.md
```
  - 组件API参考

使用
templates/
目录中的模板:

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

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

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

See examples and API files → https://avuejs.com

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

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:

Identify the API you need help with
Load the corresponding API file from the
```
api/
```
directory
Find the API signature, parameters, return type, and examples
Reference the linked example files for detailed usage patterns
All API files include links to relevant example files in the
```
examples/
```
directory

组件属性与API
组件事件与方法
组件配置

使用API参考的方法:

确定需要帮助的API
从
```
api/
```
目录中加载对应的API文件
查找API签名、参数、返回类型和示例
参考关联的示例文件了解详细使用模式
所有API文件都包含指向
```
examples/
```
目录中相关示例文件的链接

Best Practices

最佳实践

Install Avue: Install @smallwei/avue package
Import styles: Import Avue CSS styles
Use Vue.use(): Register Avue with Vue.use(Avue)
Data-driven: Use data-driven approach for forms and tables
Configuration: Configure forms and tables via option objects
Global API: Use Avue global APIs for common operations
Internationalization: Configure i18n for multi-language support
Plugins: Use Avue plugins for extended functionality
Component composition: Compose components for complex UIs
Performance: Optimize for performance with large datasets

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

Resources

资源

Official Website: https://avuejs.com/
GitHub Repository: https://github.com/avue/avue

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

Keywords

关键词

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

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

avue

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

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

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

Examples and Templates

示例与模板

API Reference

API参考

Global API (
`api/global-api.md`
)

全局API (
`api/global-api.md`
)

Components API (
`api/components.md`
)

组件API (
`api/components.md`
)

Best Practices

最佳实践

Resources

资源

Keywords

关键词

avue

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

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

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

Examples and Templates

示例与模板

API Reference

API参考

Global API (api/global-api.md)

全局API (api/global-api.md)

Components API (api/components.md)

组件API (api/components.md)

Best Practices

最佳实践

Resources

资源

Keywords

关键词

Global API (
`api/global-api.md`
)

全局API (
`api/global-api.md`
)

Components API (
`api/components.md`
)

组件API (
`api/components.md`
)