探索TinyVue：跨端跨框架的企业级UI组件库

一、引言

1.1 背景与现状

在当今的前端开发领域，业务需求日益复杂且多样化。不同项目对前端框架的选择各异，Vue 2和Vue 3长期共存，同时要兼顾PC端和移动端开发需求。传统UI组件库难以满足开发者对高效开发、代码复用及跨平台兼容性的要求。

例如，许多组件库要么仅支持单一Vue版本，要么针对PC端和移动端需维护两套不同代码，这不仅增加开发成本，还导致组件功能和API不同步，给开发者带来极大困扰。

1.2 认识TinyVue

TinyVue是一套跨端、跨框架的企业级UI组件库，能解决上述难题。它凭借独特设计理念和强大功能特性，为开发者提供高效、便捷的开发方式。

它支持Vue 2和Vue 3，无论是存量Vue 2项目还是新的Vue 3项目，都能无缝适配。同时支持PC端和移动端，一套代码满足多端开发需求，大幅提高开发效率和代码复用性。

二、TinyVue的核心架构与特性

2.1 Renderless无渲染组件设计架构

2.1.1 架构原理

TinyVue采用的Renderless无渲染组件设计架构是实现跨端跨框架的核心技术。它将组件拆分为组件模板、组件样式和组件逻辑三部分。

这种分离使组件逻辑与具体渲染方式解耦，能更灵活适应不同终端和框架环境，为跨端跨框架能力奠定基础。

2.1.2 优势体现

• 灵活性：组件逻辑与模板、样式分离，开发者可依业务需求和场景自由组合、替换组件各部分，实现高度定制化开发。
• 可移植性：Renderless架构让TinyVue组件能轻松在不同前端框架和终端间移植，降低项目迁移和维护成本。

2.2 一套代码，多端多框架支持

2.2.1 同时支持Vue 2和Vue 3

在Vue生态中，Vue 2和Vue 3长期共存。TinyVue通过版本适配器抹平两者差异，实现一套代码同时支持两个版本。

开发者使用TinyVue时，在Vue 2和Vue 3项目中使用组件方式一致，无需担心版本兼容性，也不用为不同版本写不同代码，降低项目迁移成本和风险。

2.2.2 适配PC和移动端

TinyVue借助Renderless架构，一套代码同时支持PC端和移动端。能根据不同终端环境自动加载适配的组件模板和样式，使同一组件在PC端和移动端有不同表现。

例如，PC端表格组件展示更多列和详细信息，移动端则自动适应屏幕尺寸，采用简洁布局。且多端场景下组件使用方式相同，无需为不同终端写不同代码逻辑，提高开发效率。

三、TinyVue丰富的组件与功能

3.1 组件概览

TinyVue拥有100多个简洁、易用、功能强大的组件，涵盖PC端和移动端常见需求场景。

组件按功能和用途分类，包括导航组件、容器组件、表单组件、表格组件、数据组件、提示组件和其他组件等。无论开发何种应用，TinyVue都能提供相应组件支持，助开发者快速搭建功能丰富、界面美观的用户界面。

3.2 高频组件展示

3.2.1 Table表格组件（37种场景）

Table组件是TinyVue重要高频组件，常用于展示和处理大量数据。它内置虚拟滚动，大数据场景下也能保持丝滑体验，确保数据快速加载和流畅滚动。

还支持排序、筛选、分页、拖拽等常见数据操作功能，满足开发者数据展示和管理需求。如企业级管理系统中展示员工信息、订单数据等，Table组件能轻松胜任。

 

<tiny-grid
  :data="tableData"
  show-overflow="tooltip"
  :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
  :edit-rules="validRules"
>
</tiny-grid>
const validRules = {
  name: [
    { required: true, message: '名称必填' },
    { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
  ],
  area: {
    type: 'string',
    required: true,
    validator: (rule, value) => ['华东区', '华南区', '华中区'].includes(value),
    message: '区域格式不正确'
  },
  address: {
    type: 'string',
    validator: (rule, value) => {
      return new Promise((resolve, reject) => {
        if (!value) {
          reject(new Error('地址不能为空'))
        } else if (value.length > 10) {
          reject(new Error('地址过长'))
        } else {
          resolve()
        }
      })
    }
  }
}

import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'

const pagerConfig = ref({
  component: TinyPager,
  attrs: {
    currentPage: 1,
    pageSize: 5,
    pageSizes: [5, 10],
    total: 0,
    layout: 'total, sizes, prev, pager, next, jumper'
  }
})

3.2.2 Chart 图表组件

基于内部的 OpenTiny Charts 图表库封装，增加多主题适配能力，优化了图表的 UI 和交互，还提供低码化开发、Design Token、响应式、大数据性能优化以及无障碍能力等创新特性。

const options1 = ref({
  padding: [50, 30, 50, 20],
  legend: {
    show: true,
    icon: 'line'
  },
  data: [
    { Month: 'Jan', Domestics: 33, Abroad: 37 },
    { Month: 'Feb', Domestics: 27, Abroad: 39 },
    { Month: 'Mar', Domestics: 31, Abroad: 20 },
    { Month: 'Apr', Domestics: 30, Abroad: 15 },
    { Month: 'May', Domestics: 37, Abroad: 13 },
    { Month: 'Jun', Domestics: 36, Abroad: 17 },
    { Month: 'Jul', Domestics: 42, Abroad: 22 },
    { Month: 'Aug', Domestics: 22, Abroad: 12 },
    { Month: 'Sep', Domestics: 17, Abroad: 30 },
    { Month: 'Oct', Domestics: 40, Abroad: 33 },
    { Month: 'Nov', Domestics: 42, Abroad: 22 },
    { Month: 'Dec', Domestics: 32, Abroad: 11 }
  ],
  xAxis: {
    data: 'Month'
  },
  yAxis: {
    name: 'Percentage(%)'
  }
})

 

3.3 特色组件介绍

3.3.1 Split面板分隔器

Split面板分隔器是TinyVue独有的特色组件，允许用户拖动分隔条调整多个面板大小和布局。

在文件管理器、代码编辑器等需同时展示多区域内容的场景中，能提供灵活便捷的界面交互方式，让用户按需求自由调整各区域显示比例。

<div class="split-nest">
    <tiny-split v-model="split3">
      <template #left>
        <div class="demo-split-pane no-padding">
          <tiny-split v-model="split4" mode="vertical">
            <template #top>
              <div class="demo-split-pane">上面板</div>
            </template>
            <template #bottom>
              <div class="demo-split-pane">下面板</div>
            </template>
          </tiny-split>
        </div>
      </template>
      <template #right>
        <div class="demo-split-pane">右面板</div>
      </template>
    </tiny-split>
  </div>

 

3.3.2 IpAddress IP地址输入框

IpAddress IP地址输入框用于输入和验证IP地址。它提供直观输入界面和实时格式验证功能，确保用户输入IP地址格式正确。

在网络管理、服务器配置等应用中，能帮助用户快速准确输入IP地址，避免因输入错误导致的问题。

<tiny-ip-address v-model="value1" style="margin-bottom: 8px;"></tiny-ip-address>
<tiny-ip-address type="IPv6" v-model="value2"></tiny-ip-address>

 

3.3.3 Calendar日历

Calendar日历组件提供丰富日期选择和操作功能，支持选择年、月、日，设置日期范围、禁用特定日期等。

在预订系统、日程管理等场景中，可让用户选择日期。TinyVue的Calendar组件简洁易用、功能强大，满足用户日期选择需求。

 

3.3.3 Crop图片裁切

Crop图片裁切组件允许用户对图片裁剪，获取所需图片区域。它提供直观裁剪界面和多种裁剪模式，如按比例裁剪、自由裁剪等。

在图像处理、社交应用等场景中，能帮助用户轻松实现图片裁剪功能，满足用户对图片个性化处理需求。

四、使用TinyVue进行开发

4.1 安装与引入

4.1.1 安装步骤

安装TinyVue很简单，按使用的Vue版本执行相应命令即可。

若使用Vue 3版本，执行命令：npm i @opentiny/vue@3；若使用Vue 2版本，执行：npm i @opentiny/vue@2。

安装时，npm会自动下载并安装TinyVue及其相关依赖，确保项目环境具备使用条件。

4.1.2 引入组件

在项目中引入TinyVue组件也便捷。以在App.vue文件中引入Button组件为例，在Vue 3项目中：

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