a component library for Vue 3 base on element-plus
Element Enhance 是基于 Element Plus 而开发的模板组件,提供了更高级别的抽象支持,开箱即用,更加专注于页面。
This project is still under heavy development. Feel free to join us and make your first pull request.
Element Plus 定义了基础的设计规范,对应也提供了大量的基础组件。但是对于中后台类应用,我们希望提供更高程度的抽象,提供更上层的设计规范,并且对应提供相应的组件使得开发者可以快速搭建出高质量的页面。
列表页应该可以用 EleLayout + EleTable 完成,编辑页应该使用 EleLayout + EleForm 完成,详情页可以用 EleLayout + EleDescriptions 完成。 一个页面在开发工程中只需要关注几个重型组件,降低心智负担,专注于更核心的业务逻辑。
该组件库的开发理念就是面向未来,如果查看源码你就会发现像是 vue 3 的 script setup 实验性功能、像是 CSSNext 的 CSS Variables。在保证大部分浏览器的兼容性的情况下,会更多的使用新特性、新功能来开发
让 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
组件库还处于早期开发阶段,功能还需要完善。如果你希望参与贡献,欢迎 Pull Request。如果只是简单的文档相关的错误修正,你可以直接 PR,但如果是当前组件的 BUG 或者新功能、新组件等,最好优先提 issues
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。