相信大家用過不少的后臺UI框架，這其中包含了使用了最新前端技術棧的vue-element-admin、基于Bootstrap 4.4框架以及JS / jQuery插件并完全響應的管理模板AdminLTE、具有漂亮界面、靈敏靈活的盒子布局的vue-admin、具有響應式和高質量UI的高級開源儀表板模板tabler等等后臺UI框架。都給我們的后臺開發帶來了極大的方便，

而今天，我給大家帶來一款開箱即用的后臺框架，提供豐富的組件和完全的異步加載機制，無需任何打包環境即可體驗整個后臺的UI框架——EAdmin

EAdmin簡述

當然跟大部分后臺UI組件一樣，它也包含了各種豐富的組件，主面板、主題色、表單、編輯器、彈窗、表格、日期、城市、模態、提醒、樹形、等等大多數常用的組件，符合現代UI設計的規范、簡單、美觀、實用讓你眼前一亮。

除下面所說的之外的，大家可以上官網查看更多詳細的內容。

EAdmin官網：http://www.eadmin.com.cn/

GitHub地址：https://github.com/suruibuas/eadmin

我只想要一個后臺而已，別讓我學那么多東西（EAdmin）

確實EAdmin的特性很符合這一句話“我只想要一個后臺而已，別讓我學那么多東西”，一起來看看它有什么吸引我們的地方。

特征：

開箱即用：無打包環境，一行代碼即可開始使用
異步加載：文件純異步加載，高效快速
極簡開發：極低的學習成本，半小時上手

運行：

一句代碼即可跑起來，就是這么簡單！

# 進入HTTP目錄，可以是任何可以被HTTP訪問的目錄
cd www
# 拉取代碼
git clone https://github.com/suruibuas/eadmin.git
# 打開瀏覽器訪問即可
http://xxx/index.html

配置項：

EAdmin提供了一組配置參數用來調整框架運行時的一些配置，簡單的列出幾項：

homepage：指定啟動頁的地址，也就是框架打開后第一屏顯示的默認頁面，如果不指定，則為空頁面
load_page_timeout：加載頁面默認延遲時長，避免頁面過快刷新，加載期間會在頁面中顯示loading動畫
allow_right_click：是否允許使用右鍵
window_height：彈窗默認高度
nav_api_url：導航的數據接口地址，僅在 nav_data_source 配置為 api 時有效
message_top：全局消息默認距離頂部的距離，單位 px

還有很多的配置項，大家可以上官網詳細看看，這一點還是挺好的。

組件：

官網給出的組件還是相當豐富的，幾乎涵蓋了市面上所有UI框架的組件，使用起來也是極其方便的，咱們也一起來看一看：

1、Button 按鈕：

<!-- 默認大尺寸按鈕 -->
<button>默認按鈕</button>
<!-- 中等尺寸按鈕 -->
<button class="middle">中等按鈕</button>
<!-- 小尺寸按鈕 -->
<button class="small">小按鈕</button>

有各種按鈕

2、表單

<div class="form-group">
    <!-- 標題 -->
    <span class="title">默認文本框</span>
    <!-- 表單元素 -->
    <input type="text" placeholder="請輸入你需要的內容">
</div>

有各種表單

3、表格

EAdmin提供后臺開發中常用的表格組件，通過配置文件就可以生成表格，包括分頁、工具欄等常用功能

特色表格

4、日期選擇

<input id="p1" type="text" placeholder="選擇日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1');
    })();
</script>

多種格式的日期

5、樹形

EAdmin集成了ztree.js，提供了日常開發最常用的樹形功能

let data = [
    {        name : '一級菜單', 
        open : false, 
        children : [            {                name : '子菜單'
            },             {                name : '子菜單'
            }        ]    },    {        name : '二級菜單', 
        open : false, 
        children : [            {                name : '子菜單'
            },             {                name : '子菜單'
            }        ]    }];