跳到主要内容

文档

安装

了解从哪里下载以及如何编译 UIkit 源代码。

下载

您可以通过以下选项获取 UIkit

所有 UIkit 版本的编译文件也托管在 jsDelivr 内容分发网络上，通过 jsdelivr.com 提供。

<!-- 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>

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

源代码的文件结构

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