DevUI Admin 2.0 重磅发布!
DevUI是面向企业中后台产品的开源前端解决方案,其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念,旨在为设计师、前端开发者提供标准的设计体系,并满足各类落地场景,是一款企业级开箱即用的产品。如果你正在开发 ToB 的工具类产品,DevUI 将是一个很不错的选择!
引言
预告了2个星期,DevUI Admin 2.0 终于来了!先来看看黑科技
是什么吧!
在2.0版本中,我们将区块
从Admin
中抽离了出来,并且推出了一套对应的Angular CLI
去帮助你使用我们的区块,让你可以更快更方便地搭建一个基于DevUI Admin的后台管理系统。后续我们还会持续丰富现有的区块,完善CLI让其能够帮助你做更多的事情。
除此之外,我们还新增了:
- 动态表单
- 第三方登录,账号注册
- 消息提醒面板
为了让大家快速将黑科技
用起来,我们特意在B站录制了一段4分钟
的教学视频,欢迎大家围观~
https://www.bilibili.com/video/BV1o3411z7qi/
1 DevUI Admin 区块
目前DevUI Admin
提供了4类
共19个
内置区块,覆盖表单
、列表
、图表
等丰富的业务场景。
为了更方便的使用我们的区块,我们建议你先初始化我们的种子工程,再通过我们提供给你的 cli 来添加我们的区块以及基于我们的区块来搭建一个页面:
ng add ng-devui-admin
初始化我们的种子工程之后,别忘了先安装我们的物料库哦:
npm i ng-devui-materials
之后你就可以在你的项目中通过我们提供的命令行来进行区块的添加以及页面的创建:
ng g ng-devui-admin:blocks ng g ng-devui-admin:views
在这里你需要知道我们区块的名字,你可以前往 Admin 区块 进行查看。
1.1 在页面中添加区块
# For Example cd src/app/pages/getting-started/sample ng g ng-devui-admin:blocks
通过使用我们提供的 ng-devui-admin
命令行,通过简单的命令行操作你就可以将我们的区块快速添加到你的页面当中,之后你只需要简单的调整布局或者内容的调整就可以完成页面的搭建,布局的调整可以参考 Admin 布局。
1.2 基于区块创建页面
# For Example cd src/app/pages/getting-started ng g ng-devui-admin:views
通过使用我们提供的 ng-devui-admin
命令行,通过简单的命令行操作你就可以初始化一个页面并添加我们提供的区块,再将其添加到对应的模块中,之后根据你的需要自行进行调整即可,更多使用可以参考 DevUI Admin。
2 动态表单
由于中后台应用表单需求较多,通过多次书写繁琐的表单模板进行表单创建,费时费力。DevUI Admin对DevUI组件库的表单组件进行了二次封装,你可以根据我们规定的对象模型元数据来动态的创建表单。另外,DevUI Admin已内置radio、checkbox、textInput、toggle、select等多个小部件可供选择,在表单内渲染。
更多使用细节请参考 Admin 动态表单。
3 第三方登录
在Admin 2.0中我们提供了第三方登录的实现方式(示例为通过github登录),你可以拿到返回的 code
来进行你的用户鉴权等操作,更多细节参考 第三方登录。
4 消息提醒面板
作为后台管理系统的使用者,时常会需要关注当前的消息以及有哪些待处理的事项,为了满足这一个需求,我们在 Admin 2.0 中已经实现了该功能。
5 结语
在未来我们将持续演进,关注 DevUI Admin 性能与易用性,持续优化 DevUI Admin 体验并降低开发者使用成本。期待你收到你的 意见与建议,同时也期待你的参与和共建。
6 DevUI 生态
6.1 DevUIHelper:用于DevUI组件代码补全的VSCode插件
DevUIHelper 插件的开发旨在为组件库用户提供更优的开发体验,此外也是对VSCode插件开发的一次探索。
代码库地址:https://github.com/DevCloudFE/DevUIHelper
插件开发相关文章:
!好用到飞起!VSCode插件DevUIHelper设计开发全攻略(一)
!好用到飞起!VSCode插件DevUIHelper设计开发全攻略(二)
!好用到飞起!VSCode插件DevUIHelper设计开发全攻略(三)
功能详情
- 为组件和指令提供了代码自动补全功能,自动补全必选参数,提供组件/指令支持的所有API信息进行选择的能力
- 鼠标悬浮在组件标签和组件API上时,提供对应的提示信息,包括使用场景、API详情描述等关键内容
6.2 Vue DevUI:Vue3版本DevUI组件库
Vue DevUI是DevUI团队为了响应社区声音、将DevUI的优秀实践覆盖更广泛的开发者而启动的一个Vue3版本的开源组件库,目前已经有200+社区开发者参与进来,正在火热开发中,欢迎大家踊跃参与进来。
以下是该项目的源码:
https://gitee.com/devui/vue-devui
参与贡献可以加小助手微信:devui-official,拉你进Vue DevUI核心成员小组~
以下是Vue DevUI相关的往期文章:
致谢
感谢所有为DevUI生态建设做出贡献的开发者们,祝大家工作愉快~
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
TokenManager 0.0.1 发布:支持三方 Token 托管
TokenManager V0.0.1版本 TokenManager是一款基于Java开发的Springboot组件,用于管理自身平台以外的三方Token。 TokenManager将全场景的远程调用获取Token抽象到TokenManager接口中,通过调用指定的API实现各类三方系统的Token的管理。 通过Redis的消息订阅特性实现了延时消息监听Token生命周期过期时间,从而自动刷新Token。 确保在高并发请求下,用户不会调用具体的三方接口实时获取Token。 TokenManager原理图如下所示: 开发者:marker TokenManager特性 多环境Token共享例如:调试微信,获取appid+secrt换取accessToken,在开发环境和测试环境共用appid的情况下,Token共享。 自动刷新accessToken支持基于Oauth2协议的刷新Token机制,无需干预自动刷新,最佳的管理方式,提高接口响应速度。 多级缓存(待实现)支持本地缓存与远程缓存。本地缓存JVM级别的,远程缓存基于Redis。提高Token的访问速度,防止Redis击穿雪崩。 本地缓...
- 下一篇
Grep 3.7 发布,修复了性能大幅下降的问题
GNU Grep 被程序员、系统管理员和其他开发者广泛使用,用于从命令行搜索文本数据。Grep 3.7 的发布主要是为了修复困扰 Grep 的 "性能大幅下降" 问题。 在 Grep 3.6 之后的 40 周内,有 6 位开发者进行了 33 次代码提交。在 Grep 3.7 版中值得注意的变化包括: 行为上的改变: 使用--unix-byte-offsets(-u) 选项现在会引起一个警告。自 3.1 以来,这个仅适用于 Windows 的选项没有任何影响。 错误修复: 当太多的模式被散列到太少的 buckets 中时,预处理 N 个模式至少需要 O(N^2) 的时间。现在这只需要几秒钟,而不是此前所需的几天时间。 更多详情可查看:https://savannah.gnu.org/forum/forum.php?forum_id=10037
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Mario游戏-低调大师作品
- CentOS关闭SELinux安全模块
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS6,CentOS7官方镜像安装Oracle11G