element-plus-vue3

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:

Install and set up Element Plus in a Vue 3 project
Use Element Plus components in Vue 3 applications
Configure Element Plus (global config, i18n, theme, etc.)
Use form components (Button, Input, Form, etc.)
Use data display components (Table, Card, etc.)
Use feedback components (Message, Notification, Dialog, etc.)
Use navigation components (Menu, Tabs, etc.)
Customize component styles and themes
Handle component events
Understand Element Plus API and methods
Troubleshoot Element Plus issues

当用户有以下需求时，即可使用本技能：

在Vue 3项目中安装和配置Element Plus
在Vue 3应用中使用Element Plus组件
配置Element Plus（全局配置、国际化、主题等）
使用表单类组件（Button、Input、Form等）
使用数据展示类组件（Table、Card等）
使用反馈类组件（Message、Notification、Dialog等）
使用导航类组件（Menu、Tabs等）
自定义组件样式和主题
处理组件事件
了解Element Plus的API与方法
排查Element Plus相关问题

How to use this skill

如何使用本技能

This skill is organized to match the Element Plus official documentation structure (https://element-plus.org/zh-CN/, https://element-plus.org/en-US/guide/design, https://element-plus.org/en-US/component/overview). When working with Element Plus:

Identify the topic from the user's request:
- Installation/安装 →
```
examples/guide/installation.md
```
- Quick Start/快速开始 →
```
examples/guide/quick-start.md
```
- Design/设计 →
```
examples/guide/design.md
```
- Components/组件 →
```
examples/components/
```
- API/API 文档 →
```
api/
```

Load the appropriate example file from the

examples/

directory:

Guide (使用指南):

```
examples/guide/installation.md
```
- Installation guide
```
examples/guide/quick-start.md
```
- Quick start guide
```
examples/guide/design.md
```
- Design guidelines
```
examples/guide/i18n.md
```
- Internationalization
```
examples/guide/theme.md
```
- Theme customization
```
examples/guide/global-config.md
```
- Global configuration

Components (组件):

```
examples/components/overview.md
```
- Components overview
```
examples/components/button.md
```
- Button component
```
examples/components/input.md
```
- Input component
```
examples/components/form.md
```
- Form component
```
examples/components/table.md
```
- Table component
```
examples/components/card.md
```
- Card component
```
examples/components/dialog.md
```
- Dialog component
```
examples/components/message.md
```
- Message component
```
examples/components/notification.md
```
- Notification component
```
examples/components/menu.md
```
- Menu component
```
examples/components/tabs.md
```
- Tabs component
```
examples/components/date-picker.md
```
- DatePicker component
```
examples/components/select.md
```
- Select component
```
examples/components/switch.md
```
- Switch component
```
examples/components/checkbox.md
```
- Checkbox component
```
examples/components/radio.md
```
- Radio component
```
examples/components/upload.md
```
- Upload component
```
examples/components/pagination.md
```
- Pagination component
```
examples/components/tree.md
```
- Tree component
```
examples/components/tree-select.md
```
- TreeSelect component
```
examples/components/transfer.md
```
- Transfer component
```
examples/components/descriptions.md
```
- Descriptions component
```
examples/components/avatar.md
```
- Avatar component
```
examples/components/badge.md
```
- Badge component
```
examples/components/tag.md
```
- Tag component
```
examples/components/empty.md
```
- Empty component
```
examples/components/loading.md
```
- Loading component
```
examples/components/popover.md
```
- Popover component
```
examples/components/tooltip.md
```
- Tooltip component
```
examples/components/dropdown.md
```
- Dropdown component
```
examples/components/drawer.md
```
- Drawer component
```
examples/components/popconfirm.md
```
- Popconfirm component

Follow the specific instructions in that example file for syntax, structure, and best practices

Important Notes:
- Element Plus is for Vue 3 only
- Components use Vue 3 Composition API
- Examples include both Options API and Composition API
- Each example file includes key concepts, code examples, and key points
Reference API documentation in the
```
api/
```
directory when needed:
- ```
api/component-api.md
```
  - Component API reference
- ```
api/props-and-events.md
```
  - Props and events reference
- ```
api/global-config.md
```
  - Global configuration API
Use templates from the
```
templates/
```
directory:
- ```
templates/installation.md
```
  - Installation templates
- ```
templates/component-usage.md
```
  - Component usage templates
- ```
templates/project-setup.md
```
  - Project setup templates

本技能的结构与Element Plus官方文档结构一致（https://element-plus.org/zh-CN/、https://element-plus.org/en-US/guide/design、https://element-plus.org/en-US/component/overview）。使用Element Plus时，请遵循以下步骤：

从用户的需求中确定主题：

安装 →
```
examples/guide/installation.md
```
快速开始 →
```
examples/guide/quick-start.md
```
设计 →
```
examples/guide/design.md
```
组件 →
```
examples/components/
```
API文档 →
```
api/
```

从
examples/
目录加载对应的示例文件：

使用指南：

```
examples/guide/installation.md
```
- 安装指南
```
examples/guide/quick-start.md
```
- 快速开始指南
```
examples/guide/design.md
```
- 设计规范
```
examples/guide/i18n.md
```
- 国际化指南
```
examples/guide/theme.md
```
- 主题定制指南
```
examples/guide/global-config.md
```
- 全局配置指南

组件：

```
examples/components/overview.md
```
- 组件总览
```
examples/components/button.md
```
- Button组件指南
```
examples/components/input.md
```
- Input组件指南
```
examples/components/form.md
```
- Form组件指南
```
examples/components/table.md
```
- Table组件指南
```
examples/components/card.md
```
- Card组件指南
```
examples/components/dialog.md
```
- Dialog组件指南
```
examples/components/message.md
```
- Message组件指南
```
examples/components/notification.md
```
- Notification组件指南
```
examples/components/menu.md
```
- Menu组件指南
```
examples/components/tabs.md
```
- Tabs组件指南
```
examples/components/date-picker.md
```
- DatePicker组件指南
```
examples/components/select.md
```
- Select组件指南
```
examples/components/switch.md
```
- Switch组件指南
```
examples/components/checkbox.md
```
- Checkbox组件指南
```
examples/components/radio.md
```
- Radio组件指南
```
examples/components/upload.md
```
- Upload组件指南
```
examples/components/pagination.md
```
- Pagination组件指南
```
examples/components/tree.md
```
- Tree组件指南
```
examples/components/tree-select.md
```
- TreeSelect组件指南
```
examples/components/transfer.md
```
- Transfer组件指南
```
examples/components/descriptions.md
```
- Descriptions组件指南
```
examples/components/avatar.md
```
- Avatar组件指南
```
examples/components/badge.md
```
- Badge组件指南
```
examples/components/tag.md
```
- Tag组件指南
```
examples/components/empty.md
```
- Empty组件指南
```
examples/components/loading.md
```
- Loading组件指南
```
examples/components/popover.md
```
- Popover组件指南
```
examples/components/tooltip.md
```
- Tooltip组件指南
```
examples/components/dropdown.md
```
- Dropdown组件指南
```
examples/components/drawer.md
```
- Drawer组件指南
```
examples/components/popconfirm.md
```
- Popconfirm组件指南

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

重要提示：
- Element Plus仅适用于Vue 3
- 组件基于Vue 3 Composition API开发
- 示例同时包含Options API和Composition API写法
- 每个示例文件均包含核心概念、代码示例及重点说明
必要时参考
api/
目录下的API文档：
- ```
api/component-api.md
```
  - 组件API参考
- ```
api/props-and-events.md
```
  - 属性与事件参考
- ```
api/global-config.md
```
  - 全局配置API

使用
templates/
目录下的模板：

```
templates/installation.md
```
- 安装模板
```
templates/component-usage.md
```
- 组件使用模板
```
templates/project-setup.md
```
- 项目搭建模板

1. Understanding Element Plus

1. 了解Element Plus

Element Plus is a Vue 3 component library that provides a rich set of UI components following Element Design principles.

Key Concepts:

Vue 3 Support: Built for Vue 3 with Composition API
Design System: Follows Element Design language
Rich Components: 60+ components for various use cases
Theme Customization: Support for theme customization
i18n: Internationalization support
TypeScript: Full TypeScript support

Element Plus是一款为Vue 3打造的组件库，遵循Element设计原则，提供丰富的UI组件。

核心特性：

Vue 3支持：基于Vue 3 Composition API构建
设计系统：遵循Element设计语言
丰富组件：提供60+适用于各类场景的组件
主题定制：支持主题自定义
国际化：提供国际化支持
TypeScript：全面支持TypeScript

2. Installation

2. 安装

Using npm:

bash

npm install element-plus

Using yarn:

bash

yarn add element-plus

Using pnpm:

bash

pnpm add element-plus

使用npm安装：

bash

npm install element-plus

使用yarn安装：

bash

yarn add element-plus

使用pnpm安装：

bash

pnpm add element-plus

3. Basic Setup

3. 基础配置

Full Import:

javascript

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

On-Demand Import:

javascript

import { ElButton, ElInput } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/input/style/css'

完整引入：

javascript

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

按需引入：

javascript

import { ElButton, ElInput } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/input/style/css'

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

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

Guide (指南):

See guide files in
```
examples/guide/
```
or
```
examples/getting-started/
```
→ https://element-plus.org/en-US/guide/design

Components (组件):

See component files in
```
examples/components/
```
→ https://element-plus.org/en-US/component/overview

指南：

查看
```
examples/guide/
```
或
```
examples/getting-started/
```
下的指南文件 → https://element-plus.org/en-US/guide/design

组件：

查看
```
examples/components/
```
下的组件文件 → https://element-plus.org/en-US/component/overview

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 Element Plus API documentation structure:

详细的API文档位于

api/

目录中，结构与Element Plus官方API文档一致：

Component API (

api/component-api.md

)

组件API（

api/component-api.md

）

Component props and events
Component methods
Component slots

组件属性与事件
组件方法
组件插槽

Props and Events (

api/props-and-events.md

)

属性与事件（

api/props-and-events.md

）

Common props
Common events
Event handling

通用属性
通用事件
事件处理

Global Configuration (

api/global-config.md

)

全局配置（

api/global-config.md

）

Global configuration options
ConfigProvider usage
Theme 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

全局配置选项
ConfigProvider使用方法
主题配置

使用API参考：

确定需要查询的API内容
从
```
api/
```
目录中加载对应的API文件
查找API签名、参数、返回类型及示例
参考链接的示例文件获取详细使用方式
所有API文件均包含指向
```
examples/
```
目录中相关示例文件的链接

Best Practices

最佳实践

Use on-demand import: Import only the components you need to reduce bundle size
Use Composition API: Prefer Composition API for better code organization
Handle events properly: Use proper event handlers for component interactions
Customize theme: Use theme variables for customization
Follow design specs: Follow Element Design specifications
Use TypeScript: Leverage TypeScript for better type safety

使用按需引入：仅引入所需组件，以减小打包体积
使用Composition API：优先使用Composition API，提升代码组织性
正确处理事件：为组件交互使用合适的事件处理器
自定义主题：使用主题变量进行定制
遵循设计规范：遵循Element设计规范
使用TypeScript：借助TypeScript提升类型安全性

Resources

资源

Official Documentation: https://element-plus.org/zh-CN/
English Documentation: https://element-plus.org/en-US/
Design Guide: https://element-plus.org/en-US/guide/design
Component Overview: https://element-plus.org/en-US/component/overview
GitHub Repository: https://github.com/element-plus/element-plus

官方中文文档：https://element-plus.org/zh-CN/
官方英文文档：https://element-plus.org/en-US/
设计指南：https://element-plus.org/en-US/guide/design
组件总览：https://element-plus.org/en-US/component/overview
GitHub仓库：https://github.com/element-plus/element-plus

Keywords

关键词

Element Plus, element-plus, Vue 3, Vue3, UI components, component library, 组件库, 按钮, 表单, 表格, 弹窗, 消息, 通知, 菜单, 标签页, 日期选择器, 选择器, 开关, 复选框, 单选框, 上传, 分页, 树形控件, 穿梭框, 描述列表, 头像, 徽标, 标签, 空状态, 加载, 弹出框, 提示, 下拉菜单, 抽屉, 气泡确认框, Button, Form, Table, Dialog, Message, Notification, Menu, Tabs, DatePicker, Select, Switch, Checkbox, Radio, Upload, Pagination, Tree, Transfer, Descriptions, Avatar, Badge, Tag, Empty, Loading, Popover, Tooltip, Dropdown, Drawer, Popconfirm

Element Plus, element-plus, Vue 3, Vue3, UI组件, 组件库, 按钮, 表单, 表格, 弹窗, 消息, 通知, 菜单, 标签页, 日期选择器, 选择器, 开关, 复选框, 单选框, 上传, 分页, 树形控件, 穿梭框, 描述列表, 头像, 徽标, 标签, 空状态, 加载, 弹出框, 提示, 下拉菜单, 抽屉, 气泡确认框, Button, Form, Table, Dialog, Message, Notification, Menu, Tabs, DatePicker, Select, Switch, Checkbox, Radio, Upload, Pagination, Tree, Transfer, Descriptions, Avatar, Badge, Tag, Empty, Loading, Popover, Tooltip, Dropdown, Drawer, Popconfirm

element-plus-vue3

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

1. Understanding Element Plus

1. 了解Element Plus

2. Installation

2. 安装

3. Basic Setup

3. 基础配置

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

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

Examples and Templates

示例与模板

API Reference

API参考

Component API (
`api/component-api.md`
)

组件API（
`api/component-api.md`
）

Props and Events (
`api/props-and-events.md`
)

属性与事件（
`api/props-and-events.md`
）

Global Configuration (
`api/global-config.md`
)

全局配置（
`api/global-config.md`
）

Best Practices

最佳实践

Resources

资源

Keywords

关键词

element-plus-vue3

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

1. Understanding Element Plus

1. 了解Element Plus

2. Installation

2. 安装

3. Basic Setup

3. 基础配置

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

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

Examples and Templates

示例与模板

API Reference

API参考

Component API (api/component-api.md)

组件API（api/component-api.md）

Props and Events (api/props-and-events.md)

属性与事件（api/props-and-events.md）

Global Configuration (api/global-config.md)

全局配置（api/global-config.md）

Best Practices

最佳实践

Resources

资源

Keywords

关键词

Component API (
`api/component-api.md`
)

组件API（
`api/component-api.md`
）

Props and Events (
`api/props-and-events.md`
)

属性与事件（
`api/props-and-events.md`
）

Global Configuration (
`api/global-config.md`
)

全局配置（
`api/global-config.md`
）