QMUI Web 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
QMUI Web 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
QMUI Web 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !

软件简介

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 指数为
超过 的项目

评论 (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
回复
举报
更多评论
发表于大前端专区
2018/04/24 20:35

腾讯 QMUI Web 3.0 正式发布,带来全新功能

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由 QMUI 团队 出品。 官网:http://qmuiteam.com/web 主要特性更新 基于已经正式发布的 Gulp 4 进行重构,依赖于 Gulp 4 全新的任务系统 bach,带来更稳定以及更高效的工作流。由于 Gulp 4 中使用了全新的文件监听模块,以及利用 Gulp 4 原生的任务并行/串行机制,以及增量任务的特性,代替...

11
22
发表了资讯
2017/08/25 11:28

腾讯 Web UI 解决方案 QMUI Web 正式回迁开源

项目简介 QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。由腾讯广研 QMUI 团队出品。框架主要由一个丰富的 Sass 方法合集与内置的工作流构成。通过 QMUI Web,开发者可以很轻松地提高 Web UI 开发的效率,同时保持了项目的高可维护性与稳健。 QMUI Web 的创作动机和制作经验,来自项目团队在多个项目中的迭代思考,它特别适用于需要方便地控制项目的整体样式,或者需要应对频繁的界面变动的项目...

6
54
发表了资讯
2017/04/11 16:32

QMUI Web 框架正式发布 2.0 版本

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由QMUI 团队出品。 重要更新 本次框架更新版为 2.0 正式版本,带来了大量的改进和新特性,重要的更新包括: 全新的 Sass 编译处理,经过较长时间的测试,我们采用了效率更高的 node-sass 作为 Sass 的编译内核,同时精简了样式监听的逻辑,使得样式编译提升了近2-4倍,并极大地降低了组件、...

2
45
发表了资讯
2017/02/07 16:02

QMUI Web 1.4.1,全面更新依赖包

QMUI Web 1.4.1 发布了。本次更新涉及 QMUI Web 框架以及相关的 Yeoman 脚手架的依赖包更新,主要包括 browser-sync(浏览器自动刷新),gulp-clean-css(CSS 压缩以及清理),gulp-imagemin(压缩图片),gulp-uglify(压缩 JavaScript)这几个功能的依赖包更新,为使用者带来更稳健的服务。 近期更新 box-sizing 与 box-shadow 方法标记为不推荐,文档加入支持“不推荐”字段的显示。 README 增加英文/繁体中文版本。 genera...

3
20
发表了资讯
2016/12/13 18:26

QMUI Web 1.3.2,工具方法优化与更完善的文档

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由 QMUI 团队 出品。 Github: https://github.com/QMUI/QMUI_Web 官网:http://qmuiteam.com/web 本次更新涉及 QMUI Web 框架源码的更新,主要为工具方法的系列优化,具体如下: 本次更新: 统一所有工具方法使用连接符代替下划线。 工具方法增加注意说明。 文档侧边栏重新设计,更便于寻找...

1
22
发表了资讯
2016/11/15 16:11

腾讯 QMUI Web 1.3.1,新增多个辅助工具与优化

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由腾讯 QMUI 团队 出品。 Github: https://github.com/QMUI/QMUI_Web 官网:http://qmuiteam.com/web 本次更新涉及 QMUI Web 框架源码以及安装器等多个方面的更新,其中主要为安装器,即 generator-qmui 1.3.1 的更新。generator-qmui 是一个标准的 Yeoman 脚手架,可以帮助你完成 QMUI W...

3
36
发表了资讯
2016/11/01 00:00

腾讯 QMUI Web 1.3 发布,更完善的工具方法

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由腾讯 QMUI 团队出品。 Github: https://github.com/QMUI/QMUI_Web 官网:http://qmuiteam.com/web 本次更新主要是 QMUI Web 框架的 Sass 工具方法更新,包括增加了新的工具方法,对原有的工具方法补充了示例,以及推出了全新设计的工具方法文档,使得工具方法更完善也更加容易使用。另外...

3
56
发表了资讯
2016/10/25 00:00

腾讯 QMUI Web 1.2.6 发布,新增 toFixed

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由腾讯 QMUI 团队出品。 本次更新 新增 toFixed 方法,可以将数值格式化为指定小数位数的数字。 调试模式增加显示 Compass 日志。 增加 Github Issues 模板。 近期更新 合并变更文件时输出具体的变更文件。 下载地址: Source code (zip) Source code (tar.gz)...

6
32
发表了资讯
2016/10/09 00:00

腾讯 QMUI Web 1.2.5,新增多项功能

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由腾讯 QMUI 团队出品。 Github: https://github.com/QMUI/QMUI_Web 官网:http://qmuiteam.com/web 本次版本 1.2.5 更新涉及 QMUI Web 框架源码以及安装器和 GUI 等多个方面的更新,其中主要为 GUI。QMUI Web Desktop 可以管理基于 QMUI Web 进行开发的项目,通过 GUI 界面处理 QMUI Web...

13
82
发表了资讯
2016/09/06 00:00

腾讯 QMUI Web 1.2.2,基础组件全新默认样式

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由腾讯 QMUI 团队出品。 Github: https://github.com/QMUI/QMUI_Web 官网:http://qmuiteam.com/web 本次框架更新版本为 1.2.2,主要为基础组件全新默认样式以及 Yeoman 模板自动生成基础组件列表两个更新,详细内容如下: 本次更新 全新组件默认样式,带来更好的默认外观。 创建新项目后自...

10
81
发表了资讯
2016/08/31 00:00

QMUI Web 1.2.0 更新发布, UI 开发框架

QMUI Web 1.2.0 更新发布了,QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由腾讯 QMUI 团队出品。 Github: https://github.com/QMUI/qmui_web 官网:http://qmuiteam.com/web 本次框架更新版本为 1.2.0,主要为框架源码以及对应的 yeoman 模板的更新,详细内容如下: 工作流增加 Local Server,加入浏览器自动刷新功能,支持构建本地服...

3
48
发表了资讯
2016/08/15 00:00

QMUI Web 框架发布重大更新,由腾讯 QMUI 团队出品

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,另外还有搭配使用的桌面 App —— QMUI Web Desktop。由腾讯 [QMUI 团队]出品。 本次框架更新为 QMUI Web Desktop 的更新——1.1.0 版本。QMUI Web Desktop 可以管理基于 QMUI Web 进行开发的项目,通过 GUI 界面处理 QMUI Web 的服务开启/关闭,使框架的使用变得更加便捷,并提供了编译提...

15
151
发表了资讯
2016/08/04 00:00

QMUI Web 前端框架正式发布

QMUI Web 官网:http://qmuiteam.com/web Github: https://github.com/QMUI/qmui_web QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。通过 QMUI Web,开发者可以很轻松地提高 Web UI 开发的效率,同时保持了项目的高可维护性与稳健。如果你的项目需要有一套完整的设计,并且可能有频繁的变动,那么 QMUI Web 框架将会是你最好的解决方案。 功能特性 基础配置与组件 通过预设的 SASS 配置表和公共...

8
84
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2017/09/07 11:03

腾讯正式开源 QMUI Web 前端框架!

前言 经过长时间的打磨迭代,QMUI Web 作为腾讯广研 QMUI 团队的一个开源项目,正式发布到 Tencent Github。QMUI Web 是一个 Web UI 的解决方案,从零开始,由编码规范,到组件和工具方法的制作,再到工作流的整合,不断在迭代,也不断在优化,走过了不少的路。 QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成。通过 QMUI Web,开发者可以...

0
0
发表了博客
2020/08/11 21:52

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

# 缘起 随着 App 的成长,我们难免会遇到以下这些需求: 1. H5 跳原生界面 2. Notification 点击调相关界面 3. 根据后台返回数据跳转界面,例如登录成功后跳不同界面或者根据运营需求跳不同界面 4. 实现 AppLink 的跳转 为了解决这些问题,App 一般都会自定义一个 scheme 跳转协议,多端都实现这个协议,以此来解决各种运营需求。今天就来解析下 [QMUI](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FTencent%2F...

0
0
发表了博客
2020/12/08 12:00

相比于原生的Android弹出框,最新版QMUI的弹出框更加漂亮美观,QMUI的配置与弹出框的实现?

这里我建议测试QMUI框架的时候,自己先新建一个项目测试一下,避免因为一些其他原因而导致QMUI是使用不成功。 QMUI的配置 导入QMUI框架 第二步修改主题样式 第三步实现基本的弹框功能 导入QMUI框架 QMUI的官网地址是QMUI 首先先写下载包的仓库地址,找到你build.gradle的第一个文件>-allprojects。加入红色圆圈代码。 maven { url 'https://jitpack.io' } 其次,加入QMUI包 代码如下: implementation 'com.qmuiteam...

0
0
发表了博客
2019/08/07 17:36

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

1、编译源码,input String“” 解决办法: 打开qmuidemo里面的gradle文件,注释掉顶部的 //def cmd = 'git rev-list HEAD --count' //def gitVersion = cmd.execute().text.trim().toInteger() 然后把27行的versionCode改跟下面的版本号对应 //versionCode gitVersion versionCode 14 versionName "1.4.0" 提示:(如果在studio中无法直接打开gradle可已在文件夹中用其他工具打开grand了 然后重新导入编译项目) 2、导入正确后...

0
0
发表了博客
2019/06/12 23:58

Web应用和Web框架

一、Web应用 二、Web框架 三、wsgiref模块 一、Web应用   1、什么是Web应用?   Web应用程序是一种可以通过Web访问的应用程序,特点是用户很容易访问,只需要有浏览器即可,不需要安装其他软件。   2、Web应用程序的模式   应用程序有两种模式,即C/S、B/S两种,C/S是客户端/服务器端程序,这类程序一般独立运行;而B/S就是浏览器端/服务器端应用程序,这类应用程序一般借助谷歌,火狐等浏览器来运行。Web应用程序一般是...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
4 评论
311 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部