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

你好，我是 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位贡献者参与开发，感谢朋友们的辛苦付出

你可以更新 @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更美观、更符合现代风格。

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 TinyThemeTool from '@opentiny/vue-theme/theme-tool'

const themeTool = new TinyThemeTool()

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 尺寸

}

效果对比：

除了以上优化之外，我们还对社区朋友们提到的以下问题进行了优化：

将按钮组件默认的全圆角改成了小圆角，用户可以通过配置 round 属性为 true 来设置大圆角

欢迎大家体验我们的 TinyVue 组件库，并在评论区进行反馈和交流~

联系我们

GitHub：https://github.com/opentiny/tiny-vue（欢迎 Star ）

官网：https://opentiny.design/tiny-vue

B站：https://space.bilibili.com/15284299

个人博客：https://kagol.github.io/blogs

小助手微信：opentiny-official

公众号：OpenTiny