一、Element Plus X 是什么？

Element Plus X（简称 EPX）是一个开箱即用的企业级 AI 交互组件库。它的核心理念是：让开发者构建 AIGC 智能界面像搭积木一样简单。

1.1 与 Element Plus 的关系

1.2 核心组件一览

EPX 将 AI 对话场景拆解为 6 大类组件：

二、5 分钟快速上手

2.1 环境要求

• Node.js ≥ 18.x（推荐 ≥ 20.x）
• Vue ≥ 3.3.x
• pnpm ≥ 10.x（推荐）

2.2 安装

 # pnpm（推荐）pnpm add vue-element-plus-x# npmnpm install vue-element-plus-x --save# yarnyarn add vue-element-plus-x

2.3 按需引入 vs 全量引入

推荐：按需引入（支持 Tree Shaking）

[xss_clean]import { BubbleList, Sender } from 'vue-element-plus-x'const list = [  { content: '你好，我是 AI 助手', role: 'assistant' },  { content: '请介绍一下 Vue3', role: 'user' }][xss_clean]

全量引入（main.ts）

 import { createApp } from 'vue'import ElementPlusX from 'vue-element-plus-x'import App from './App.vue'const app = createApp(App)app.use(ElementPlusX)app.mount('#app')

三、生态与模板项目

EPX 不只是一个组件库，它有一整套生态系统：

4.1 官方生态

四、实际项目案例

假设你要做一个「AI 代码助手」界面，核心代码只需要：

              [xss_clean]import { ref } from 'vue'import { BubbleList, Sender, useXStream } from 'vue-element-plus-x'const messages = ref([  { role: 'assistant', content: '你好！我是你的代码助手，有什么可以帮你？' }])const { data, loading, start, stop } = useXStream({  url: '/api/code-assistant'})async function handleSend(userMessage: string) {  // 1. 添加用户消息  messages.value.push({ role: 'user', content: userMessage })    // 2. 添加 AI 占位消息  messages.value.push({ role: 'assistant', content: '', loading: true })    // 3. 启动流式请求  await start({ body: { message: userMessage } })    // 4. 更新最后一条消息  const lastMsg = messages.value[messages.value.length - 1]  lastMsg.loading = false  lastMsg.content = data.value}[xss_clean]

效果：一个支持打字效果、Markdown 渲染、流式输出、停止生成的完整 AI 对话界面，代码不到 50 行。

五、总结：什么时候用 Element Plus X？

项目信息

• 官方文档：https://element-plus-x.com/zh/

• GitHub 仓库：https://github.com/HeJiaYue520/Element-Plus-X