安装

了解在哪里下载以及怎样编译 UIkit 源码。

下载

你可以通过以下途径获取 UIkit：

  • 下载最新版本的预构建的 CSS 和 JavaScript。
  • 与 Yarn 一起安装以获得预构建的JavaScript，CSS和Less源文件。在将UIkit应用于典型的Web项目时，建议这样做： yarn add uikit
  • 克隆仓库以获取包括构建脚本在内的所有源文件：git clone git://github.com/uikit/uikit.git

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

<!-- 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内容分发网络上jsDelivr获得。

源文件结构

Github 项目包含了被编译到dist文件夹中的所有源文件。 Less 源文件将被编译成为 CSS 文件，将JavaScript源代码打包并转换为了ECMAScript 5，同时将图标打包到图标库中。

文件夹 描述
/src 包含所有LESS，JavaScript和图片源文件。
/dist 包含已编译的CSS和JS，并在每个发行版上进行了更新。
/tests 包含所有组件的HTML测试文件。

从Github源码编译

需要自己动手编译 UIkit，你可以使用已有的构建脚本。

# 运行一次以安装所有依赖项
yarn

# 编译所有源文件
yarn compile

# 监视文件并在文件每次更改时自动进行编译
yarn watch

编译完成后，在dist 文件夹中还有一些额外的文件，默认情况下它们不会被检查。如果你添加了自定义 UIkit主题，那么构建任务会创建更多的额外文件。

/dist/css

    <!-- UIkit的CSS -->
    uikit.css
    uikit.min.css

    <!-- UIkit核心样式，没有默认主题 -->
    uikit-core.css
    uikit-core.min.css

    <!-- UIkit CSS RTL版本-->
    uikit.rtl.css
    uikit.rtl.min.css

/dist/js

    <!-- UIkit的JavaScript -->
    uikit.js
    uikit.min.js

    <!-- 精简了JavaScript。 核心功能，无需其他组件 -->
    uikit-core.js
    uikit-core.min.js

    <!-- 图标库 -->
    uikit-icons.js
    uikit-icons.min.js

    <!-- 其他组件（例如Lightbox），仅在包含uikit-core.js时才需要 -->
    /components

要使用 UIkit 的 CSS 和 JavaScript，要在你的 HTML文件中引入这些文件然后根据文件中列出的任意组件来添加它们的代码标签。

要在每次更改LESS或JavaScript时自动编译UIkit，可以使用随附的构建脚本。

yarn watch

上一篇： Introduction

下一篇： Less

installation.md

# 安装

<p class="uk-text-lead">了解在哪里下载以及怎样编译 UIkit 源码。</p>

## Download-下载

你可以通过以下途径获取 UIkit：

- 下载[最新版本](https://github.com/uikit/uikit/releases/latest)的预构建的 CSS 和 JavaScript。
- 与 [Yarn](https://yarnpkg.com/en/package/uikit) 一起安装以获得预构建的JavaScript，CSS和Less源文件。在将UIkit应用于典型的Web项目时，建议这样做： ```yarn add uikit```
- 克隆仓库以获取包括构建脚本在内的所有源文件：`git clone git://github.com/uikit/uikit.git`

所有UIkit版本的编译文件也都通过[jsdelivr.com](https://www.jsdelivr.com/package/npm/uikit)托管在jsDelivr内容分发网络上。

```html
<!-- 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)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)托管在jsDelivr内容分发网络上[jsDelivr](https://www.jsdelivr.com/package/npm/uikit)获得。



***

## File structure of the source-源文件结构

Github 项目包含了被编译到`dist`文件夹中的所有源文件。 [Less](http://lesscss.org) 源文件将被编译成为 CSS 文件，将JavaScript源代码打包并转换为了ECMAScript 5，同时将图标打包到图标库中。

| 文件夹   | 描述                                             |
|:---------|:--------------------------------------------------------|
| `/src`   | 包含所有LESS，JavaScript和图片源文件。        |
| `/dist`  | 包含已编译的CSS和JS，并在每个发行版上进行了更新。 |
| `/tests` | 包含所有组件的HTML测试文件。             |

***

## Compile from Github source-从Github源码编译

需要自己动手编译 UIkit，你可以使用已有的构建脚本。

```sh
# 运行一次以安装所有依赖项
yarn

# 编译所有源文件
yarn compile

# 监视文件并在文件每次更改时自动进行编译
yarn watch
```

编译完成后，在`dist` 文件夹中还有一些额外的文件，默认情况下它们不会被检查。如果你添加了[自定义 UIkit主题](less.md#use-included-build-process)，那么构建任务会创建更多的额外文件。

```html
/dist/css

    <!-- UIkit的CSS -->
    uikit.css
    uikit.min.css

    <!-- UIkit核心样式，没有默认主题 -->
    uikit-core.css
    uikit-core.min.css

    <!-- UIkit CSS RTL版本-->
    uikit.rtl.css
    uikit.rtl.min.css


/dist/js

    <!-- UIkit的JavaScript -->
    uikit.js
    uikit.min.js

    <!-- 精简了JavaScript。 核心功能，无需其他组件 -->
    uikit-core.js
    uikit-core.min.js

    <!-- 图标库 -->
    uikit-icons.js
    uikit-icons.min.js

    <!-- 其他组件（例如Lightbox），仅在包含uikit-core.js时才需要 -->
    /components
```

要使用 UIkit 的 CSS 和 JavaScript，要在你的 HTML文件中[引入这些文件](introduction.md#html-markup)然后根据文件中列出的任意组件来添加它们的代码标签。

要在每次更改LESS或JavaScript时自动编译UIkit，可以使用随附的构建脚本。

```sh
yarn watch
```

<script>
    UIkit.util.ajax('https://getuikit.com/assets/uikit/package.json', {responseType: 'json'}).then(function (xhr) {
            UIkit.util.$$('pre').forEach(function (pre) {
                pre.innerHTML = pre.innerHTML.replace(/\[uikit-version]/g, xhr.response.version);
            });
        });
</script>