牛逼！华为出品的跨端、跨框架的 UI 组件库

大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。

大家好，我是爱分享的了不起~

前言

在华为开发者大会2023上，官方正式进行发布了 OpenTiny，这是华为云出品的企业级设计体系统，一套前端 UI 组件库。适配 PC 端/移动端等多端，完成度很高。至此，web 项目开发又多一个选择。

TinyVue 是 OpenTiny 组件的 Vue 实现，本文也主要介绍它。

一套代码同时支持 Vue 2 和 Vue 3，抹平了两个版本的语法差异，大大降低了从 Vue 2 迁移到 Vue 3 的成本和风险；

目前有中后台应用和云服务控制台应用两套典型页面模板，分别适用于中后台和云服务控制台应用。

安装使用

在项目的根目录中，打开控制台，执行以下命令，为 Vue 3.0 的项目安装 TinyVue 组件库 ：

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


如果是Vite 工程，安装完依赖后，修改项目的 vite.config.js ，添加以下代码突出显示的部分：

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [vue()],
define: {
'process.env': { ...process.env }
}
})


接着就能想是其他组件那样，从依赖包 @opentiny/vue 中引用多个组件。


TinyVuetiny-button>
tiny-alert>
div>


用法和我们使用Element-ui一样。因此，上手难度几乎为0。

组件示例展示

现在，让我们简单来几个示例体验下效果。

第一个不得不说的就是引导组件。对于简单的网站引导操作功能，再也不用重新引入其他库啦~

第二个，里程碑组件。

说实在的，很有中国味儿~

再来看看弹窗组件。

当然，还有很重要的表单组件。

还有关于图表的一套良心组件。这是我特别喜欢的。

基于 eCharts 封装，一个纯 Javascript 的图表库。不用再引入第三方图表库了。

TinyVue中还有很多实用的组件，这里就不一一赘述啦~

其他

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

关于 TinyVue 组件更加详细的使用方式，请查阅官方文档哦。

TinyVue官网 https://opentiny.design/tiny-vue/zh-CN/overview

欢迎加入了不起的程序员读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~