element-plus-vue3

适用场景

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

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

如何使用此技能

此技能的组织结构与 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 时：

1. 根据用户的请求确定主题：

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

2. 从 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 组件

3. 遵循该示例文件中的具体说明，了解语法、结构和最佳实践

   重要说明：

   • Element Plus 仅适用于 Vue 3
   • 组件使用 Vue 3 Composition API
   • 示例包含 Options API 和 Composition API
   • 每个示例文件都包含关键概念、代码示例和要点

4. 需要时参考 api/ 目录中的 API 文档：

   • api/component-api.md - 组件 API 参考
   • api/props-and-events.md - Props 和事件参考
   • api/global-config.md - 全局配置 API

5. 使用 templates/ 目录中的模板：

   • templates/installation.md - 安装模板
   • templates/component-usage.md - 组件用法模板
   • templates/project-setup.md - 项目设置模板

1. 了解 Element Plus

Element Plus 是一个 Vue 3 组件库，提供丰富的 UI 组件，并遵循 Element Design 原则。

核心概念：

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

2. 安装

使用 npm：

npm install element-plus

使用 yarn：

yarn add element-plus

使用 pnpm：

pnpm add element-plus

3. 基本设置

完整导入：

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')

按需导入：

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

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

指南（Guide）：

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

组件（Components）：

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

示例和模板

此技能包含详细示例，其组织结构与官方文档一致。所有示例均位于 examples/ 目录中（参见上方映射）。

使用示例：

• 根据用户请求确定主题
• 从上方映射中加载相应的示例文件
• 遵循该文件中的说明、语法和最佳实践
• 根据具体使用场景调整代码示例

使用模板：

• 参考 templates/ 目录中的模板，了解常见脚手架
• 根据具体需求和编码风格调整模板

API 参考

详细的 API 文档位于 api/ 目录中，其组织结构与官方 Element Plus API 文档一致：

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

• 组件属性和事件
• 组件方法
• 组件插槽

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

• 常用属性
• 常用事件
• 事件处理

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

• 全局配置选项
• ConfigProvider 用法
• 主题配置

使用 API 参考：

1. 确定需要帮助的 API
2. 从 api/ 目录加载相应的 API 文件
3. 查找 API 签名、参数、返回类型和示例
4. 参考链接的示例文件，了解详细用法
5. 所有 API 文件均包含指向 examples/ 目录中相关示例文件的链接

最佳实践

1. 按需导入：仅导入所需组件，以减小打包体积
2. 使用 Composition API：优先使用 Composition API，以便更好地组织代码
3. 正确处理事件：为组件交互使用恰当的事件处理程序
4. 自定义主题：使用主题变量进行自定义
5. 遵循设计规范：遵循 Element Design 规范
6. 使用 TypeScript：利用 TypeScript 提高类型安全性

资源

• 官方文档：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

关键词

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