关于前端:Web前端组件库OpenTiny项目如何使用

目前华为云出品的开源我的项目OpenTiny其中蕴含两个组件库我的项目一个是TinyVue还有一个是TinyNG当然还蕴含领有主题配置零碎/中后盾模板/TinyCli 命令行等效率晋升工具

说到Web前端组件库，OpenTiny其实是个十分不错的抉择，最近也是应用了下TinyVue和TinyNG两个组件库，具体说起来，首先想到的就是组件丰盛：次要有70+根底组件，1500+组件API，接口、性能和细节配置都是十分丰盛的，同时Table、Tree、Select等高频组件均内置虚构滚动，在10万大数据场景下放弃丝滑体验，性能是十分高的。而后就是TinyVue采纳组件与框架拆散的设计理念，将组件逻辑抽离成纯函数，实现跨端、跨框架、跨版本，灵便可配，适应将来。同时两个组件库是涵盖 Vue2/Vue3/Angular 多技术栈。并且反对数据驱动的配置式应用形式。最初其实TinyVue和TinyNG两个组件库都能够称得上企业级平安保障，所有接口杜绝 XSS 攻打，100% 平安释怀，节俭代码看护老本。并且组件库应用也是十分稳固的，通过九年继续打磨，服务于上千个我的项目，千锤百炼，稳固牢靠。

接着说下TinyVue是如何应用的：其实非常简单。

1. 将TinyVue导入您的我的项目中。您能够通过npm或者手动下载方式将TinyVue导入您的我的项目中。
2. 创立一个Vue实例。您能够在Vue实例中注册TinyVue的组件，以便在您的应用程序中应用这些组件。
3. 在Vue实例中应用组件。您能够在Vue模板中应用TinyVue组件，以便在您的应用程序中显示这些组件。 例如，假如您曾经将TinyVue导入您的我的项目中，并曾经创立了一个Vue实例，当初您能够依照以下形式在模板中应用TinyVue的Button组件：

以上代码展现了如何在Vue模板中应用TinyVue的Button组件。在模板中，能够像应用一般的HTML元素一样应用TinyVue的组件，同时也能够为它们设置事件监听器，以便在用户与这些组件交互时，对这些事件进行响应。

再说下TinyNG是如何应用的：

1. 下载并导入TinyNG组件库的CSS和JS文件到我的项目中。
2. 在HTML文件中引入相干的CSS和JS文件。
3. 在页面中应用组件库提供的组件和工具。

例如，应用按钮组件：

当然，除了按钮组件，还有很多其余的组件和工具，能够依据理论需要应用。

其实具体的能够间接进入OpenTiny官网 外面有具体的文档阐明并提供了具体的组件和工具的应用阐明和示例代码，应用起来也是十分方面。现如今组件库其实十分多，OpenTiny外围劣势也是非常明显。所以大家感兴趣也能够去尝试下。

如果你OpenTiny的开源我的项目感兴趣，也能够增加小助手微信：opentiny-official，拉你进群，一起交换前端技术，一起玩开源。

OpenTiny 官网：https://opentiny.design/

OpenTiny 代码仓库：https://github.com/opentiny/

TinyVue 组件库：https://github.com/opentiny/tiny-vue （欢送 Star 🌟）

TinyNG 组件库：https://github.com/opentiny/ng （欢送 Star 🌟）

TinyCli工具: https://github.com/opentiny/tiny-cli （欢送 Star 🌟）