免费开源企业级前端 UI 组件库——TinyVue

华为云出品的企业级设计系统OpenTiny，是一套前端UI组件库。适用于PC/移动终端，支持Vue2/Vue3/Angular，拥有主题配置系统/中后台模板/CLI命令行等效率提升工具，可以帮助开发者高效开发Web应用。

免费开源说明

OpenTiny是华为内部的一个优秀实践。经过多年的迭代和内部项目测试，它已经完全接受了开源。整个项目基于MIT开源协议开源，源代码托管在Github上，企业和个人开发者可以免费下载使用，也可以用于商业项目。

OpenTiny 的技术特性

1、一套代码同时支持 Vue 2 和 Vue 3，抹平了两个版本的语法差异，大大降低了从 Vue 2 迁移到 Vue 3 的成本和风险；
2、一套代码同时支持 PC 和移动端，TinyVue 实现了一套代码支持多个客户端，这意味着同一个组件在不同终端表现是不一样的，在多端场景下，组件的使用方式完全相同；
3、组件丰富。 PC 端有 80+ 组件，移动端有 30+ 组件，包括高频组件 table tree、 select 等，内置虚拟滚动，保证大数据场景下的流畅体验。此外，还提供了一些独有的特色组件，如 split 面板分割器、 IP 地址输入框、 Calendar 日历、图片裁切等；
4、提供开箱即用的中后台模板。 内置了 TinyPro 中后台 admin 模板，支持 Vue 框架包含 10 多个实用功能和 20 多个典型页面场景，目前有中后台应用和云服务控制台应用两套典型页面模板，分别适用于中后台和云服务控制台应用；
5、提供了跨平台的前端工具化 CLI 工具。 TinyCLI 有一系列开发套件及工程插件，覆盖前端开发的整个链路，保证团队开发过程的一致性和可复制性，提升前端开发效率；
6、提供强大的主题配置系统。 提供了一款旨在提高开发效率的主题配置系统 Tiny SEAM，让我们可以轻松应对 Web 应用的多变风格；
7、支持国际化。

开发上手体验

TinyVue是基于Vue的UI组件库，交互精致，设计优雅。它有很多独特的组件，比如云服务中经常遇到的IP地址输入框组件，体验非常好。整体来看，并不逊色于Element/Ant Design等知名前端组件库。

TinyVue可以同时支持Vue 2.0和Vue 3.0。这种支持不是我们通常理解的。我们可以选择用Vue 2或者Vue 3来开发，但是只需要同时写一套代码来支持就可以了。我们根本不用考虑两个版本的语法差异。

安装 Tiny Vue

以 Vue 3 为例：

yarn add @opentiny/vue@3
# 或者
npm install @opentiny/vue@3

组件使用

然后就可以在 Vue 页面中引入组件：

<template>
  <div>
    <tiny-button>TinyVue</tiny-button>
    <tiny-alert description="TinyVue"></tiny-alert>
  </div>
</template>

<script>
import { Button, Alert } from '@opentiny/vue'

export default {
  components: {
    TinyButton: Button,
    TinyAlert: Alert
  }
}
</script>

TinyVue 是一个基础的前端组件库，很多时候都是用来开发 admin 项目后台管理系统的，而 OpenTiny 已经基于 TinyVue 为我们做好了一套管理系统 TinyPro，包含了一下常用的 admin 功能：

1、路由和菜单
2、主题配置
3、国际化
4、mock 模拟数据
5、状态管理
6、权限控制
7、云服务支持

进入TinyVue官网