您现在的位置是：首页 > 文章详情

优化永不止步：TinyVue v3.20.0 正式发布，更美观的官网UI，更友好的文档搜索，更强大的主题配置能力~

日期：2024-12-16点击：101收藏

本文由体验技术团队Kagol原创。

我们非常高兴地宣布，2024年12月4日，TinyVue 发布了 v3.20.0 🎉。

本次 3.20.0 版本主要有以下重大变更：

OpenTiny 官网首页 UI 和性能优化，更具现代性和设计美感，加载速度更快、体验更好。
TinyVue 官网增加 Algolia 全文搜索，原来只能搜索组件名称，现在可以搜索组件Demo和API文档，让你更容易搜索到自己想要的内容。
主题配置工具增加覆盖CSS功能，定制性更强，并且增加了老主题、Aurora主题的适配。

详细的 Release Notes 请参考：https://github.com/opentiny/tiny-vue/releases/tag/v3.20.0

本次版本共有13位贡献者参与开发，感谢朋友们的辛苦付出👏

shenjunjian
kagol
zzcr
gimmyhehe
Davont
GaoNeng-wWw
betavs
wuyiping0628
Youyou-smiles
James-9696
chenxi-20
mengqiuleo
MomoPoppy

你可以更新 @opentiny/vue@3.20.0 进行体验！

npm i @opentiny/vue@3.20.0

我们一起来看看都有哪些更新吧！

1 OpenTiny 官网首页 UI 和性能优化

1.1 官网 UI 美化

2024年7月，我们对 TinyVue 网站的 UI 进行了优化，让组件文档阅读体验更友好。

设计师小姐姐加入之后，TinyVue 组件库官网焕然一新！

2024年11月，我们在 TinyVue 3.19.0 版本对组件库整个UI进行了升级，让UI更美观、更符合现代风格。

焕然一新！TinyVue 组件库 UI 大升级，更符合现代的审美！
🎉TinyVue v3.19.0 正式发布！Tree 组件终于支持虚拟滚动啦！UI 也升级啦，更更符合现代审美~

2024年12月，我们对 OpenTiny 官网首页进行了 UI 优化，更具现代性和设计美感，并对官网首页的加载性能进行优化，实现秒开。

我们对体验和性能的优化，永不止步！

欢迎大家访问 OpenTiny 官网进行体验：https://opentiny.design/

1.2 官网性能优化

之前 OpenTiny 首页打开比较慢，一个 js 文件就将近 8MB，存在性能问题。

于是我们全面分析了网站的构建产物，寻找性能瓶颈，并进行优化，以下是取得的主要成果：

Lighthouse 性能分从68分提升到了93分，各项数据都有明显提升，提升37%左右；
构建产物体积从 8MB 降到 856KB（其中与首页相关的js代码仅有 450KB），提升近10倍；
构建时长从 50s 缩短到 7.63s，提升6.5倍左右。

Lighthouse 性能得分对比：

构建产物对比：

2 TinyVue 官网增加 Algolia 全文搜索

之前 TinyVue 组件库的官网只支持搜索组件，这样用户想找组件怎么用还是比较难的。

首先需要知道组件准确的名字
然后在左侧菜单打开组件的文档
还要在组件 demo 和 api 文档中一个一个看，自己要的功能在哪里，怎么配置
特别是有些组件功能非常复杂，比如表格，光是组件api就100多个

新手觉得很头大。

为了让不熟悉 TinyVue 组件库的新手也能快速找到组件文档，快速使用上 TinyVue，我们给 TinyVue 文档增加了 Algolia 全文搜索功能。

只需要打开 TinyVue 网站：https://opentiny.design/tiny-vue/

按 Ctrl + K 快捷键，或者点击左上角的搜索框，会弹出搜索面板，输入你想了解的内容，比如："圆角按钮"，按 Enter 就可以跳转到圆角按钮对应的页面。

跳转到圆角按钮页面：

再比如："日期范围"

跳转到日期范围页面：

我不需要知道文档在哪里，要的时候我按 Ctrl + K 进行搜索就行了！

寻找文档的效率大大提升！

欢迎大家体验！

3 主题配置工具增加覆盖 CSS 功能

TinyVue 组件库提供了 TinyThemeTool 类进行主题切换和自定义主题配置，如果你的业务需要定制主题风格，或者覆盖某些组件的样式，可以考虑使用我们提供的 TinyThemeTool 工具。

3.1 自定义主题

v3.20.0 版本我们给 TinyThemeTool 增加了覆盖组件 CSS 样式的功能，使用方式如下：

ThemeData 是自定义主题数据格式，用户可以通过data属性，传入覆盖的全局 CSS 变量，通过css属性，传入有效的 CSS 规则块。

interface ThemeData { /** 主题的ID */ id?: string /** 主题的名称 */ name?: string /** 主题的中文名称 */ cnName?: string /** * 需要追加的全局css变量的对象 * 比如：{ 'tv-base-color-brand' : '#1476ff' } 会追加到 :root { --tv-base....... } * */ data?: Record<string, string> /** * 需要追加的样式规则, 以覆盖或扩充组件的样式 * 比如：.tiny-button { border:none; } * */ css?: string }

自定义主题的方式如下：

import TinyThemeToolfrom'@opentiny/vue-theme/theme-tool' const themeTool = newTinyThemeTool() themeTool.changeTheme({ name: 'my-app-custom-styles', data: { 'tv-base-color-brand': '#1476ff', 'tv-font-size-md': '12px', 'tv-font-size-lg': '16px', 'tv-font-size-xxl': '20px' }, css: ` .tiny-button { --tv-Button-border-radius: 6px; min-width: 80px; border:none; padding : 2px 20px; } .tiny-button.tiny-button--primary{ background-color: #508de3; } ` })

3.2 使用老主题或 Aurora 主题

我们不建议用户继续使用旧主题，对于历史项目，我们提供一组旧主题的CSS变量,需要用户在工程中适配。

如果你实在不喜欢我们提供的新主题，想使用老主题或者 Aurora 主题，你可以通过 ThemeTool 工具进行配置。

import TinyThemeTool, { tinyOldTheme, tinyAuroraTheme } from '@opentiny/vue-theme/theme-tool' const themeTool = new TinyThemeTool(tinyOldTheme) // 传入 tinyAuroraTheme 可以配置 Aurora 主题 // themeTool.changeTheme(tinyOldTheme) // 动态切换主题

3.3 对新主题进行定制

如果你喜欢我们的新主题，但觉得新主题有一部分样式我不喜欢，那么你也可以自由定制。

比如你觉得新主题太大了，想改成小尺寸，你可以在 App.vue 中加上以下样式，覆盖默认的主题变量。

:root { --tv-size-height-xs: 24px; // mini 尺寸 --tv-size-height-sm: 24px; // small 尺寸 --tv-size-height-md: 28px; // medium 尺寸 - 默认 --tv-size-height-lg: 32px; // large 尺寸 --tv-size-height-xl: 36px; // xLarge 尺寸 }

效果对比：