Element Enhance 组件库，让 Element Plus 更简单，更通用，更流行

内容简介：Element Enhance 是基于 Element Plus 而开发的模板组件，提供了更高级别的抽象支持，开箱即用，更加专注于页面。 开发文档 | 更新日志 | 常见问题 | 发布需求 :loudspeaker: 理念 Element Plus 定义了基础的设计...

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

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

 ???? 理念

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

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

 ⚡ 设计

在实际开发中我们也经常会碰到一些设计问题，比如经典的按钮应该放在左面还是右面，查询表单怎么布局，日期怎么格式化，数字的对齐问题，在重型组件中都进行了抽象，对于各种行为与样式我们都经过了设计师的讨论与设计可以达到默认好看及好用。

如果你还是想自定义相关渲染可以通过自定义 ModelValue 的方式来实现。默认的不一定是最好的，但是一定不差，如果你要自定义最好考虑一下投入产出比，毛坯房里雕花真的好吗？

 ✒️ 特性

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

 ☁️ 入门

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

安装

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'

const app = createApp(App)

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

使用

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

效果

???? 贡献

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 面试官(6): 写过『通用前端组件』吗?
• Mybatis 通用 Mapper 4.0.1 发布，升级组件
• 饿了么基于 Vue 2.0 的通用组件库开发之路
• 写一个通用的幂等组件，我觉得很有必要
• refline.js 0.5.0 发布，通用的设计器参考线组件
• refline.js 0.6.0 发布，通用的设计器参考线组件

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。