TinyVue華為云跨端跨框架企業(yè)級(jí) UI 組件庫

TinyVue 是一套跨端、跨框架的企業(yè)級(jí) UI 組件庫，支持 Vue 2 和 Vue 3，支持 PC 端和移動(dòng)端。

?? 特性：

• ?? 包含 80 多個(gè)簡(jiǎn)潔、易用、功能強(qiáng)大的組件
• ?? 一套代碼同時(shí)支持 Vue 2 和 Vue 3
• ??? 一套代碼同時(shí)支持 PC 端和移動(dòng)端
• ?? 支持國(guó)際化
• ?? 支持主題定制
• ?? 組件內(nèi)部支持配置式開發(fā)，可支持低代碼平臺(tái)可視化組件配置
• ?? 采用模板、樣式、邏輯分離的跨端、跨框架架構(gòu)，保障靈活性和可移植性

核心亮點(diǎn)

一套代碼同時(shí)支持 Vue 2 / Vue 3

隨著 Vue 3 的逐漸普及以及 Vue 3 開源生態(tài)的持續(xù)繁榮，未來將會(huì)有更多開發(fā)者投入 Vue 3 的懷抱，使用 Vue 3 開發(fā)新業(yè)務(wù)，同時(shí)存量的 Vue 2 項(xiàng)目也會(huì)逐漸遷移到 Vue 3 中來。

目前業(yè)界主流的 Vue 組件庫，要么只支持 Vue 3，要么分成 Vue 2 / Vue 3 兩套組件庫，Vue 2 版本用于 Vue 2 項(xiàng)目， Vue 3 版本用于 Vue 3 項(xiàng)目。

比如餓了么的ElementUI，其Element UI for Vue 2.0，而Element Plus for Vue 3.0。再比如 Ant Design of Vue，其 1.x 版本 for Vue 2.0，而 3.x 版本 for Vue 3.0。

由于 Vue 2 / Vue 3 兩套組件庫對(duì)應(yīng)兩套不同的代碼，難免存在組件功能和 API 不同步的情況，開發(fā)者如果要從 Vue 2 組件庫遷移到 Vue 3 組件庫，將面臨一定的成本和風(fēng)險(xiǎn)。

TinyVue 采用組件與框架分離的設(shè)計(jì)理念（Renderless 架構(gòu)），將組件拆分為三個(gè)構(gòu)成部分：組件模板、組件樣式和組件邏輯，并針對(duì) Vue 2 和 Vue 3 實(shí)現(xiàn)了一個(gè)版本適配器，抹平 Vue 2 和 Vue 3 的差異，實(shí)現(xiàn)一套代碼同時(shí)支持 Vue 2 和 Vue 3。

這樣不管是 Vue 2 項(xiàng)目還是 Vue 3 項(xiàng)目，使用組件的方式都是一樣的，可以實(shí)現(xiàn)無縫切換，極大地降低了 Vue 2 遷移到 Vue 3 的成本和風(fēng)險(xiǎn)。

一套代碼同時(shí)支持PC和移動(dòng)端

得益于 TinyVue 的 Renderless 架構(gòu)，我們不僅實(shí)現(xiàn)了一套代碼同時(shí)支持 Vue 2 和 Vue 3，還實(shí)現(xiàn)了一套代碼支持多端，這意味著：

• 我們支持 PC 和移動(dòng)端，同一個(gè)組件在不同終端表現(xiàn)不同

• 在多端場(chǎng)景下組件的使用方式完全相同

  

組件豐富，功能強(qiáng)大

PC 端包含 80 多個(gè)組件，移動(dòng)端包含 30 多個(gè)組件，Table、Tree、Select 等高頻組件均內(nèi)置虛擬滾動(dòng)，在大數(shù)據(jù)場(chǎng)景下保持絲滑體驗(yàn)。

除了業(yè)界組件庫都有的組件，我們也提供了一些 TinyVue 獨(dú)有的特色組件：

• Split 面板分隔器
• IpAddress IP 地址輸入框
• Calendar 日歷
• Crop 圖片裁切

歡迎大家體驗(yàn)和使用！

技術(shù)架構(gòu)

TinyVue 采用組件和框架分離的設(shè)計(jì)理念，支持跨端跨技術(shù)棧跨版本 Web 組件只有一套 API 接口，Web 組件可拆分為三個(gè)構(gòu)成部分：組件模板、組件樣式和組件邏輯。

組件模板借助 Renderless Component 無渲染組件的設(shè)計(jì)模式，分離出來的模板可以多樣化，以適配不同的終端，比如 PC 端模板和 Mobile 端模板。

React 組件的業(yè)務(wù)邏輯借助 React Hooks API，Vue 組件的業(yè)務(wù)邏輯借助 Vue Composition API，實(shí)現(xiàn)面向業(yè)務(wù)邏輯編程，這樣不同技術(shù)棧的相同業(yè)務(wù)邏輯代碼就匯聚到一起。React 技術(shù)棧的支持目前還處于規(guī)劃當(dāng)中，歡迎有志之士加入 OpenTiny 開源社區(qū)（添加 OpenTiny 微信小助手：opentiny-official），一起參與共建。

對(duì)于同一個(gè)技術(shù)棧的不同版本，比如 Vue 2 和 Vue 3 則可以做一個(gè)版本適配器，只要保證組件邏輯函數(shù)的輸入輸出保持統(tǒng)一即可。

技術(shù)架構(gòu)圖：

??? 如何使用

1. 安裝

執(zhí)行以下命令，安裝 Vue 3 版本的 TinyVue 組件庫：

npm i @opentiny/vue@3

執(zhí)行以下命令，安裝 Vue 2 版本的 TinyVue 組件庫：

npm i @opentiny/vue@2

2. 引入和使用

在App.vue文件中使用 TinyVue 組件。

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

<template>
  <tiny-button>TinyVue</tiny-button>
</template>

?? 參與貢獻(xiàn)

如果你對(duì)我們 TinyVue 開源項(xiàng)目感興趣，歡迎加入我們！