TinyVue

正在检查是否收录...

TinyVue - 华为云 OpenTiny 出品的企业级前端 UI 组件库，免费开源，同时支持 Vue2 / Vue3，自带 TinyPro 中后台管理系统

华为最新发布的前端 UI 组件库，支持 PC 和移动端，自带了 admin 后台系统，完成度很高，web 项目开发又多一个选择。

关于 OpenTiny 和 TinyVue

在上个月结束的

华为开发者大会2023

上，官方正式进行发布了

OpenTiny

，这是华为云出品的企业级设计体系统，一套前端 UI 组件库。适配 PC 端/移动端等多端，同时支持 Vue2 / Vue3 / Angular ，拥有主题配置系统 /

中后台模板

CLI 命令行

等效率提升工具，可帮助开发者高效开发 Web 应用。

据发布会说， OpenTiny 孵化自华为云和流程IT，经过九年持续打磨，服务于华为内外部上千个项目，是一个稳定可靠的组件库。

是 OpenTiny 组件的

Vue

实现，本文也主要介绍它。

核心亮点

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

开发上手体验

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 具有