🚀 Element-Plus-X

开箱即用的企业级 AI 组件库（基于 Vue 3 + Element-Plus）

📢 快速链接

| 资源类型 |

|
| ----------------- | -------------------------------------------------------------------------------------------------------------------------- |
| 文档 | 📖 开发文档 |
| 在线演示 | 👁️ 在线预览 |
| 代码仓库 | 🐙 GitHub
🚠 Gitee |
| NPM 包 | 📦 npm |
| 问题反馈 | 🐛 提交 Bug |
| 交流讨论 | 🐒 交流群 |
| 模版项目 预览 | 👀 在线预览 |
| 模版项目 源码 | 🐙 GitHub
🚠 Gitee |

🛠️ 核心特性

- ✨ 企业级 AI 组件：内置聊天机器人、语音交互等场景化组件
- 🚀 零配置集成：基于 Element-Plus 设计体系，开箱即用
- 📦 按需加载：提供 Tree Shaking 优化

📦 安装

``bash


NPM

npm install vue-element-plus-x

PNPM（推荐）

pnpm install vue-element-plus-x

Yarn

yarn install vue-element-plus-x

`

📚 使用案例

1. 按需引入

`vue



`

2. 全局引入

`ts
// main.ts
import { createApp } from 'vue';
import ElementPlusX from 'vue-element-plus-x';
import App from './App.vue';

const app = createApp(App);
// 使用 app.use() 全局引入
app.use(ElementPlusX);
app.mount('#app');
`

3. CDN 引入

`html



`

🌟 已实现 组件 和 Hooks

| 组件名 | 描述 | 文档链接 |
| -------------------- | -------------------------------------- | ------------------------------------------------------------------ |
| Typewriter | 打字动画组件 | 📄 文档 |
| Bubble | 气泡消息组件 （拓展） | 📄 文档 |
| BubbleList | 气泡消息列表 （拓展） | 📄 文档 |
| Conversations | 会话管理组件 （拓展） | 📄 文档 |
| Welcome | 欢迎组件 | 📄 文档 |
| Prompts | 提示集组件 | 📄 文档 |
| FilesCard | 文件卡片组件 | 📄 文档 |
| Attachments | 上传附件组件 | 📄 文档 |
| Sender | 智能输入框（含语音交互、内置指令操作） | 📄 文档 |
| MentionSender | 指令输入框 （提及列表） | 📄 文档 |
| Thinking | 思考中组件 （拓展） | 📄 文档 |
| ThoughtChain | 思考链组件 | 📄 文档 |
| useRecord | 浏览器内置语音识别 API Hooks | 📄 文档 |
| useXStream | 流模式接口 Hooks | 📄 文档 |
| useSend & XRequest` | 流模式 hooks 的拆分 （拓展） | 📄 文档 |

🎯开发计划 (每周更新)

🎀我们会在 issue 、交流群 等多方面收集大家的遇到的问题，和需求场景，制定短期和长期的开发计划，查看详情请移步👉 开发计划

🤝 参与贡献

1. Fork 仓库 → 2. 创建 Feature 分支 → 3. 提交 Pull Request

详情可以移步👉 开发指南

我们欢迎：

- 🐛 Bug 修复
- 💡 新功能提案
- 📝 文档完善
- 🎨 样式优化

👥 社区支持