🎉🎉 Vue3 组件库 Varlet v3.0.0 发布了！支持 Material Design 3

写在前面

经过了社区贡献者们的三个多月的努力，Varlet 的 3.0 版本终于发布了！ 🎉🎉🎉，这次的版本升级主要围绕的是设计系统升级和组件视觉和交互优化。我们重构了几千个 css 变量，最终的最终，终于同时支持了 Material Design 2 和 Material Design 3 两种设计系统。同时对组件库整体做了一次重构和细节优化，又又又撇去了一些技术债务。

文档地址: varlet.gitee.io/varlet-ui/#...

github: github.com/varletjs/va...

新增 Material Design 3 支持

Varlet 3.0 以前，我们以 Material Design 2 作为默认的设计系统，并且提供了暗黑模式的主题包。3.0 之后我们依然以 md2 为默认 ^_^，提供了对 Material Design 3 的支持。(md3 真的很出色，作者个人真的超爱)。

新增更多通用 css 变量，更易定制

为了使组件样式定制更加容易，并且支持 Material Design 3，3.x 版本对组件库的样式变量进行了一次大重构，新增了一些基础样式变量，每个组件都动了刀子。

text 复制代码

 `--color-on-primary`                
 `--color-on-info`                   
 `--color-on-success`                
 `--color-on-warning`                
 `--color-on-danger`                 
 `--color-primary-container`         
 `--color-info-container`            
 `--color-success-container`         
 `--color-warning-container`         
 `--color-danger-container`          
 `--color-on-primary-container`      
 `--color-on-info-container`         
 `--color-on-success-container`      
 `--color-on-warning-container`      
 `--color-on-danger-container`       
 `--color-outline`                   
 `--color-surface-container`        
 `--color-surface-container-low`     
 `--color-surface-container-high`    
 `--color-surface-container-highest` 
 `--color-inverse-surface`           
 `--color-on-surface-variant`

unplugin-vue-components resolver 独立为 @varlet/import-resolver

由于 unplugin-vue-components 内置的组件库 resolver 过于的多了，维护压力不小，antfu 推荐自行维护 resolver。趁这次 3.0 更新顺便也就独立了，按需引入方式有如下变化，原本 unplugin-vue-components 的 varlet resolver 也依然可以继续使用，但是建议迁移到 @varlet/import-resolver

js 复制代码

import vue from '@vitejs/plugin-vue' 
import components from 'unplugin-vue-components/vite' 
import autoImport from 'unplugin-auto-import/vite' 
import { VarletImportResolver } from '@varlet/import-resolver' 
import { defineConfig } from 'vite' 

export default defineConfig({ 
  plugins: [ 
    vue(), 
    components({ resolvers: [VarletImportResolver()] }), 
    autoImport({ resolvers: [VarletImportResolver({ autoImport: true })] }) 
  ] 
})

支持运行时转换主题包尺寸单位

为了满足移动端的适配需要，我们支持了运行时转换主题包 css 单位的能力。默认采用 375px -> 100vmin 的转换规则

js 复制代码

import { Themes } from '@varlet/ui' 

const viewportTheme = Themes.toViewport(Themes.md3Dark)

也可以对规则进行修改，比如。。。

js 复制代码

import { Themes } from '@varlet/ui' 

const viewportTheme = Themes.toViewport(Themes.md3Dark, { 
  // 默认值为 375 
  viewportWidth: 750, 
  // 默认值为 'vmin' 
  viewportUnit: 'vw', 
  // 默认值为 6 
  unitPrecision: 4, 
})

功能移除

DatePicker 组件移除了对 headerColor 属性的兼容
TimePicker 组件移除了对 headerColor 属性的兼容
ImagePreview 组件移除了对 current 属性的兼容
Chip 组件移除了对 closable 属性的兼容
Progress 组件移除了对 ripple 属性的兼容
IndexBar 组件移除了对 cssMode 属性的兼容
LoadingBar 组件移除了对 mergeConfig 方法的兼容

2.x 版本状态

随着 3.x 的发布，varlet 2.x 原则上也将进入只修 bug 不再提供新特性的状态。2.x 的文档迁移至 varlet.gitee.io/varlet-ui/v...

最后的最后

开源不易，尤其是在如今这个浮躁的时代。作者已经开发 varlet ui 三年了，恍惚间竟然是发的第三个大版本了，十分感慨时间过的如此之快，我们一起继续努力。同时非常感谢社区对我们的帮助和支持。以及下面这些无私奉献的 contributor 们。