QMUI 是一个开源的 Web UI 框架，由腾讯 QMUI 团队开发设计， QMUI Web 包含了超过70个 Sass mixin/function/extend，涉及布局、外观、动画、设备适配、数值计算以及 Sass 原生能力增强等多个方面，提升开发效率, 同时保持了项目的高可维护性与稳健。

功能特性

基础配置与组件

通过内置的公共组件和对应的 SASS 配置表，只需修改简单的配置即可快速实现所需样式的组件。（QMUI SASS 配置表和公共组件如何帮忙开发者快速搭建项目基础 UI？）

SASS 与 Compass 支持

脚手架

QMUI Web 内置的工作流拥有从初始化项目到变更文件的各种自动化处理，包含了模板引擎，图片集中管理与自动压缩，静态资源合并、压缩与变更以及冗余文件清理等功能。

扩展组件

QMUI Web 除了内置的公共组件外，还通过扩展的方式提供了常用的扩展组件，如雪碧图组件，等高左右双栏，文件上传按钮，树状选择菜单。

环境配置

#安装 gulp
npm install --global gulp
#安装 SASS
gem install sass
#安装 Compass
gem update --system
gem install compass

快速开始

推荐使用 Yeoman 脚手架 generator-qmui 安装和配置 QMUI Web。该工具可以帮助你完成 QMUI Web 的所有安装和配置。

#安装 Yeoman，如果本地已安装可以忽略
npm install -g yo
#安装 QMUI 的模板
npm install -g generator-qmui
#在项目根目录执行以下命令
yo qmui

完成后生成的项目目录结构

项目根目录
├─public          // 静态资源目录，由 Compass 和 gulp 生成
│  ├─js           // 静态资源 js 文件
│  └─style        // 静态资源 UI 文件
│     ├─css       // 静态资源 css 文件
│     └─images    // 静态资源 images 文件
├─UI_dev          // 实际进行开发的样式目录
│  ├─project      // 项目相关 SASS 与 images 文件，由 gulp 生成
│  │  ├─images    // 项目相关图片文件
│  │  ├─logic     // 项目相关逻辑样式
│  │  └─widget    // 项目相关公共组件样式
│  └─qmui_web     // QMUI Web 主源码应放置在这一层目录
├─UI_html         // 静态模板目录，用于 UI 工程师开发
└─UI_html_result  // 静态模板 gulp 处理后的版本，用于前端拼接最终的模板

[repo owner=”QMUI” name=”QMUI_Web”]