English | 简体中文

Advanced Element UI

**Configuration-Driven** Advanced component library built on Vue 3 and Element Plus

📱 Live Demo · Quick Start · Changelog · Documents

---

You can now access the Technical Documents powered by ZRead and click the Ask AI button to quickly retrieve knowledge about this project!

---

Introduction

Advanced Element UI is a configuration-driven advanced component library built on Vue 3 and Element Plus, designed to solve the pain points of repetitive coding in enterprise applications.

🎯 What Problems Does It Solve?

Traditional Development Pain Points:

• ❌ Writing hundreds of lines of template code for complex forms
• ❌ Repetitive table column definitions and data formatting logic
• ❌ Scattered validation rules and business logic
• ❌ Difficult to maintain dynamic forms and editable tables
• ❌ Lack of unified internationalization solution

Our Solution:

• ✅ Configuration-Driven: Define complex forms and tables with simple JSON configurations
• ✅ Complete Decoupling: Separate UI, data, and business logic for better maintainability
• ✅ Rich Features: Built-in data linkage, dynamic properties, inline editing, and more
• ✅ Type Safety: Full TypeScript support with intelligent code completion
• ✅ Extensibility: Register custom components while maintaining Element Plus style

💡 Core Philosophy

We believe that 80% of middle and back-end pages follow similar patterns. Instead of writing repetitive code, developers should focus on business logic and data flow. Advanced Element UI transforms complex UI development into simple configuration management, reducing code by 70%+ while improving maintainability.

🚀 Quick Example

Traditional Way (100+ lines):

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="Name" prop="name">
      <el-input v-model="form.name" placeholder="Please enter name" />
    </el-form-item>
    <!-- ... 20+ similar form items -->
  </el-form>
</template>

Advanced Element UI Way (10 lines):

<template>
  <AeForm :model="form" :schemas="schemas" />
</template>

<script setup>
const schemas = [
  { field: 'name', label: 'Name', component: 'Input' },
  // ... simple configuration
]
</script>

Features

• Out of the Box: Based on Element Plus, seamlessly integrated into Vue 3 projects
• Unified Style: Secondary encapsulated components follow Element Plus style in component properties and styles
• Data Driven: All components follow the core idea of rendering driven by configuration, rejecting hard coding
• Rich Icons: Integrated with Iconify, supporting 100,000+ icon libraries
• Internationalization: Built-in i18n support for Chinese and English, easily switchable with one line of code
• Type Definitions: Complete type definitions and comments, providing a good development experience
• Free Extension: AeForm and AeTable provide registration functions, allowing you to register any component that follows Element Plus property style

---

Install

1. Make sure Vue 3 and Element Plus are installed in your project

// use npm
npm install element-plus --save

// use yarn
yarn add element-plus

// use pnpm
pnpm install element-plus

2. Install AdvancedEleUI component library

// use npm
npm install advanced-ele-ui

// use yarn
yarn add advanced-ele-ui

// use pnpm
pnpm add advanced-ele-ui

---

QuickStart

Full Import

Import all components in main.ts:

import { createApp } from 'vue'

/** Import Element Plus */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

/** Import AdvancedEleUI component library */
import AdvancedEleUI from 'advanced-ele-ui'
import 'advanced-ele-ui/dist/style.css'

import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)

/** Use English Language */
app.use(AdvancedEleUI, {
  locale: 'en-US'
})
app.mount('#app')

Internationalization (i18n)

The component library supports Chinese and English. Default is Chinese. You can set the language globally:

// Set to English
app.use(AdvancedEleUI, {
  locale: 'en-US'
})

// Or switch at runtime
import { setLocale } from 'advanced-ele-ui'
setLocale('en-US')

TypeScript Global Component Type Support

If you use TypeScript, to enable IDE recognition of globally registered components, you need to add type declarations.

Method 1: Add in tsconfig.json

{
  "compilerOptions": {
    "types": ["advanced-ele-ui/global"]
  }
}

Method 2: Add in type declaration file

Add in src/env.d.ts or src/types/global.d.ts:

/// <reference types="advanced-ele-ui/global" />

After configuration, restart your IDE, and you can use components directly in Vue files with full type hints:

<template>
  <!-- ✅ IDE can recognize components and provide intelligent hints -->
  <AeTable :columns="columns" v-model="data" />
  <AeForm :model="formModel" :schemas="schemas" />
</template>

On-Demand Import

Import only the components you need:

import { AeForm, AeTable, AeIcon, AeEditor, AeUpload, AeDialog, AeDrawer, AeTabs, AeTabPanel } from 'advanced-ele-ui'
import 'advanced-ele-ui/dist/style.css'

---

Components

• ✅ AeForm: Advanced form component: A powerful data-driven form component that supports multiple form controls, focusing on solving complex scenarios of data linkage and dynamic properties.
• ✅ AeTable: Advanced table component: A feature-rich data-driven table component that supports multiple column types and inline editing.
• ✅ AeIcon: Dynamic icon component: Based on Iconify, supporting 100,000+ icon libraries for dynamic rendering. Supports custom icon collections.
• ✅ AeEditor: Rich text component: A rich text component based on AiEditor with AI assistant functionality.
• ✅ AeUpload: Upload component: A feature-rich native upload component. The component itself does not control uploading, leaving it entirely to you to implement upload requests. The component focuses on data and styles.
• ✅ AeDialog: Dialog component: A feature-rich dialog component.
• ✅ AeDrawer: Drawer component: A feature-rich drawer component.
• ✅ AeTabs: Tabs component: A feature-rich tabs component.
• ✅ AeText: Enhanced text component: enhances text display; supports leading icons, bullet points, and quote blocks; supports highlighted text matching and interaction
• ✅ AeComboInput: Composite input component: atomically encapsulates multi-component combinations for composite input scenarios such as "email account"/"real estate certificate number".

---

Roadmap

💡 If you have good ideas or suggestions, feel free to raise them in Issues!

---

Documents and Resources

• Live Demo - View live examples of all components
• Documents - Created by ZRead.ai
• NPM Package - View release versions and download statistics
• Changelog - Learn about version updates
• Icon Component Guide - Custom icon collections and usage
• Issue Feedback - Submit bugs or feature suggestions

---

Contribution

Issues and Pull Requests are welcome!

1. Fork this repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Submit a Pull Request

---

License

This project is open source under the MIT license.

---

Thanks For

• Vue.js - The Progressive JavaScript Framework
• Element Plus - Vue 3 based component library
• Iconify - Unified icon framework
• VueUse - Collection of Vue Composition Utilities
• AiEditor - Intelligent text editor
• ZRead.ai - Github Docs Auto Generation

---

Contact

• Author: vvhr
• Email: vvhr_anen@163.com
• GitHub: @vvhr

---

_{Built with ❤️ by vvhr}