QMUI Web 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
QMUI Web 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript HTML/CSS
操作系统: 跨平台
开发厂商: 腾讯
收录时间: 2016-08-04
提 交 者: kayo5994

QMUI Web

官网:http://qmuiteam.com/web

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。通过 QMUI Web,开发者可以很轻松地提高 Web UI 开发的效率,同时保持了项目的高可维护性与稳健。如果你的项目需要有一套完整的设计,并且可能有频繁的变动,那么 QMUI Web 框架将会是你最好的解决方案。

功能特性

基础配置与组件

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

SASS 与 Compass 支持

QMUI Web 包含70个 SASS mixin/function/extend,涉及布局、外观、动画、设备适配、数值计算以及 SASS 原生能力增强等多个方面,可以大幅提升开发效率。

脚手架

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

 

工作流任务列表

#在 UI_dev/qmui_web 中执行以下命令可以查看工作流的任务列表及说明
gulp help

也可以查看文档中的详细说明

QMUI Web Desktop

推荐配合使用的桌面 App:QMUI Web Desktop。它可以管理基于 QMUI Web 进行开发的项目,通过 GUI 界面处理 QMUI Web 的服务开启/关闭,使框架的使用变得更加便捷,并提供了编译提醒,出错提醒,进程关闭提醒等额外的功能。

完善框架

如果有意见反馈或者功能建议,欢迎创建 Issue 或发送 Pull Request,调试与修改框架请先阅读文档,感谢你的支持和贡献。

设计稿 Sketch 源文件可在 Dribbble 上获取。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

QMUI Web 的相关博客

从需求出发:QMUI 最新版 QMUISchemeHandler 的设计与实现解析

缘起 随着 App 的成长,我们难免会遇到以下这些需求: H5 跳原生界面 Notification 点击调相关界面 根据后台返回数据跳转界面...

QMUI android 框架 git下载项目运行报错解决 input String“”

1、编译源码,input String“” 解决办法: 打开qmuidemo里面的gradle文件,注释掉顶部的 //def cmd = 'git rev-list HEAD -...

web前端 -- web介绍

1、先简单介绍几个概念:   H5是HTML标准的5.0版本,HTML5简称H5。需要用到的技术:HTML + CSS、JavaScript。   web前端:...

Web前端 Web前端和Web后端的区分

一、绪论 1、 前台:呈现给用户的视觉和基本的操作。 后台:用户浏览网页时,我们看不见的后台数据跑动。后台包括前端、后端。...

Web应用和Web框架

一、Web应用 二、Web框架 三、wsgiref模块 一、Web应用   1、什么是Web应用?   Web应用程序是一种可以通过Web访问的应用...

Web

Web 2.0,Web Service, Web Application, Web API, PHP, Ajax, JSON, JQuery, SOA, Web Server,NoSQL, MySQL...

web

Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics Learning Web Design 5th Edition ...

web

@RequestMapping("/content/category/list") @ResponseBody public List<EasyUITreeNode> getContentCatoryList(@RequestPara...

Web容器Web服务器及常见的Web容器有哪些?

  一、引言   首先来理解一下简单的一个请求发送到响应的过程。 首先,客户端,通常是浏览器或者一些应用发送请求到你的服...

web安全第一课 web简介

——以上帝视角了解web本质—— 一:web发展史 web:world wide web 一种非常普遍的互联网应用,说白了就是网页。 web特点:非...

QMUI Web 的相关问答

还没有任何问答,马上提问

评论 (4)

加载中
腾讯的,啧啧,我嗅到了一波氪金的味道
2018/01/16 18:40
回复
举报
打分: 力荐
好,不错的分享
2017/02/22 21:35
回复
举报
这玩意儿拿来干嘛用的,表示不懂。 #QMUI Web#
2016/10/26 09:10
回复
举报
红红火火 #QMUI Web#
2016/10/28 16:40
回复
举报
更多评论
4 评论
310 收藏
分享
返回顶部
顶部