用途
本技能用于在 Vue 3 项目中使用 Element Plus 组件库时提供指导。当用户需要安装和设置 Element Plus、在 Vue 3 应用中使用其组件、配置全局选项（全局配置、国际化、主题等）、使用表单组件（Button、Input、Form 等）、数据展示组件（Table、Card 等）、反馈组件（Message、Notification、Dialog 等）、导航组件（Menu、Tabs 等）、自定义组件样式与主题、处理组件事件、理解 Element Plus API 与方法，或排查 Element Plus 问题时，均可使用本技能。
主要能力
Element Plus 是面向 Vue 3 的组件库，遵循 Element Design 设计原则，提供丰富的 UI 组件。其关键特性包括：
- Vue 3 支持：基于 Vue 3 与 Composition API 构建。
- 设计系统：遵循 Element Design 设计语言。
- 丰富组件：提供 60 多个组件，覆盖多种使用场景。
- 主题定制：支持主题自定义。
- 国际化：支持 i18n。
- TypeScript：完整支持 TypeScript。
本技能按 Element Plus 官方文档结构组织，覆盖使用指南（安装、快速开始、设计、国际化、主题、全局配置）与组件（Button、Input、Form、Table、Card、Dialog、Message、Notification、Menu、Tabs、DatePicker、Select、Switch、Checkbox、Radio、Upload、Pagination、Tree、TreeSelect、Transfer、Descriptions、Avatar、Badge、Tag、Empty、Loading、Popover、Tooltip、Dropdown、Drawer、Popconfirm 等），并提供 API 参考（组件 API、Props 与事件、全局配置）。
使用方式
安装命令：
使用 npm：
npm install element-plus
使用 yarn：
yarn add element-plus
使用 pnpm：
pnpm add element-plus
基本设置——完整引入：
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'
使用本技能时，先根据用户请求识别主题（安装/安装、快速开始/快速开始、设计/设计、组件/组件、API/API 文档），再从 examples/ 目录加载对应的示例文件，按其中的语法、结构与最佳实践操作。需要时可参考 api/ 目录中的 API 文档，并使用 templates/ 目录中的模板（安装模板、组件使用模板、项目设置模板）。
适用场景
- 在 Vue 3 项目中安装与配置 Element Plus。
- 使用表单、数据展示、反馈、导航等各类组件。
- 自定义组件样式与主题、配置国际化与全局选项。
- 处理组件事件、查阅组件 API 与方法。
- 排查 Element Plus 相关问题。
限制与注意事项
- Element Plus 仅适用于 Vue 3。
- 组件使用 Vue 3 Composition API。
- 示例同时包含 Options API 与 Composition API。
- 每个示例文件包含关键概念、代码示例与要点。
- 建议使用按需引入以减少打包体积，优先使用 Composition API，正确使用事件处理器，通过主题变量进行定制，遵循 Element Design 规范，并利用 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