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