本期是新开源报道第 1 期，本期我们要报道的新开源软件 QMUI Web
腾讯 Web UI 解决方案 QMUI Web 正式回迁开源啦，据说通过 QMUI Web，开发者可以很轻松地提高 Web UI 开发的效率，同时保持了项目的高可维护性与稳健。不妨一起深入了解了解
前端框架 QMUI Web
授权协议：MIT
开发语言：JavaScript Html/CSS
操作系统：跨平台
开发厂商：腾讯
Github：https://github.com/Tencent/QMUI_Web ★937
QMUI Web 介绍
QMUI Web 是一个专注 Web UI 开发，帮助开发者快速实现特定的一整套设计的框架。由腾讯广研 QMUI 团队出品。框架主要由一个丰富的 Sass 方法合集与内置的工作流构成。通过 QMUI Web，开发者可以很轻松地提高 Web UI 开发的效率，同时保持了项目的高可维护性与稳健。，框架的各种功能会帮助开发者应对这类整体 UI 变更的场景。QMUI Web 是一整套解决方案，但其中的 Sass 工具方法，团队编码规范也可以作为单品单独使用。
为提升搭建效率，项目支持使用 Yeoman 的方式快速安装和配置，并提供了桌面 App 形式的项目管理工具 —— QMUI Web Desktop，因而上手也是非常简单。目前 QMUI Web 框架已经支持了企业微信、微信读书等产品。
QMUI Web 特性
● 基础配置与组件
通过内置的公共组件和对应的 Sass 配置表，你只需修改简单的配置即可快速实现所需样式的组件。
QMUI SASS 配置表和公共组件如何快速搭建项目基础 UI？
QMUI Sass 配置表是很多 Sass 变量的合集，分别由 CSS Reset，Common CSS，Component 三个部分的 Sass 代码所使用。因此修改这些变量的值可以快速地修改到对应的 UI 表现，例如 Common CSS 中的链接色、全局字体大小，各种细分颜色（黑色、灰色），以及 6 个基础组件（按钮、输入框、对话框、下拉菜单、遮罩层、选项卡）的表现，由于这些 Sass 代码中绝大部分的内容已经由 QMUI 预先写好，开发者只需要修改对应的配置变量即可快速地修改 UI 表现。
另外6个组件除了配置表所控制的基础样式外，还会自动生成6个 _scss 文件，以项目前缀（由开发者在使用 QMUI Web 创建项目时输入）为开头建立了基础的组件模板，模板中预先写好了常用的 UI 样式（例如下面是按钮组件的预留样式），按实际需要修改数值即可定制组件。
● 环境配置
QMUI Web 的运行依赖于 gulp，Sass，Compass，Node.js（gulp 需要依赖）以及 Ruby（Sass 和 Compass 需要依赖），以上工具和环境除 Node.js 必须使用 4.0 以上版本外，其他工具都无具体版本要求，但建议都使用最新官方稳定版运行 QMUI Web。
● Sass 增强支持
QMUI Web 包含70个Sass mixin / function / extend，涉及布局、外观、动画、设备适配、数值计算以及 Sass 原生能力增强等多个方面，可以大幅度提升开发效率。
● 完善的内置工作流
QMUI Web 内置的工作流拥有从初始化项目到变更文件的各种自动化处理，包含了模板引擎，样式优化，CSS Sprite 雪碧图处理与 Retina 适配，图片自动压缩，静态资源合并、压缩与变更以及冗余文件清理等功能。
● 团队编码规范
QMUI Web 提供了一套完整的编码规范，包括 CSS + HTML 编写，注释规范等多个方面，这些规范本身与 QMUI 框架也是互相结合的，使得整个团队的开发过程和成果保持规范。
快速开始
推荐使用 Yeoman 脚手架 generator-qmui 安装和配置 QMUI Web。该工具可以帮助你完成 QMUI Web 的所有安装和配置。
最后，推荐配合使用的桌面 App：QMUI Web Desktop。它可以管理基于 QMUI Web 进行开发的项目，通过 GUI 界面处理 QMUI Web 的服务开启/关闭，使框架的使用变得更加便捷，并提供了编译提醒，出错提醒，进程关闭提醒等额外的功能。
作者：开源最前线（ID：OpenSourceTop） 猿妹
转载请注明来源作者
●本文编号12，以后想阅读这篇文章直接输入12即可
●输入m获取文章目录
↓↓↓ 点击"阅读原文" 进入GitHub详情页  
继续阅读
阅读原文