跳到主要内容

文档

安装

了解从哪里下载 UIkit，以及如何编译 UIkit 的源码，再把它们引入到自己的项目中。

下载

要获取 UIkit，你有下面几种可选方式，可以按项目的实际情况任选其一，具体取决于你是否需要改动源码：

所有 UIkit 版本的编译产物同时也托管在 jsDelivr 内容分发网络上，你可以通过 jsdelivr.com 浏览这些文件，也可以把下面的地址直接写进自己的页面中引用。

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

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

注意 最新的子资源完整性（SRI）哈希值可以从 jsDelivr 获取；在引用 CDN 文件时一并写上该哈希值，浏览器就能校验所加载的文件确实来自官方发布、并且没有被篡改。

源码的文件结构

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 主题，构建任务还会生成更多额外的文件，例如主题专用的 CSS 和 JS 版本。生成的目录结构大致如下：样式文件放在 css 子目录中，脚本文件放在 js 子目录中，两者都各自提供了压缩过的版本、只含基础功能的核心版本，以及从右到左排版的版本。

/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，可以使用项目自带的构建脚本，让它保持运行并监听文件变化，编译结果会随时写入 dist 文件夹，方便你在本地调试主题或组件。

pnpm watch