基于 Vue3 和 Element Plus免费开源admin前端UI框架——SCUI Admin

2024年12月04日 建站教程

SCUI Admin是中后台管理系统的前端解决方案,俗称admin ui框架,用于开发者搭建业务管理后台,基于最新的Vue3Element Plus。与一些包含后端开发的admin项目不同,SCUI Admin是一个纯前端的解决方案,后端用什么语言开发没有限制。

免费开源说明:

SCUI Admin 是一个采用 MIT 开源协议的 web 中后台管理 UI 框架,基于 Vue3Element Plus 开发,这两个项目同样也是免费开源的,任何公司和个人都可以免费下载使用,也可以用在商业项目上。

SCUI Admin 的技术特性:

1、组件 多个独家组件、业务模板
2、权限 完整的鉴权体系和精准的权限控制
3、布局 提供多套布局模式,满足各种 UI 设计需求
4、API 完善的API管理,使用真实网络 MOCK
5、配置 统一的全局配置和组件配置,支持 build 后配置热更新
6、性能 在减少带宽请求和前端算力上多次优化,并且持续着
7、其他 多功能视图标签、动态权限菜单、控制台组态化、统一异常处理等

SCUI Admin 的业务组件:

1、表格选择器:由 select 组件深度改造的表格选择器, 非常适用于大量数据选择的场景
2、表单表格:业务会有表单里含有对象数组的情况, 直接在表格进行增删改操作, 并且支持联动 form 表单的禁用属性
3、分类筛选器、过滤器等数据筛选组件
4、编辑器:提供连 Element Plus 没有提供的富文本编辑器和代码编辑器

SCUI Admin 的项目目录结构:

如果您使用的 IDE 是vscode(推荐)的话,可以安装以下工具来提高开发效率及代码格式化

┌── 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 配置

SCUI Admin 轻松上手:

# 克隆项目
git clone https://gitee.com/lolicode/scui.git

# 进入项目目录
cd scui

# 安装依赖
npm i

# 启动项目(开发模式)
npm run serve

进入SCUI Admin官网

本文链接:http://so.lmcjl.com/news/18959/

展开阅读全文
相关内容