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设计开发全攻略（三）

性能详情

1. 为组件和指令提供了代码主动补全性能，主动补全必选参数，提供组件/指令反对的所有API信息进行抉择的能力

2. 鼠标悬浮在组件标签和组件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相干的往期文章：

Vue DevUI 又新添了11位新成员啦～🥳😋

Vue DevUI 曾经有10个组件成员啦～🥳😋

让咱们一起建设 Vue DevUI 我的项目吧！🥳

我为 DevUI 开发的脚手架

致谢

感激所有为DevUI生态建设做出奉献的开发者们，祝大家工作欢快~