EAdmin - 开箱即用的后台UI框架 _EAdmin

现在要写一个后台UI界面，要学的东西越来越多了。各种新的前端框架，让人应接不暇，而一些已有的css框架，需要额外写的组件逻辑又太多。有没有一个能够开箱即用，通过配置化的方式，就能实现美观的后台界面的UI框架呢？EAdmin，这个精心打磨的后台UI框架，或许能为你的开发带来更多便利。

文章插图
EAdmin框架
简介EAdmin，是 suruibuas 在 Github 上开源的后台UI框架，项目位于 https://github.com/suruibuas/eadmin，并在码云上有镜像 https://gitee.com/suruibuas/eadmin 。EAdmin 是一个开箱即用的后台UI框架，无需学习前端框架，无需打包环境，一行代码即可开始使用，文件使用异步加载，加载高效快速，且学习门槛低，半小时即可上手。

文章插图
EAdmin文档
安装EAdmin 开箱即用，无需安装，在 html 文件中引用发布的 CSS 样式文件，以及JAVAscript 文件即可，然后进行框架配置后，就可以使用对应的组件进行开发。
<link href=https://www.isolves.com/it/cxkf/kj/2020-09-02/"./css/eadmin.min.css" rel="stylesheet">本地开发也可以使用 gulp 进行运行：
git clone https://github.com/suruibuas/eadmin.gitnpm installgulp run

文章插图
Github项目
示例EAdmin 使用配置化的方式，在入口文件进行框架的配置，方式可以参考项目中 dist/index.html，主配置包括：

conf：全局配置，包括主页、弹窗默认高度、消息默认时长等参数
framework：加载的依赖库，包括 jquery、axIOS 等，可根据自身需求选择
data：全局数据，可以在框架全局使用的数据
lib：加载的组件库，包括 form、button、chart 等，可以按需加载

EAdmin 的主色调以暗色为主，同时前景色调较为鲜艳，符合流行的大数据平台的配色需求：

文章插图
EAdmin颜色
最基本的UI组件之一就是按钮，EAdmin提供了美观的按钮，包括不同的尺寸、图标和状态等：

<button>默认按钮</button><button class="middle">中等按钮</button><button class="highlight">高亮按钮</button><button disabled>禁用按钮</button><button data-icon="fa-cog">配置</button><button data-loading="上报中..." data-do="updateData">上报数据</button>

文章插图
EAdmin按钮
【EAdmin - 开箱即用的后台UI框架】可以很方便地配置回调函数：

<script>// 具体的执行方法，按钮会接收到一个btn参数，就是被点击按钮的对象Method.updateData = https://www.isolves.com/it/cxkf/kj/2020-09-02/(btn) => {// 业务处理setTimeout(() => {// 重置按钮Eadmin.button.reset(btn);// 消息提醒，根据具体业务来Eadmin.message.success({content : '数据上报成功'});}, 1000);}

EAdmin 也提供了丰富的表单组件，包括文本框、文本域、单选框、文件上传、穿梭框、评分等。以文本框为例，包括了状态、图标、数字、前后缀等：

<input type="text" placeholder="请输入你需要的内容"><input type="text" placeholder="请输入你需要的内容" disabled><input type="text" placeholder="可以指定文本框的图标" data-icon="fa-user"><input class="num-input" type="text" value=https://www.isolves.com/it/cxkf/kj/2020-09-02/"0" data-min="0" data-max="10" data-step="1">