Vue3 组件库 Varlet v2.0.0 终于发布了
官方首页
写在前面
经过了社区贡献者们的两个月努力,Varlet 的 2.0 版本终于发布了! ,这次版本更新主要是对组件库整体做了一次重构和细节优化,同时撇去了一些技术债务(舒服了舒服了)。主要的变更看下面!
组件库(@varlet/ui)
组件特性变更
- Menu 组件进行了重做,优化了 api 使其变得更易使用,在桌面端也有更优秀的边界检测能力和性能。具体使用方式参考 Menu 文档,
- Select 组件的下拉菜单替换成了新版 Menu 组件
- Pagination 组件的下拉菜单替换成了新版 Menu 组件
- Loading 组件的默认颜色从 currentColor 更改为 var(–color-primary)
- Loading 组件暴露出 var(–loading-color)
- Button 组件新增 loadingColor 属性
- Snackbar 组件新增 loadingColor 属性
- Progress 组件新增 labelClass 属性
- StyleProvider 组件新增 tag 属性,允许自定义容器标签
- Cell 组件重命名了部分 api desc -> description, descClass -> descriptionClass
- DatePicker 组件重命名了部分 api shadow -> elevation
- TimePicker 组件重命名了部分 api shadow -> elevation
- Card 组件重命名了部分 api height -> image-height,content -> floating-content
- Col 组件新增 direction 属性
- Dialog 组件新增 width 属性
组件样式变量变更
- Menu 组件变量新增 –menu-background-color
- Select 组件变量新增 –select-select-min-height,–select-menu-margin-top
- Pagination 组件变量新增 –pagination-simple-padding
- Loading 组件变量新增 –loading-color
- Cell 组件变量重命名 –cell-desc-font-size -> –cell-description-font-size,–cell-desc-color -> –cell-description-color
UMD 模块优化
在
1.x 版本中,UMD 模块不包含英文语言包和暗黑模式主题包。在
2.x 版本中,我们将其进行了内置
移除 less 主题变量的支持
如今
css variable 方案已经十分成熟,在
2.x 版本中不再支持
less 主题变量,这有利于减小包的发布体积。 如果您使用了在构建时替换
less 主题变量的方案,需要替换成
css variable 方案
Typescript 类型优化
我们对组件内部类型进行了重构,抽象了更多的类型并且暴露了出来,组件的类型规范依照
组件名 +
类型名的形式,对用户的心智更加友好。
支持自动引入函数组件
在 1.x 中,组件库只支持自动引入在模板中的声明式组件,函数组件
(例如: Snackbar) 依旧需要手动引入样式文件。 在 2.x 中,通过
unplugin-auto-import 插件支持了函数组件的自动引入(现在是真的全自动引入了)
组件库快速成型工具(@varlet/cli)
唠唠家常
社区的同学们对
@varlet/cli 的热情比我想象的要高涨很多,也有几个同学找到我秀出了他们自己的组件库作品,也同时提出了一些意见。所以我们这次更新也对这一套组件库开发的工具链做了一点优化
命令重构
- 重构了 gen 和 create 命令,增加了 sfc 和 tsx 两种风格的模板选择,增加了国际化的选项,优化了命令行交互体验
- 重构了 compile 命令,编译后的包不再支持 less 变量
- 新增 vite:dev 和 vite:build 命令,对 vite 进行了基本的封装
命令重构
文档相关
- 新的文档首页
- 优化了文档视觉
- 文档样式变量进行了一些重命名
官方文档入口
官方文档
官方文档地址:
https://varlet.gitee.io/varlet-ui/, github地址:
https://github.com/varletjs/varlet
原创文章,作者:starterknow,如若转载,请注明出处:https://www.starterknow.com/126849.html