Enterprise-level AI component library front-end solution 🤖
See the code
English | 简体中文
开箱即用的企业级 AI 组件库(基于 Vue 3 + Element-Plus)
| 资源类型 | 链接 |
|---|---|
| 文档 | 📖 开发文档 |
| 在线演示 | 👁️ 在线预览 |
| 代码仓库 | 🐙 GitHub 🚠 Gitee |
| NPM 包 | 📦 npm |
| 问题反馈 | 🐛 提交 Bug |
| 交流讨论 | 🐒 交流群 |
| 模版项目 预览 | 👀 在线预览 |
| 模版项目 源码 | 🐙 GitHub 🚠 Gitee |
# NPM
npm install vue-element-plus-x
# PNPM(推荐)
pnpm install vue-element-plus-x
# Yarn
yarn install vue-element-plus-x
<script setup>
import { BubbleList, XSender } 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" />
<XSender />
</div>
</template>
// 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');
<!-- 该方法 有待测试 -->
<!-- CDN 引入 -->
<script src="https://unpkg.com/vue-element-plus-x@1.3.0/dist/umd/index.js"></script>
| 组件名 | 描述 | 文档链接 |
|---|---|---|
Bubble | 气泡消息组件 (拓展) | 📄 文档 |
BubbleList | 气泡消息列表 (拓展) | 📄 文档 |
Conversations | 会话管理组件 (拓展) | 📄 文档 |
Welcome | 欢迎组件 | 📄 文档 |
Prompts | 提示集组件 | 📄 文档 |
FilesCard | 文件卡片组件 | 📄 文档 |
Attachments | 上传附件组件 | 📄 文档 |
XSender | 智能输入框(含语音交互、提及功能) | 📄 文档 |
Thinking | 思考中组件 (拓展) | 📄 文档 |
ThoughtChain | 思考链组件 | 📄 文档 |
useRecord | 浏览器内置语音识别 API Hooks | 📄 文档 |
useXStream | 流模式接口 Hooks | 📄 文档 |
useSend & XRequest | 流模式 hooks 的拆分 (拓展) | 📄 文档 |
🎀我们会在 issue 、交流群 等多方面收集大家的遇到的问题,和需求场景,制定短期和长期的开发计划,查看详情请移步👉 开发计划
详情可以移步👉 开发指南
我们欢迎:
加入微信交流群,获取最新动态和技术支持
交流群如果过期或者失效,可以添加作者 vx
我们采用语义化版本号(SemVer):MAJOR.MINOR.PATCH
-beta.0, -rc.1 等# 安装稳定版(推荐)
pnpm install vue-element-plus-x
# 安装 beta 版本
pnpm install vue-element-plus-x@beta
# 安装指定版本
pnpm install vue-element-plus-x@2.0.0-beta.0
| 渠道 | npm tag | 说明 |
|---|---|---|
| 稳定版 | latest | 生产环境推荐使用 |
| 测试版 | beta | 新功能预览,可能不稳定 |
文档中的组件可能带有以下徽标:
| 徽标 | 含义 |
|---|---|
| 🆕 新增 | 新增的组件或功能 |
| 🔄 更新 | 最近有重大更新的组件 |
| ⚠️ 废弃 | 即将废弃的组件 |
| 🔬 实验性 | 实验性功能,API 可能变化 |
packages/core/package.json 中的版本号为 X.X.X-beta.Xpnpm changeset 创建变更记录git tag vX.X.X-beta.Xgit push origin vX.X.X-beta.X@beta tagCHANGELOG.md@latest tag# 克隆仓库
git clone https://github.com/HeJiaYue520/Element-Plus-X.git
# 安装依赖
pnpm install
# 启动文档开发服务器
pnpm run dev:docs
# 启动组件开发服务器 (Storybook)
pnpm run dev:core
# 构建组件库
pnpm run build:core
Enterprise-level AI component library front-end solution 🤖
See the code
English | 简体中文
开箱即用的企业级 AI 组件库(基于 Vue 3 + Element-Plus)
| 资源类型 | 链接 |
|---|---|
| 文档 | 📖 开发文档 |
| 在线演示 | 👁️ 在线预览 |
| 代码仓库 | 🐙 GitHub 🚠 Gitee |
| NPM 包 | 📦 npm |
| 问题反馈 | 🐛 提交 Bug |
| 交流讨论 | 🐒 交流群 |
| 模版项目 预览 | 👀 在线预览 |
| 模版项目 源码 | 🐙 GitHub 🚠 Gitee |
# NPM
npm install vue-element-plus-x
# PNPM(推荐)
pnpm install vue-element-plus-x
# Yarn
yarn install vue-element-plus-x
<script setup>
import { BubbleList, XSender } 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" />
<XSender />
</div>
</template>
// 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');
<!-- 该方法 有待测试 -->
<!-- CDN 引入 -->
<script src="https://unpkg.com/vue-element-plus-x@1.3.0/dist/umd/index.js"></script>
| 组件名 | 描述 | 文档链接 |
|---|---|---|
Bubble | 气泡消息组件 (拓展) | 📄 文档 |
BubbleList | 气泡消息列表 (拓展) | 📄 文档 |
Conversations | 会话管理组件 (拓展) | 📄 文档 |
Welcome | 欢迎组件 | 📄 文档 |
Prompts | 提示集组件 | 📄 文档 |
FilesCard | 文件卡片组件 | 📄 文档 |
Attachments | 上传附件组件 | 📄 文档 |
XSender | 智能输入框(含语音交互、提及功能) | 📄 文档 |
Thinking | 思考中组件 (拓展) | 📄 文档 |
ThoughtChain | 思考链组件 | 📄 文档 |
useRecord | 浏览器内置语音识别 API Hooks | 📄 文档 |
useXStream | 流模式接口 Hooks | 📄 文档 |
useSend & XRequest | 流模式 hooks 的拆分 (拓展) | 📄 文档 |
🎀我们会在 issue 、交流群 等多方面收集大家的遇到的问题,和需求场景,制定短期和长期的开发计划,查看详情请移步👉 开发计划
详情可以移步👉 开发指南
我们欢迎:
加入微信交流群,获取最新动态和技术支持
交流群如果过期或者失效,可以添加作者 vx
我们采用语义化版本号(SemVer):MAJOR.MINOR.PATCH
-beta.0, -rc.1 等# 安装稳定版(推荐)
pnpm install vue-element-plus-x
# 安装 beta 版本
pnpm install vue-element-plus-x@beta
# 安装指定版本
pnpm install vue-element-plus-x@2.0.0-beta.0
| 渠道 | npm tag | 说明 |
|---|---|---|
| 稳定版 | latest | 生产环境推荐使用 |
| 测试版 | beta | 新功能预览,可能不稳定 |
文档中的组件可能带有以下徽标:
| 徽标 | 含义 |
|---|---|
| 🆕 新增 | 新增的组件或功能 |
| 🔄 更新 | 最近有重大更新的组件 |
| ⚠️ 废弃 | 即将废弃的组件 |
| 🔬 实验性 | 实验性功能,API 可能变化 |
packages/core/package.json 中的版本号为 X.X.X-beta.Xpnpm changeset 创建变更记录git tag vX.X.X-beta.Xgit push origin vX.X.X-beta.X@beta tagCHANGELOG.md@latest tag# 克隆仓库
git clone https://github.com/HeJiaYue520/Element-Plus-X.git
# 安装依赖
pnpm install
# 启动文档开发服务器
pnpm run dev:docs
# 启动组件开发服务器 (Storybook)
pnpm run dev:core
# 构建组件库
pnpm run build:core