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 guideexamples/guide/quick-start.md - Quick start guideexamples/guide/design.md - Design guidelinesexamples/guide/i18n.md - Internationalizationexamples/guide/theme.md - Theme customizationexamples/guide/global-config.md - Global configuration
Components (็ปไปถ):
examples/components/overview.md - Components overviewexamples/components/button.md - Button componentexamples/components/input.md - Input componentexamples/components/form.md - Form componentexamples/components/table.md - Table componentexamples/components/card.md - Card componentexamples/components/dialog.md - Dialog componentexamples/components/message.md - Message componentexamples/components/notification.md - Notification componentexamples/components/menu.md - Menu componentexamples/components/tabs.md - Tabs componentexamples/components/date-picker.md - DatePicker componentexamples/components/select.md - Select componentexamples/components/switch.md - Switch componentexamples/components/checkbox.md - Checkbox componentexamples/components/radio.md - Radio componentexamples/components/upload.md - Upload componentexamples/components/pagination.md - Pagination componentexamples/components/tree.md - Tree componentexamples/components/tree-select.md - TreeSelect componentexamples/components/transfer.md - Transfer componentexamples/components/descriptions.md - Descriptions componentexamples/components/avatar.md - Avatar componentexamples/components/badge.md - Badge componentexamples/components/tag.md - Tag componentexamples/components/empty.md - Empty componentexamples/components/loading.md - Loading componentexamples/components/popover.md - Popover componentexamples/components/tooltip.md - Tooltip componentexamples/components/dropdown.md - Dropdown componentexamples/components/drawer.md - Drawer componentexamples/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 referenceapi/props-and-events.md - Props and events referenceapi/global-config.md - Global configuration API
-
Use templates from the templates/ directory:
templates/installation.md - Installation templatestemplates/component-usage.md - Component usage templatestemplates/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 (ๆๅ):
Components (็ปไปถ):
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
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
