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(Avue)注册Avue
数据驱动：表单和表格采用数据驱动的开发方式
配置化：通过option对象配置表单和表格
全局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

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