Hello @idux, 一个全新的 vue 3.x 组件库来了__Vue.js__开源
发布于 3 年前 作者 banyungong 1312 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

theme: awesome-green

@idux 是一个基于 Vue 3.xTypeScript 开发的开源组件库,它拥有以下特性:

  • Monorepo 管理模式:cdk, components, pro
  • 开箱即用的高质量组件
  • 全面拥抱 Composition API,从源码到文档
  • 完全使用 TypeScript 开发,提供完整的类型定义
  • 灵活的全局配置
  • 深入细节的主题定制能力
  • 国际化语言支持

相关链接:

特性

Monorepo 模式

@idux 总共分成了 3 个包:

  • @idux/cdk
  • @idux/components
    • 它是传统意义上的基础组件库,包含了数十种常规 UI 组件
    • 我们对每一个组件的 API 都进行了精心的设计,保证了 API 一致性
    • 组件设计参考了 antdng-zorro
  • @idux/pro
    • 它是对 @idux/components 的进一步封装与组合,使用更少的代码去完成业务开发
    • 它主要来源于我们对自身业务的提炼
    • 它目前数量有限,我们会逐渐补充

开箱即用

完全基于 esm 构建的包,支持开箱即用的 Tree Shaking 和按需加载,也可以再配合一些自动导入插件,可以让你的编码更加高效

import { IxButton } from "@idux/components/button";

更多内容请参见快速上手

我们有覆盖率 80+ 的单元测试和完善的 CI 流程,来保证我们的组件质量

Composition API

Vue 3.x 的一个重要特性就是 Composition API,我们所有的源代码和示例代码,都使用它来完成

它其实是一种全新的代码组织范式,让开发者可以更好的组织代码,越是复杂的组件,就越能体现它的优雅

table

TypeScript

我们所有的源代码都是由 TypeScript + TSX 编写,为了给用户提供最佳的使用体验,我们为此付出了诸多努力

无论用户使用 TSX 还是使用 SFC (需要配合 Vue Language Features 插件)都可以享受到完整的类型提示与保护

button

国际化

我们针对部分组件的静态文案内置了 i18n 的支持,不过目前仅支持中文和英文

PR Welcome, 我们也渴望得到社区力量的支持和帮助,让 @idux 变得更加完善

更多内容请参见国际化

全局配置

我们给众多组件添加了全局配置功能,这应该是你见过全局配置最多的组件库之一

用户可以通过全局配置来定义组件的默认行为,从而减少在模板中需要写的代码

支持在运行时修改全局配置项,还支持局部覆盖全局配置项

更多内容请参见全局配置

主题定制

我们尽最大努力地提供了丰富的主题变量,既有全局变量,也有组件级别的变量 便于用户百变百搭,灵活定制自己想要的主题

注意: 当前该功能并不稳定,我们正在考虑使用 css 变量的方案替换掉 less 变量 等待方案完善后,我们会在每个组件的文档中声明所支持的主题变量

更多特性

响应式表单系统

响应式表单系统提供了一种模型驱动的方式来处理表单输入,参考了 [@angular](/user/angular)/forms 的实现

  • 显式的表单模型:FormGroup, FormArray, FormControl
  • 响应式的表单状态:value, status
  • 统一且易扩展的表单验证:Validators

如果你使用过 [@angular](/user/angular)/forms, 那么你对下面的代码应该会感觉到很熟悉

forms

更加受控的组件

我们为所有组件支持 v-modelProps 都添加了受控模式,参见 issue #510

其他的 Props 绝大多数也都是受控的,这是来自我们内部低代码平台的需求,他们需要完全受控的组件。

数据驱动理念的 API 设计

对于一些复杂组件,例如,table, tree, menu, 我们更加推荐用户使用数据源(dateSource)而不是在直接在 template 中使用子组件。

在实际的开发过程中,数据源往往是动态的,直接操作数据会比在 template 中使用 v-if, v-for 更加直接,也更利于维护。

- <IxMenu>
-   <template v-for="item in dataSource">
-     <IxMenuItem v-if="item.type === 'item'" :key="item.key" :icon="item.icon"></IxMenuItem>
-     <IxMenuDivider v-else-if="item.type === 'divider'" :key="item.key"></IxMenuDivider>
-   </template>
- </IxMenu>

+ <IxMenu :dataSource="dataSource"></IxMenu>

更多特性等待你的发掘,快来上手体验吧。

下一步计划

目前只是 @idux 的开始,它还有许多不够完善的地方,接下来我们将在持续的迭代中完善它,这是我们的下一步计划:

  • 组件文档的完善与补充
  • 视觉优化以及设计指南完善与补充
  • 单元测试的完善与补充
  • 主题变量方案的完善

另外,我们也在准备一个后台管理系统的模板,以供大家快速的搭建项目原型,敬请期待。

最后,开源不易,希望 @idux 能够得到大家的喜欢和支持。我们也将不忘开源初心,积极拥抱社区,依靠社区的力量来让 @idux 获得更好的成长。非常欢迎热爱开源的朋友来一起参与 @idux 项目,无论是 star, issue 还是 PR 都是对我们的帮助与支持,感谢。

关于 IDuxFE

我们是来自深信服科技的前端团队,@idux 已经在云计算&安全多场景落地,未来会实现集团内全产品覆盖,所以不用担心我们弃坑,放弃维护。

如果对我们感兴趣的话,欢迎加入我们,可以投递简历到 uedc@sangfor.com.cn 或者直接私信我。

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: IDuxFE 原文链接:https://juejin.im/post/7042565546189488159

回到顶部