TinyVue 轻量级Vue UI组件库

TinyVue是OpenTiny社区开发的UI组件库，支持Vue.js 2和Vue.js 3，为开发者提供一个易于使用的组件集合，适用于PC和移动设备。

104个组件：TinyVue提供了104个易用、功能强大的组件。

跨版本支持：一个代码库，支持Vue.js 2和Vue.js 3。

跨平台支持：一个代码库，支持PC和移动设备。

国际化：支持国际化。

主题定制：支持主题定制。

配置开发：组件支持配置开发，可以支持低代码平台。

灵活架构：采用跨端和跨框架的架构，灵活可移植。

使用方法

安装

使用以下命令安装TinyVue组件库：

Vue.js：

npm i @opentiny/vue@3

Vue.js 2：

npm i @opentiny/vue@2

导入组件

在App.vue文件中导入并使用TinyVue组件，例如<tiny-button>：

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

<template>
  <tiny-button> Tiny Vue </tiny-button>
</template>

开发

通过以下步骤进行开发TinyVue：

1、克隆项目：

git clone [email protected]:opentiny/tiny-vue.git
cd tiny-vue

2、安装依赖：

对于Vue.js 3：

pnpm i
pnpm dev

对于Vue.js 2：

pnpm i
pnpm dev2

Element项目：TinyVue在设计初期借鉴了基于Vue.js的旧组件库Element，兼容Element的组件API。

Floating UI项目：这是一个小型库，帮助创建“浮动”元素，如工具提示、弹出窗口、下拉菜单等，TinyVue的许多组件都基于Floating UI提供的功能。

vxe-table项目：这是一个基于Vue的表格组件，支持丰富的功能，TinyVue的Grid组件基于vxe-table。

sortablejs项目：这是一个强大的拖放库，TinyVue的Grid/Transfer/Tabs等组件的拖放排序功能基于Sortable。

@adamwathan的文章：Renderless Components in Vue.js，启发了TinyVue的无渲染组件设计最终实现了TinyVue项目的跨端和跨框架能力。