重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
element-plus-vue3 by partme-ai/full-stack-skills
npx skills add https://github.com/partme-ai/full-stack-skills --skill element-plus-vue3当用户想要进行以下操作时,请使用此技能:
此技能的组织结构与 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 相关问题时:
* 安装/安装 → `examples/guide/installation.md`
* 快速开始/快速开始 → `examples/guide/quick-start.md`
* 设计/设计 → `examples/guide/design.md`
* 组件/组件 → `examples/components/`
* API/API 文档 → `api/`
2. 从 examples/ 目录加载相应的示例文件:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
指南 (使用指南) :
* `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` \- 项目设置模板
Element Plus 是一个 Vue 3 组件库,遵循 Element Design 原则,提供丰富的 UI 组件。
关键概念 :
使用 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'
指南 (指南) :
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/component-api.md)api/props-and-events.md)api/global-config.md)使用 API 参考的方法:
api/ 目录加载相应的 API 文件examples/ 目录中相关示例文件的链接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
每周安装量
52
仓库
GitHub 星标数
250
首次出现
2026年1月28日
安全审计
安装于
opencode47
codex46
gemini-cli45
github-copilot43
kimi-cli41
amp41
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
125,600 周安装