savor-ui

savor-ui

基于 Vue3 Vapor 模式打造的轻量自用 UI 组件库

savor-ui 是一款轻量级 UI 组件库，专为 Vue Vapor 编译模式 设计，针对性适配 Vapor 编译特性，全部采用组合式 Api编写，主打轻量化、高性能、高定制化，适配现代前端工程化开发场景。

本组件库为个人自用开源组件库，整合多款主流优秀 Vue UI 组件库的设计思路与交互逻辑，优化适配 Vapor 专属编译规则，保留简洁易用的开发体验，同时支持灵活的主题自定义能力，满足日常后台系统、中后台业务页面开发需求。

• 专属适配：仅支持 Vue3 Vapor 编译模式，不兼容 Runtime 模式，深度适配 Vapor 编译优化特性，打包体积更小、运行性能更高

• 轻量高效：组件轻量化封装，无冗余依赖，按需加载友好，适配现代化工程化项目

• 主题定制：内置完整明暗主题体系，支持全局一键主题切换、主色自定义、样式灵活覆盖

• 规范统一：参考主流企业级组件库设计规范，交互逻辑统一，降低开发上手成本

项目部分组件设计、交互逻辑、主题配置方案参考以下业界优秀开源组件库，特此致谢！

• Element Plus：Vue3 主流企业级组件库，成熟的组件交互与设计体系

• Arco Design Vue：字节跳动出品，优秀的按需加载、主题配置与工程化适配方案

• Antdv Next：参考 Ant Design v6 设计规范，灵活的主题算法与现代化 UI 设计

• Naive UI：高质量、类型完备的 Vue3 组件库，严谨的组件设计逻辑

• Prime Vue：功能丰富的跨端 UI 组件库，多样化业务组件交互参考

• Vexip UI：轻量化、高自定义的 Vue3 组件库设计思路

快速开始

文档地址

适配 Vue3 最新 Vapor 编译模式，最低版本要求：

vue >= 3.6.0-beta.11

注意：本组件库仅支持 Vue Vapor 编译模式，不支持 IE 浏览器及传统 Vue3 Runtime 编译模式。

推荐使用 pnpm 安装（极速、节省磁盘空间）

pnpm add savor-ui

在项目入口文件全局引入组件库及样式，完成全局注册：

import { createVaporApp } from "vue";
import App from "./App.vue";
import SavorUI from "savor-ui";

// 引入组件库全局主题样式
import "savor-ui/theme/index.scss";

const app = createVaporApp(App);
// 全局注册所有 SavorUI 组件
app.use(SavorUI);
app.mount("#app");

组件库内置明暗两套主题，通过 s-config-provider 全局配置组件实现全局主题、主色值自定义，支持动态切换主题：

<template>
  <!-- 全局主题配置包裹根路由，全局生效 -->
  <s-config-provider :theme="theme">
    <VaporRouterView />
  </s-config-provider>
</template>

<script lang="ts" setup vapor>
  import { reactive } from "vue";
  import { VaporRouterView } from "vue-router";

  // 自定义明暗主题主色及配置
  const theme = reactive({
    // 亮色主题配置
    lightTheme: {
      colorPrimary: "#1890ff", // 全局主色
    },
    // 暗色主题配置
    darkTheme: {
      colorPrimary: "#1890ff", // 全局主色
    },
  });
</script>