UIkit3.x文档

安装

了解在哪里下载以及怎样编译 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@3.2.2/dist/css/uikit.min.css" />
	
	<!-- UIkit JS -->
	<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>

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

源文件结构

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

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

从Github源码编译

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

# Run once to install all dependencies
	yarn
	
	# Compile all source files
	yarn compile
	
	# Watch files and compile automatically everytime a file changes
	yarn watch

注意 使用Node.js的8.2.0版本或以上。

编译完成后，在 dist 在 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，可以使用随附的构建脚本。

yarn watch