English-README.md

   

 

English | 简体中文

 

🚀 Element-Plus-X

An out-of-the-box enterprise-level AI component library (based on Vue 3 + Element-Plus)

📢 Quick Links

Resource Type	Link
Documentation	📖 Development Documentation
Online Demo	👁️ Online Preview
Code Repository	🐙 GitHub
NPM Package	📦 npm
Issue Feedback	🐛 Submit a Bug

🛠️ Core Features

• ✨ Enterprise-level AI Components: Pre-built scenario-based components such as chatbots and voice interaction.
• 🚀 Zero-configuration Integration: Based on the Element-Plus design system, ready to use right out of the box.
• 📦 On-demand Loading: Provides Tree Shaking optimization.

🔎 Installation

# NPM
npm install vue-element-plus-x

# PNPM (Recommended)
pnpm install vue-element-plus-x

# Yarn
yarn install vue-element-plus-x

📚 Usage Examples

1. On-demand Import

<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. Global Import

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

const app = createApp(App)
// Globally import using app.use()
app.use(ElementPlusX)
app.mount('#app')

🌟 Implemented Components

Component Name	Description	Documentation Link
Typewriter	Typewriter animation component	📄 Documentation
Bubble	Bubble message component	📄 Documentation
BubbleList	Bubble message list	📄 Documentation
Sender	Intelligent input box (with voice interaction)	📄 Documentation

🤝 Contribute

1. Fork the repository → 2. Create a Feature branch → 3. Submit a Pull Request

We welcome:

• 🐛 Bug fixes
• 💡 Proposals for new features
• 📝 Documentation improvements
• 🎨 Style optimizations

👥 Community Support

Join the WeChat communication group to get the latest news and technical support