SCUI Admin - 免费开源,基于 Vue3、Element Plus 开发的 admin 前端框架
xsobi 2024-11-26 10:15 1 浏览
一款功能强大的 admin 框架,很多复杂的业务组件、页面模板都有,专业程度堪比付费的产品。
关于 SCUI Admin
SCUI Admin 是一个中后台管理系统的前端解决方案,俗称 admin ui 框架,用于让开发者搭建业务管理后台,基于当前最新的 Vue3 和 Element Plus 实现。和一些包含后端开发的 admin 项目不一样,SCUI Admin 是一个纯前端的解决方案,无论后端使用什么语言开发,都没有限制。
SCUI Admin 封装了很多常用的业务组件,使用起来很简单,一切从简也是 SCUI 所追求的目标。
让一切复杂的东西傻瓜化。
SCUI的宗旨
SCUI Admin 的技术特性
- 组件 多个独家组件、业务模板
- 权限 完整的鉴权体系和精准的权限控制
- 布局 提供多套布局模式,满足各种 UI 设计需求
- API 完善的API管理,使用真实网络 MOCK
- 配置 统一的全局配置和组件配置,支持 build 后配置热更新
- 性能 在减少带宽请求和前端算力上多次优化,并且持续着
- 其他 多功能视图标签、动态权限菜单、控制台组态化、统一异常处理等
上手体验感受
作为一个使用 Element UI 开发 admin 后台多年的前端仔,得益于 Element 提供的专业优质的基础组件,在实现业务需求的过程中虽然十分顺利,但 Element 只提供了基础组件,复杂操作的业务需求,仍然需要自己去写。
SCUI Admin 的最大特色是提供了很多专业的复杂组件和页面模板,在开始使用前,我强烈建议各位先从官方的演示地址体验这套系统,相信会和我有一样的感受。
界面布局平衡合理
很多 admin 系统都过度简洁,实际上 admin 最核心的是功能强大和高效,管理者使用起来事半功倍,比如 SCUI Admin 的导航菜单是多列式的,相比于折叠式的菜单,使用起来更直观。从上到下面包屑导航、多页面管理标签以及菜单隐藏、主题切换等基本功能都做得很好。
复杂业务组件、页面模板开箱即用
SCUI Admin 提供了很多复杂功能的业务组件,比如
- 表格选择器:由 select 组件深度改造的表格选择器, 非常适用于大量数据选择的场景
- 表单表格:业务会有表单里含有对象数组的情况, 直接在表格进行增删改操作, 并且支持联动 form 表单的禁用属性
- 分类筛选器、过滤器等数据筛选组件
- 编辑器:提供连 Element Plus 没有提供的富文本编辑器和代码编辑器
还有太多实用的组件了,这些组件自己实现起来,不仅开发成本大,而且很有可能是 shi 一般的体验。
开发上手
由于是纯前端的项目,看目录结构就基本可以上手了。
项目目录结构
┌── public # 静态资源(不会被Webpack打包)
├── src # 源代码
│ ├── api # 接口
│ ├── assets # 静态资源(会被打包)
│ ├── components # 组件库
│ ├── config # 配置
│ ├── directives # 自定义指令
│ ├── layout # 框架布局视图
│ ├── locales # 国际化文本
│ ├── router # 路由表
│ ├── store # VUEX状态管理
│ ├── style # 全局样式
│ ├── utils # 全局公用方法
│ ├── views # 所有视图
│ ├── App.vue # 入口视图
│ └── main.js # 入口文件
├── .editorconfig # 统一编辑器样式
├── babel.config.js # postcss 配置
├── package.json # 包管理
└── vue.config.js # vue-cli 配置
安装和运行
# 克隆项目
git clone https://gitee.com/lolicode/scui.git
# 进入项目目录
cd scui
# 安装依赖
npm i
# 启动项目(开发模式)
npm run serve
启动完成后浏览器访问 http://localhost:2800,接下去可以熟悉一下或者进行业务开发步骤。官网文档展示了开发一个页面的教程,很简单:
- 建立路由表
- 建立API
- 建立视图
模块抽离
SCUI Admin 提供了全面的业务开发解决方案,没有支持树摇优化这种自动优化的方式,如果不把没有用到的功能依赖去掉,打包的体积会很大。 SCUI Admin 采用 Webpack 官方 splitChunks 分割模块来配置。
依赖分析
在打包完成后,会在 dist 根目录下生成 report.html,可以查看各个模块的体积分析,从而决定是否需要抽离。
免费开源说明
SCUI Admin 是一个采用 MIT 开源协议的 web 中后台管理 UI 框架,基于 Vue3 和 Element Plus 开发,这两个项目同样也是免费开源的,任何公司和个人都可以免费下载使用,也可以用在商业项目上。
之前分享了很多 admin 框架,SCUI Admin 绝对是众多免费 admin 框架的翘楚,从组件的丰富和实用程度上,完全可以和同类型的付费产品相提并论,我的下一个 admin 就选 SCUI Admin 了。
关注我,持续分享高质量的免费开源、免费商用的资源。
↓↓点击查看本次分享的网址。
SCUI Admin - 基于 Vue3 和 Element Plus 开发的 admin 前端 UI 框架,不仅免费开源,还有很多现成的业务组件、页面模板|那些免费的砖
相关推荐
- 好用的云函数!后端低代码接口开发,零基础编写API接口
-
前言在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作。不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人,通过...
- 快速上手:Windows 平台上 cURL 命令的使用方法
-
在工作流程中,为了快速验证API接口有效性,团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间,而且促进了团队效率的提升。对于使用Windows系统的用户来说,这里有一套详细...
- 使用 Golang net/http 包:基础入门与实战
-
简介Go的net/http包是构建HTTP服务的核心库,功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持,可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...
- #小白接口# 使用云函数,人人都能编写和发布自己的API接口
-
你只需编写简单的云函数,就可以实现自己的业务逻辑,发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程,进入开放平台我的接口-在线接口编程,设计一个新接口,设计和配置好接口参...
- 极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:iN在之前和大家说过,在iN的家里是没有墙面开关的。...
- window使用curl命令的注意事项 curl命令用法
-
cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...
- Linux 系统curl命令使用详解 linuxctrl
-
curl是一个强大的命令行工具,用于在Linux系统中进行数据传输。它支持多种协议,包括HTTP、HTTPS、FTP等,用于下载或上传数据,执行Web请求等。curl命令的常见用法和解...
- Tornado 入门:初学者指南 tornados
-
Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...
- PHP Curl的简单使用 php curl formdata
-
本文写给刚入PHP坑不久的新手们,作为工具文档,方便用时查阅。CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我们经常会需要用到cur...
- Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介
-
本章涵盖使用Actix提供静态网页...
- 我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些
-
这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话,这是一次比较曲折的Bug跟踪之旅。10月28日,我们在GitHub上提...
- linux文件下载、服务器交互(curl)
-
基础环境curl命令描述...
- curl简单使用 curl sh
-
1.curl--help#查看关键字2.curl-A“(添加user-agent<name>SendUser-Agent<name>toserver)”...
- 常用linux命令:curl 常用linux命令大全
-
//获取网页内容//不加任何选项使用curl时,默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...
- 三十七,Web渗透提高班之hack the box在线靶场注册及入门知识
-
一.注册hacktheboxHackTheBox是一个在线平台,允许测试您的渗透技能和代码,并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战,并且模拟真实场景,其风格更倾向于CT...
- 一周热门
- 最近发表
-
- 好用的云函数!后端低代码接口开发,零基础编写API接口
- 快速上手:Windows 平台上 cURL 命令的使用方法
- 使用 Golang net/http 包:基础入门与实战
- #小白接口# 使用云函数,人人都能编写和发布自己的API接口
- 极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关
- window使用curl命令的注意事项 curl命令用法
- Linux 系统curl命令使用详解 linuxctrl
- Tornado 入门:初学者指南 tornados
- PHP Curl的简单使用 php curl formdata
- Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- strcat (25)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- webgl开发 (24)
- parse (24)
- c 视频教程下载 (33)
- paddleocr (28)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)