element-enhance

a component library for Vue 3 base on element-plus

Usage no npm install needed!

<script type="module">
  import elementEnhance from 'https://cdn.skypack.dev/element-enhance';
</script>

README

a component library for Vue 3 base on element-plus

Vue Version Vue Router Version Element Plus Version

开 发 文 档 | 更 新 日 志 | 常 见 问 题

📖 概述

Element Enhance 是基于 Element Plus 而开发的模板组件，提供了更高级别的抽象支持，开箱即用，更加专注于页面。

Status: Beta

This project is still under heavy development. Feel free to join us and make your first pull request.

Edit element-enhance

📢 理念

Element Plus 定义了基础的设计规范，对应也提供了大量的基础组件。但是对于中后台类应用，我们希望提供更高程度的抽象，提供更上层的设计规范，并且对应提供相应的组件使得开发者可以快速搭建出高质量的页面。

列表页应该可以用 EleLayout + EleTable 完成，编辑页应该使用 EleLayout + EleForm 完成，详情页可以用 EleLayout + EleDescriptions 完成。 一个页面在开发工程中只需要关注几个重型组件，降低心智负担，专注于更核心的业务逻辑。

✒️ 特性

该组件库的开发理念就是面向未来，如果查看源码你就会发现像是 vue 3 的 script setup 实验性功能、像是 CSSNext 的 CSS Variables。在保证大部分浏览器的兼容性的情况下，会更多的使用新特性、新功能来开发

💡 计划
  • PageContainer: 为了减少繁杂的面包屑配置和标题。
  • StatisticCard: 指标卡结合统计数值用于展示某主题的核心指标。
  • Search: 有些是时候表单要与别的组件组合使用，需要一些特殊形态的表单。
☁️ 入门

让 Element Plus 更简单, 更通用, 更流行

安装

npm install element-plus --save

npm install element-enhance --save

引入

import { createApp } from 'vue'
import App from './App.vue'
import ElementEnhance from 'element-enhance'
import 'element-enhance/lib/style.css'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)

app.use(ElementEnhance)
app.use(ElementPlus)
app.mount('#app')

使用

<template>
  <ele-layout multi-tab="true" breadcrumb="true">
    <template #logo></template>
  </ele-layout>
</template>

效果

输入图片说明

🔥 案例

Element Enhance Admin : 基于 Element Enhance 的 前端 Cli template

📈 趋势

Giteye chart

🍚 贡献

组件库还处于早期开发阶段，功能还需要完善。如果你希望参与贡献，欢迎 Pull Request。如果只是简单的文档相关的错误修正，你可以直接 PR，但如果是当前组件的 BUG 或者新功能、新组件等，最好优先提 issues

Giteye chart