当前位置: 首页 > 软件库 > Web应用开发 > CSS框架 >

QMUI Web

快速产生项目 UI 的前端框架
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 Web应用开发、 CSS框架
软件类型 开源软件
地区 国产
投 递 者 夏侯涵映
操作系统 跨平台
开源组织 腾讯
适用人群 未知
 软件概览

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 上获取。

  • 作者简介: 李浩成(Kayo),腾讯广州研发部 UI 工程师。 经过长时间的打磨迭代,QMUI Web 作为腾讯广研 QMUI 团队的一个开源项目,正式发布到 Tencent Github。QMUI Web 是一个 Web UI 的解决方案,从零开始,由编码规范,到组件和工具方法的制作,再到工作流的整合,不断在迭代,也不断在优化,走过了不少的路。趁着发布的机会,我们正好回顾这一路的探索过程,分享其

  • QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,另外还有搭配使用的桌面 App —— QMUI Web Desktop。由腾讯 QMUI 团队出品。 Github: github.com/QMUI/qmui_w… 官网:qmuiteam.com/web 本次框架更新为 QMUI Web Desk

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

 相关资料
  • 虽然flutter提供了material,但是还是要做大量的封装工作,有类似web快速构建页面的UI 框架吗?

  • 快速启动 demo地址 https://github.com/ChenShenhai/koa2-note/blob/master/demo/project/ 环境准备 初始化数据库 安装MySQL5.6以上版本 创建数据库koa_demo create database koa_demo; 配置项目config.js https://github.com/ChenShenhai/koa2-note

  • 该项目演示了如何在 SOFABoot 中使用 SOFALookout 并且对接到 Spring Boot 的 Actuator 中。如果想要对接到 Prometheus 上或者其他的 Registry 中,请参考 Registry 一节。 新建 SpringBoot(或 SofaBoot )项目 新建一个 Spring Boot 的应用(如果是 SOFABoot 工程按照 SOFABoot 文档

  • AKjs前端框架是Andrew.Kim和他的团队一起研发的基于jQuery的一个轻量级前端框架。它是只要懂jQuery的语法很容易上手的框架。该框架里面现在发布了很多移动端常用的功能效果;开发者们使用过程中功能插件也可以自己扩展增加。另一方面,它是相当于一个丰富的组件化UI框架,优点是开发要前后端分离,项目开发过程中后端通过ajax调用数据的机制。 AKjs是一个基于jQuery的一套构建用户界面

  • 普通 Java 项目 在应用中加入 client 的 Maven 依赖 <dependency>    <groupId>com.alipay.sofa.lookout</groupId> <artifactId>lookout-client</artifactId>    <version>${lookout.client.version}</version> </depen

  • 启动项目(请先完成环境依赖安装) 克隆项目 执行 => composer install (如果安装很慢,可以使用国内镜像,但是镜像包会有延迟) 新建一个runtime目录,用于存放日志等cache文件 配置config中的database配置文件 设置config/service.php中的registry_address.目前只支持redis、mysql作为注册中心 启动http server

  • 本人前端,公司给了我一个 node.js + TypeScript 写成的后端项目,给的时间大概是一周。 要求我在这段时间里: 自己要理解项目里的某两个重点接口的逻辑; 可以向他人讲解这两个重点接口; 能用 postman 调通这两个重点接口; 可以在以后对这两个重点接口进行扩展(深度掌握这两个接口)。 本人目前连这个项目都不知道怎么启动,也没有前辈可以指导我。数据库暂时还不知道要怎么放到本地,不

  • 我有一个SpringBootRESTAPI应用程序,我集成了Swagger作为文档,还用它用Swagger UI测试API。 现在,我的任务是在我们的生产环境(公共域)上禁用Swagger-UI,并在私有IP上的开发环境中启用它。