为何 UIkit 轻量级模块化前端框架在国外这么火？

大家好，欢迎来到IT知识分享网。

大家好，很高兴又见面了，我是”高级前端‬进阶‬”，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 UIkit

A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit 是一个轻量级、模块化的前端框架，用于开发快速、强大的 Web 界面。

UIkit 框架受益于一个强大且积极参与的、熟悉 UIKit 的开发者社区。 UIKit 的命令式语法为开发人员提供了更广泛的自定义选项，从而增强了对 UI 的美观和用户体验的控制。开发者可以通过以下方式获取 UIkit：

下载带有预构建 CSS 和 JS 的最新版本。
使用 npm 安装以获取 GitHub 上提供的所有源文件：npm install uikit
使用 yarn 安装以获取 GitHub 上提供的所有源文件：yarn add uikit
使用 pnpm 安装以获取 GitHub 上提供的所有源文件：pnpm add uikit
直接从 jsDelivr 加载 UIkit：https://www.jsdelivr.com/package/npm/uikit
克隆存储库以获取包括构建脚本在内的所有源文件： git clone :ui

目前 UIkit 在 Github 通过 MIT 协议开源，有超过 20k 的 star、2.3k 的 fork，是一个优质的前端开源项目。

2.如何使用 UIkit

2.1 UIkit 基础用法

安装 UIkit 后，需要将 JavaScript 文件添加到 <head> 部分，开发者还可以选择使用 defer 属性来延迟脚本执行。

<script src="js/uikit.min.js"></script> <script src="js/uikit-icons.min.js"></script>

UIkit 会侦听 DOM 操作，并在组件插入 DOM 或从 DOM 中删除时自动初始化、连接和断开组件。这样就可以轻松地与 Vue.js 和 React 等 JavaScript 框架一起使用。

开发者可以通过向 HTML 元素添加 uk-* 或 data-uk-* 属性来使用 UIkit 组件，而无需编写一行 JavaScript。这是 UIkit 使用其组件的最佳实践，应该始终首先考虑。

<div uk-sticky="offset: 50;"></div> <div data-uk-sticky="offset: 50;"></div> // React 仅适用于 data-uk-* 前缀。

还可以通过 JavaScript 初始化组件并将其应用到文档中的元素：

var sticky = UIkit.sticky('#sticky', { offset: 50 });

还可以通过将选择器或元素作为第一个参数传递给组件函数来检索已初始化的组件：

var sticky = UIkit.sticky('#sticky'); // 省略第二个参数不会重新初始化组件，而是充当 getter 函数

2.2 编程使用

通过编程方式，组件可以使用 JavaScript 中的元素、选项参数格式进行初始化。 element 参数可以是任何 Node、选择器或 jQuery 对象。开发者将收到初始化的组件作为返回值，函数组件（例如通知）应省略元素参数。

// Passing a selector and an options object. var sticky = UIkit.sticky('.sticky', { offset: 50, top: 100 }); // Functional components should omit the 'element' argument. var notifications = UIkit.notification('MyMessage', 'danger');

初始化后，可以通过调用相同的初始化函数来获取组件，省略 options 参数。

// Sticky is now the prior initialised components var sticky = UIkit.sticky('.sticky');

以编程方式初始化组件使开发者可以直接调用它们的函数：

UIkit.offcanvas('#offcanvas').toggle();

任何带有下划线前缀的组件函数和变量都被视为内部 API 的一部分，可能会在任何给定时间发生变化。

每个组件都会触发可以做出反应的 DOM 事件。例如，当显示 Modal 或 Scrollspy 元素变得可见时。

UIkit.util.on('#offcanvas', 'show', function () { // do something });

更多关于 UIkit 的用法可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/uikit/uikit

https://getuikit.com/docs/javascript

https://blog.openreplay.com/how-to-create-a-uikit-website–a-tutorial-for-beginners/

https://www.youtube.com/watch?app=desktop&v=DFsENma-PAk

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/116243.html