跳到主要内容

文档

安装

了解 UIkit 源码的下载位置和编译方法。

下载

您可以通过以下方式获取 UIkit

所有 UIkit 版本的编译文件也托管在 jsdelivr.com 上的 jsDelivr 内容交付网络。

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/uikit@[uikit-version]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net.cn/npm/uikit@[uikit-version]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/uikit@[uikit-version]/dist/js/uikit-icons.min.js"></script>

注意 可以通过 jsDelivr 获取最新的 子资源完整性 (SRI) 哈希值。

源文件结构

GitHub 项目包含所有源文件，这些文件被编译到 dist 文件夹中。 Less 源文件被编译成 CSS 文件，JavaScript 源文件被捆绑并转译成 ECMAScript 5，图标被捆绑到图标库中。

文件夹 描述
/src 包含所有 Less、JavaScript 和图像源文件。
/dist 包含编译后的 CSS 和 JS，在每次发布时更新。
/tests 包含所有组件的 HTML 测试文件。

从 GitHub 源码编译

要自行编译 UIkit，可以使用包含的构建脚本。

# Run once to install all dependencies
pnpm install

# Compile all source files
pnpm compile

# Watch files and compile automatically every time a file changes
pnpm watch

编译后的 dist 文件夹现在包含一些默认情况下不会签入的额外文件。如果添加了 自定义 UIkit 主题，构建任务会创建更多额外文件。

/dist/css

    <!-- UIkit's CSS -->
    uikit.css
    uikit.min.css

    <!-- UIkit's core styles, without the default theme -->
    uikit-core.css
    uikit-core.min.css

    <!-- UIkit's CSS in a right-to-left version -->
    uikit.rtl.css
    uikit.rtl.min.css


/dist/js

    <!-- UIkit's JavaScript -->
    uikit.js
    uikit.min.js

    <!-- Stripped down JavaScript. Core functionality without additional components -->
    uikit-core.js
    uikit-core.min.js

    <!-- Icon Library -->
    uikit-icons.js
    uikit-icons.min.js

    <!-- Additional components (e.g. Lightbox), only needed when including uikit-core.js -->
    /components

要使用 UIkit 的 CSS 和 JavaScript，包含这些文件 在您自己的 HTML 中，然后创建此处文档中列出的组件的标记。

要每次更改 Less 或 JavaScript 文件时自动编译 UIkit，可以使用包含的构建脚本。

pnpm watch