English | 简体中文

 

🚀 Element-Plus-X

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

📢 快速链接

资源类型	链接
文档	📖 开发文档
在线演示	👁️ 在线预览
代码仓库	🐙 GitHub
NPM 包	📦 npm
问题反馈	🐛 提交 Bug

🛠️ 核心特性

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

🔎 安装

# NPM
npm install vue-element-plus-x

# PNPM（推荐）
pnpm install vue-element-plus-x

# Yarn
yarn install vue-element-plus-x

📚 使用案例

1. 按需引入

<script>
import { BubbleList, Sender } from 'vue-element-plus-x'
const list = [
  {
    content: 'Hello, Element Plus X',
    role: 'user',
  },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; height: 230px; justify-content: space-between;">
    <BubbleList :list="list" />
    <Sender />
  </div>
</template>

2. 全局引入

// 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')

🌟 已实现组件

组件名	描述	文档链接
Typewriter	打字动画组件	📄 文档
Bubble	气泡消息组件	📄 文档
BubbleList	气泡消息列表	📄 文档
Sender	智能输入框（含语音交互）	📄 文档

🤝 参与贡献

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

我们欢迎：

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

👥 社区支持

加入微信交流群，获取最新动态和技术支持