ZUI中提供了众多丰富的web组件，几乎为你准备构建现代Web应用所有基础内容。但大部分场景并不需要所有组件，所有并没有将所有内容打包为一个CSS文件和一个JS文件，在标准版中仅包含精心选择的组件，这些组件用于绝大部分场景。

在构建轻量的应用时需要的内容更少。ZUI预编译版本中提供了一些简洁的版本。包含了ZUI中大部分常用内容，经过压缩后体积更小。你可以在dist目录下找到文件名包含'.lite'的文件记为简洁的版本。

标准版

在标准版中包含绝大部分常用组件。预编译的标准版包含以下文件：

zui/
└── dist/
    ├── css/                    CSS文件
    │   ├── zui.css
    │   ├── zui.min.css
    │   └── zui.map.css
    ├── js/                     Javascript文件
    │   ├── zui.js
    │   └── zui.min.js
    └── fonts/                  图标字体文件
        ├── zenicon.eot
        ├── zenicon.ttf
        ├── zenicon.woff
        └── zenicon.svg

简洁版

在简洁版中包含大部分常用组件。标准版中已包含简洁版的所有内容。预编译的简洁版包含以下文件：

zui/
└── dist/
    ├── css/                     CSS文件
    │   ├── zui.lite.css
    │   ├── zui.lite.min.css
    │   └── zui.lite.map.css
    ├── js/                      Javascript文件
    │   ├── zui.lite.js
    │   └── zui.lite.min.js
    └── fonts/                   图标字体文件
        ├── zenicon.eot
        ├── zenicon.ttf
        ├── zenicon.woff
        └── zenicon.svg

独立组件

一些组件可能既不包含在标准版中，也没有包含在简洁版中，使用时需要配合标准版或简洁版独立引用。可以在以下目录中找到独立组件包含的文件：

zui/
└── dist/
    └── lib/                      独立加载的组件
        ├── chosen/               Chosen组件
        ├── datetimepicker/       日期时间选择组件
        ├── datatable/            数据表格组件
        └── ...                   更多组件....

组件清单

组件清单

组件清单帮助你快速查找所需的组件是否包含在指定版本中。

组件 标准版 简洁版 独立组件 版本要求
正在加载列表...

使用Grunt定制

ZUI使用 Grunt 作为构建系统。如果不了解 Grunt 也没有关系，Grunt是一个非常棒而且容易上手的工具。下面给出简要步骤来准备编译ZUI，如果想了解更多请访问Grunt官方网站。

安装Grunt

Grunt构建在nodejs之上。在安装Grunt之前需要首先下载并安装node.js。最新版的nodejs已包含npm（node packaged modules）。npm是nodejs用来管理扩展包的工具。

安装nodejs之后，在命令行进行如下操作：

  1. 在全局环境中安装grunt-cli：npm install -g grunt-cli。
  2. 进入ZUI源码目录，执行npm install命令。nmp将读取包配置文件package.json文件并自动安装所有依赖的扩展包。

使用 Grunt 来构建

完成上述步骤就可以进行编译了。只需要进入ZUI中使用命令行输入对应的命令就可以启动编译任务。内置的build命令可以完成大部分编译任务。以下为ZUI内置的一些常用任务命令。

命令 说明 输出目录
grunt build:standard 编译标准版
  • dist/js/zui*.js
  • dist/css/zui*.css
  • dist/fonts/**
grunt build:lite 编译简洁版
  • dist/js/zui.lite*.js
  • dist/css/zui.lite*.css
  • dist/fonts/**
grunt build:dist 编译标准版和简洁版以及常用独立组件
  • dist/js/**
  • dist/css/**
  • dist/fonts/**
  • dist/lib/*/**
grunt dist grunt build:dist的简单写法
  • dist/js/**
  • dist/css/**
  • dist/fonts/**
  • dist/lib/*/**
grunt build:doc 编译文档所需资源
  • doc/js/zui*.js
  • doc/css/zui*.css
  • doc/fonts/**
grunt build:theme 编译主题
  • dist/css/zui-theme*.css
grunt build:[build name] 编译独立组件包，[build name]为组件包名称，可以为calendar、kindeditor、chosen等
  • dist/lib/[build name]/**
grunt build:[control name] 编译单独控件，[control name]为控件名称，可以为button、alerts、panels等
  • dist/lib/[control name]/**

如果了解Grunt，当然可以通过编辑Gruntfile.js文件来定义自己的编译任务。