Element Plus Vue3 使用指南：安装、配置、组件详解与问题排查

element-plus-vue3 by teachingai/full-stack-skills

841 周安装量

205 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/teachingai/full-stack-skills --skill element-plus-vue3

开发 JavaScript 框架

🇨🇳中文介绍

何时使用此技能

当用户想要进行以下操作时，请使用此技能：

在 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 相关问题时：

从用户的请求中识别主题：

 * Installation/安装 → `examples/guide/installation.md`

 * Quick Start/快速开始 → `examples/guide/quick-start.md`
 * Design/设计 → `examples/guide/design.md`
 * Components/组件 → `examples/components/`
 * API/API 文档 → `api/`

2. 从 examples/ 目录加载相应的示例文件：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

1. 理解 Element Plus

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

Vue 3 支持：专为 Vue 3 构建，使用 Composition API
设计系统：遵循 Element Design 语言
丰富的组件：60+ 组件，适用于各种用例
主题定制：支持主题定制
i18n：国际化支持
TypeScript：完整的 TypeScript 支持

npm install element-plus

yarn add element-plus

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'

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

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

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

此技能包含详细的示例，其组织结构与官方文档结构相匹配。所有示例都在 examples/ 目录中（参见上面的映射）。

从用户的请求中识别主题
根据上面的映射加载相应的示例文件
遵循该文件中的说明、语法和最佳实践
根据您的具体用例调整代码示例

参考 templates/ 目录中的模板以获取常见脚手架
根据您的具体需求和编码风格调整模板

详细的 API 文档可在 api/ 目录中找到，其组织结构与官方 Element Plus API 文档结构相匹配：

组件 API (`api/component-api.md`)

组件 props 和事件
组件方法
组件插槽

Props 和事件 (`api/props-and-events.md`)

常用 props
常用事件
事件处理

全局配置 (`api/global-config.md`)

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

使用 API 参考：

确定您需要帮助的 API
从 api/ 目录加载相应的 API 文件
查找 API 签名、参数、返回类型和示例
参考链接的示例文件以获取详细的使用模式
所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

使用按需导入：仅导入您需要的组件以减少打包体积
使用 Composition API：优先使用 Composition API 以获得更好的代码组织
正确处理事件：为组件交互使用适当的事件处理器
定制主题：使用主题变量进行定制
遵循设计规范：遵循 Element Design 规范
使用 TypeScript：利用 TypeScript 获得更好的类型安全性

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

🇺🇸English

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

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

3. 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

4. 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

5. 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

1. Understanding 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

2. Installation

Using npm :

npm install element-plus

Using yarn :

yarn add element-plus

Using pnpm :

pnpm add element-plus

3. Basic Setup

Full Import :

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 :

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

API Reference

Detailed API documentation is available in the api/ directory, organized to match the official Element Plus API documentation structure:

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

Component props and events
Component methods
Component slots

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

Common props
Common events
Event handling

Global Configuration (`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

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

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

Keywords

Weekly Installs

841

Repository

teachingai/full…k-skills

GitHub Stars

205

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode603

codex579

gemini-cli569

github-copilot551

cursor528

kimi-cli499

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

102,200 周安装

Element Plus Vue3 使用指南：安装、配置、组件详解与问题排查

🇨🇳中文介绍

何时使用此技能

如何使用此技能

相关 Skills

1. 理解 Element Plus

2. 安装

3. 基本设置

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

示例和模板

API 参考

组件 API (`api/component-api.md`)

Props 和事件 (`api/props-and-events.md`)

全局配置 (`api/global-config.md`)

最佳实践

资源

关键词

🇺🇸English

When to use this skill

How to use this skill

1. Understanding Element Plus

2. Installation

3. Basic Setup

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

Examples and Templates

API Reference

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

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

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

Best Practices

Resources

Keywords

最新 Skills

Element Plus Vue3 使用指南：安装、配置、组件详解与问题排查

🇨🇳中文介绍

何时使用此技能

如何使用此技能

相关 Skills

1. 理解 Element Plus

2. 安装

3. 基本设置

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

示例和模板

API 参考

组件 API (api/component-api.md)

Props 和事件 (api/props-and-events.md)

全局配置 (api/global-config.md)

最佳实践

资源

关键词

🇺🇸English

When to use this skill

How to use this skill

1. Understanding Element Plus

2. Installation

3. Basic Setup

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

Examples and Templates

API Reference

Component API (api/component-api.md)

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

Global Configuration (api/global-config.md)

Best Practices

Resources

Keywords

最新 Skills

组件 API (`api/component-api.md`)

Props 和事件 (`api/props-and-events.md`)

全局配置 (`api/global-config.md`)

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

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

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