乐趣区

关于前端: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 🌟)

退出移动版