探索 TinyVue 组件库系列之入门指南1：概述

Kagol

20人浏览 · 2025-12-25 14:10:57

Kagol · 2025-12-25 14:10:57 发布

你好，我是 Kagol，个人公众号：前端开源星球。

TinyVue 是一个企业级 UI 组件库，旨在为构建现代 Web 应用程序提供全面的解决方案。它以灵活性和跨平台兼容性为核心设计理念，提供 104+ 个简洁、易用且功能强大的组件，可无缝运行于 Vue.js 2 和 Vue.js 3，以及 PC 和移动设备。该库强调一套代码的理念——相同的组件代码可在不同的 Vue 版本和设备平台上运行，显著降低了企业应用的维护成本。

核心架构

TinyVue 采用先进的无渲染组件架构，将展示逻辑与业务逻辑分离。这种设计模式使组件能够在不同场景下高度定制和复用。该架构基于使用 pnpm workspaces 的monorepo 结构构建，高效管理多个相互依赖的包，同时确保整个代码库的版本一致性。

无渲染方法意味着组件没有固定的展示层——相反，它们暴露纯逻辑，可被任何 UI 模板或框架消费。这使得 TinyVue 特别适合低代码平台和需要通过配置驱动开发进行大量定制的场景。

架构图

核心特性

TinyVue 提供了一套为企业级应用设计的全面功能：

特性	描述
跨版本兼容性	通过 vue-common 适配器层，一个代码库同时支持 Vue.js 2 (2.6/2.7) 和 Vue.js 3 (3.4+)
跨平台支持	相同的组件可在 PC 和移动设备上运行，并提供专门的移动优先模式
104+ 组件	涵盖表单、数据展示、导航、反馈等方面的丰富组件库
无渲染架构	逻辑与展示分离，实现最大程度的定制化和框架可移植性
主题定制	包含设计令牌的完整主题系统，提供标准、暗色、Aurora 和 SaaS 主题
国际化	内置 i18n 支持，提供多地区语言包
配置驱动	组件支持配置驱动开发，非常适合低代码平台
TypeScript 支持	完整的 TypeScript 支持，提升开发体验

可视化项目结构

monorepo 结构组织为三个主要目录，每个目录都有明确的用途：

    tiny-vue/
    ├── packages/                    │   ├── vue/                    # 主组件库（104+ 组件）
    │   │   ├── src/                # 组件实现
    │   │   ├── pc.ts              # PC 端组件入口
    │   │   ├── mobile-first.ts    # 移动优先组件入口
    │   │   └── index.ts           # 所有组件入口
    │   ├── renderless/            # 逻辑/无渲染层
    │   ├── vue-common/            # Vue 2/3 兼容适配器
    │   ├── theme/                 # 基础主题系统
    │   ├── theme-saas/           # SaaS 主题变体
    │   ├── vue-icon/             # 图标组件
    │   ├── vue-hooks/            # Vue hooks 和组合式 API
    │   ├── vue-directive/        # Vue 指令
    │   ├── vue-locale/           # 国际化
    │   ├── utils/                # 工具函数
    │   └── vue-runtime/          # 运行时支持
    ├── examples/                   # 示例代码和文档
    │   ├── vue3/                 # Vue 3 开发环境
    │   ├── vue2/                 # Vue 2 开发环境
    │   └── sites/                # 官方文档站点
    └── internals/                 # 内部工具和构建脚本
        ├── cli/                  # 构建和 CLI 工具
        ├── automate/             # 自动化脚本
        └── unplugin-virtual-template/  # Vite 插件

组件架构模式

每个 TinyVue 组件都遵循一致的三层架构：

无渲染层 (packages/renderless/src/)：包含纯业务逻辑，无 UI 依赖。例如，Button 组件的 handleClick 函数管理点击事件、计时器逻辑和状态变更，不涉及任何 DOM 操作 packages/renderless/src/button/index.ts
适配器层 (packages/vue-common/src/adapter/)：通过抽象框架特定 API 提供 Vue 2/3 兼容性。这使得相同的无渲染逻辑可在不同 Vue 版本上工作 packages/vue-common/src/adapter/index.ts
展示层 (packages/vue/src/)：包含实际的 UI 模板，有独立的 PC 和移动端变体。例如，Button 组件有独立的 PC 和移动优先 Vue 文件，它们消费相同的无渲染逻辑 packages/vue/src/button/

这种分离实现了真正的跨平台和跨框架可移植性——理论上，无渲染逻辑可以与 React、Angular 或其他框架一起使用，只需替换展示层即可。

开发环境

开始使用 TinyVue 开发，你需要安装 Node.js 18+ 和 pnpm 9.5+。该项目使用 pnpm workspaces 高效管理多个包的依赖 package.json。提供 Vue 2 和 Vue 3 的开发环境：

Vue 3：运行 pnpm dev 启动 Vue 3 开发服务器，访问 http://127.0.0.1:7130/
Vue 2：运行 pnpm dev2 启动 Vue 2 开发环境
文档：运行 pnpm site 在本地启动官方文档站点

monorepo 使用 pnpm catalog 对 Vue、TypeScript、Vite 和 Playwright 等核心依赖进行统一版本管理。这确保了所有包的一致性，并使升级变得简单 pnpm-workspace.yaml。

安装和使用

安装 TinyVue 非常简单。对于 Vue 3 应用程序：

    npm i @opentiny/vue@3

对于 Vue 2 应用程序：

    npm i @opentiny/vue@2

安装后，你可以这样使用组件：

<script lang="ts" setup>
  import { Button as TinyButton } from '@opentiny/vue'
</script>
 
<template>
  <tiny-button>Tiny Vue</tiny-button>
</template>

这种简洁性掩盖了其复杂的底层架构——你使用的 Button 组件由无渲染逻辑、Vue 2/3 适配器和主题基础设施支撑，使其在不同平台上保持一致的工作方式。