QMUI 是一个开源的 Web UI 框架,由腾讯 QMUI 团队开发设计, QMUI Web 包含了超过70个 Sass mixin/function/extend,涉及布局、外观、动画、设备适配、数值计算以及 Sass 原生能力增强等多个方面,提升开发效率, 同时保持了项目的高可维护性与稳健。
功能特性
基础配置与组件
通过内置的公共组件和对应的 SASS 配置表,只需修改简单的配置即可快速实现所需样式的组件。(QMUI SASS 配置表和公共组件如何帮忙开发者快速搭建项目基础 UI:https://github.com/QMUI/qmui_web/wiki/Q&A#qmui-sass-%E9%85%8D%E7%BD%AE%E8%A1%A8%E5%92%8C%E5%85%AC%E5%85%B1%E7%BB%84%E4%BB%B6%E5%A6%82%E4%BD%95%E5%B8%AE%E5%BF%99%E5%BC%80%E5%8F%91%E8%80%85%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%E5%9F%BA%E7%A1%80-ui)
SASS 与 Compass 支持
脚手架
QMUI Web 内置的工作流拥有从初始化项目到变更文件的各种自动化处理,包含了模板引擎,图片集中管理与自动压缩,静态资源合并、压缩与变更以及冗余文件清理等功能。
扩展组件
QMUI Web 除了内置的公共组件外,还通过扩展的方式提供了常用的扩展组件,如雪碧图组件,等高左右双栏,文件上传按钮,树状选择菜单。
环境配置
#安装 gulp
npm install --global gulp
#安装 SASS
gem install sass
#安装 Compass
gem update --system
gem install compass
快速开始
推荐使用 Yeoman(http://yeoman.io/) 脚手架 generator-qmui(https://github.com/QMUI/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”]
ppt.cc/fVjECx ppt.cc/fEnHsx ppt.cc/fRZTnx ppt.cc/fSZ3cx ppt.cc/fLOuCx ppt.cc/fE9Nux ppt.cc/fL5Kyx ppt.cc/fIr1ax ppt.cc/f71Yqx tecmint.com linuxcool.com linux.die.net linux.it.net.cn ostechnix.com unix.com ubuntugeek.com runoob.com man.linuxde.net v.gd/4A2G5b v.gd/VBg0IE v.gd/kVkm7n v.gd/jCKP1G linuxprobe.com linuxtechi.com howtoforge.com linuxstory.org systutorials.com ghacks.net linuxopsys.com v.gd/2P9wTx v.gd/FtfpqE v.gd/eMfHsm v.gd/Ub7mqv v.gd/RReVk0 v.gd/vS3uTI v.gd/4Zxmba v.gd/1BnFph
Pages
▼
No comments:
Post a Comment