Element Enhance基于 Element Plus 開發(fā)的模板組

Element Enhance 是基于 Element Plus 而開發(fā)的模板組件，提供了更高級別的抽象支持，開箱即用，更加專注于頁面。

開發(fā)文檔 | 更新日志 | 常見問題 | 發(fā)布需求

 ?? 理念

Element Plus 定義了基礎(chǔ)的設(shè)計規(guī)范，對應(yīng)也提供了大量的基礎(chǔ)組件。但是對于中后臺類應(yīng)用，我們希望提供更高程度的抽象，提供更上層的設(shè)計規(guī)范，并且對應(yīng)提供相應(yīng)的組件使得開發(fā)者可以快速搭建出高質(zhì)量的頁面。

列表頁應(yīng)該可以用 EleLayout + EleTable 完成，編輯頁應(yīng)該使用 EleLayout + EleForm 完成，詳情頁可以用 EleLayout + EleDescriptions 完成。 一個頁面在開發(fā)工程中只需要關(guān)注幾個重型組件，降低心智負(fù)擔(dān)，專注于更核心的業(yè)務(wù)邏輯。

 ? 設(shè)計

在實際開發(fā)中我們也經(jīng)常會碰到一些設(shè)計問題，比如經(jīng)典的按鈕應(yīng)該放在左面還是右面，查詢表單怎么布局，日期怎么格式化，數(shù)字的對齊問題，在重型組件中都進(jìn)行了抽象，對于各種行為與樣式我們都經(jīng)過了設(shè)計師的討論與設(shè)計可以達(dá)到默認(rèn)好看及好用。

如果你還是想自定義相關(guān)渲染可以通過自定義 ModelValue 的方式來實現(xiàn)。默認(rèn)的不一定是最好的，但是一定不差，如果你要自定義最好考慮一下投入產(chǎn)出比，毛坯房里雕花真的好嗎？

 ?? 特性

該組件庫的開發(fā)理念就是面向未來，如果查看源碼你就會發(fā)現(xiàn)像是 vue 3 的實驗性功能、像是 CSSNext 的 [CSS Variables]。在保證大部分瀏覽器的兼容性的情況下，會更多的使用新特性、新功能來開發(fā)

 ?? 入門

讓 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>

效果

?? 貢獻(xiàn)

組件庫還處于早期開發(fā)階段，功能還需要完善。如果你希望參與貢獻(xiàn)，歡迎 [Pull Request]。如果只是簡單的文檔相關(guān)的錯誤修正，你可以直接 PR，但如果是當(dāng)前組件的 BUG 或者新功能、新組件等，最好優(yōu)先提 [issues]