在 Web 前端开发领域，UI 框架的选择往往令人眼花缭乱：Bootstrap、Foundation、Semantic UI、Tailwind CSS……每个框架都有其独特的设计理念和适用场景。然而，有一款框架以其轻量化、模块化、高度可定制的特性，在众多选择中独树一帜——它就是 UIkit。
UIkit 由 YOOtheme 团队开发并维护，是一个轻量级、模块化的前端框架，用于快速开发强大的 Web 界面。与 Bootstrap 的“开箱即用”不同，UIkit 更像是一套“乐高积木”——它提供了 30 多个独立、可组合的组件，开发者可以根据需求自由选择，按需组合，而不是被迫接受一整套预设样式。
UIkit 的设计哲学可以概括为三个关键词：轻量、模块化、可扩展。它的所有组件都采用 uk- 前缀命名，避免与其他框架样式冲突；它使用 Less 作为 CSS 预处理器，方便开发者深度定制主题；它基于 Flexbox 构建栅格系统，完美支持响应式布局。
本文将系统全面地梳理 UIkit 的核心知识点，从其设计哲学到安装配置，从栅格系统到组件体系，从 JavaScript 交互到主题定制，帮助读者全面掌握这一轻量级前端框架。
一、UIkit 概述
1.1 什么是 UIkit
UIkit 是一个轻量级且模块化的前端框架，用于开发快速、强大的 Web 界面。它提供了全面的 HTML、CSS 和 JS 组件集合，使用简单、易于定制和扩展。UIkit 是开源的，采用 MIT 许可证，完全免费，可以不受任何限制地使用、复制、合并、发布和分发。
https://ltglu.cn/
UIkit 的核心特性可以概括为以下几点：
1.2 UIkit 与其他框架的对比
选择 UIkit 的场景：
追求轻量化、高性能的项目
https://www.ltglu.cn/
需要深度定制视觉风格的项目
想要按需加载组件，避免冗余代码
偏好 Less 预处理器
1.3 版本说明
UIkit 目前主要有两个大版本：
UIkit 2.x：早期版本，使用较少，建议新项目使用 3.x
UIkit 3.x：当前稳定版本，全面采用 Flexbox，性能更优
本教程基于 UIkit 3.x 版本。当前最新稳定版本为 3.25.15.
二、安装与快速入门
2.1 安装方式
UIkit 提供了多种安装方式，适应不同的开发环境。
方式一：CDN 引入（最快速）
<!-- 引入 UIkit 核心 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.25.15/dist/css/uikit.min.css">
<!-- 引入 UIkit 核心 JS（包含所有交互组件） -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.25.15/dist/js/uikit.min.js"></script>
<!-- 引入 UIkit 图标库（可选） -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.25.15/dist/js/uikit-icons.min.js"></script>
方式二：npm 安装（推荐工程化项目）
# 安装核心库
npm install uikit
# 或使用 yarn
yarn add uikit
# 或使用 pnpm
pnpm add uikit
在项目中引入：
// 引入 UIkit 样式
import 'uikit/dist/css/uikit.min.css';
// 引入 UIkit 核心 JS
import UIkit from 'uikit';
// 引入图标库
import Icons from 'uikit/dist/js/uikit-icons';
// 注册图标库
UIkit.use(Icons);
方式三：下载源码
# 克隆 GitHub 仓库
git clone https://github.com/uikit/uikit.git
2.2 第一个 UIkit 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UIkit 快速上手</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.25.15/dist/css/uikit.min.css">
</head>
<body>
<div class="uk-container">
<h1 class="uk-heading-divider">欢迎使用 UIkit</h1>
<div class="uk-grid" uk-grid>
<div class="uk-width-1-2">
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">卡片标题</h3>
<p>这是卡片内容，展示 UIkit 的基础组件。</p>
<button class="uk-button uk-button-primary">按钮</button>
</div>
</div>
<div class="uk-width-1-2">
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">另一个卡片</h3>
<p>UIkit 的样式轻量美观，开箱即用。</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.25.15/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.25.15/dist/js/uikit-icons.min.js"></script>
</body>
</html>
2.3 在 Vue 3 项目中使用
<template>
<div class="uk-container">
<h1 class="uk-heading-divider">UIkit + Vue 3</h1>
<div class="uk-grid" uk-grid>
<div class="uk-width-1-2">
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">示例卡片</h3>
<p>{
{ message }}</p>
<button
class="uk-button uk-button-primary"
@click="handleClick"
>
点击按钮
</button>
</div>
</div>
<div class="uk-width-1-2">
<div class="uk-card uk-card-secondary uk-card-body">
<h3 class="uk-card-title">计数器</h3>
<p class="uk-text-large">{
{ count }}</p>
<button
class="uk-button uk-button-secondary"
@click="count++"
>
增加
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import 'uikit/dist/css/uikit.min.css';
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
// 注册图标
UIkit.use(Icons);
const message = ref('欢迎使用 UIkit + Vue 3');
const count = ref(0);
const handleClick = () => {
UIkit.notification({
message: '按钮被点击了！',
status: 'primary',
pos: 'top-right',
timeout: 2000
});
};
</script>
2.4 在 React 项目中使用
import React, { useState } from 'react';
import 'uikit/dist/css/uikit.min.css';
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
// 注册图标
UIkit.use(Icons);
function App() {
const [count, setCount] = useState(0);
const showNotification = () => {
UIkit.notification({
message: '欢迎使用 UIkit + React！',
status: 'success',
pos: 'top-center',
timeout: 2000
});
};
return (
<div className="uk-container">
<h1 className="uk-heading-divider">UIkit + React</h1>
<div className="uk-grid" uk-grid>
<div className="uk-width-1-2">
<div className="uk-card uk-card-default uk-card-body">
<h3 className="uk-card-title">React 计数器</h3>
<p className="uk-text-large">{count}</p>
<button
className="uk-button uk-button-primary"
onClick={() => setCount(count + 1)}
>
增加
</button>
</div>
</div>
<div className="uk-width-1-2">
<div className="uk-card uk-card-primary uk-card-body">
<h3 className="uk-card-title">通知演示</h3>
<button
className="uk-button uk-button-secondary"
onClick={showNotification}
>
显示通知
</button>
</div>
</div>
</div>
</div>
);
}
export default App;
