{"id":13671962,"url":"https://github.com/Tencent/QMUI_Web","last_synced_at":"2025-04-27T18:31:58.241Z","repository":{"id":9573045,"uuid":"62634962","full_name":"Tencent/QMUI_Web","owner":"Tencent","description":"An efficient front-end framework for developers building UI on the web.","archived":false,"fork":false,"pushed_at":"2023-04-27T20:45:26.000Z","size":2216,"stargazers_count":1722,"open_issues_count":6,"forks_count":237,"subscribers_count":120,"default_branch":"master","last_synced_at":"2025-04-14T19:59:13.747Z","etag":null,"topics":["gulpfile","sass-framework","web-ui","widget-toolkit","workflow"],"latest_commit_sha":null,"homepage":"http://qmuiteam.com/web","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tencent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-07-05T12:27:18.000Z","updated_at":"2025-04-03T17:18:23.000Z","dependencies_parsed_at":"2024-01-15T02:28:49.153Z","dependency_job_id":"1069979d-72e2-4f1a-954e-3a6b1d176a6f","html_url":"https://github.com/Tencent/QMUI_Web","commit_stats":{"total_commits":521,"total_committers":9,"mean_commits":"57.888888888888886","dds":"0.051823416506717845","last_synced_commit":"c52a23cfaddca796438befb7ffe6139868f159ba"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FQMUI_Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FQMUI_Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FQMUI_Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FQMUI_Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tencent","download_url":"https://codeload.github.com/Tencent/QMUI_Web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251187370,"owners_count":21549625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulpfile","sass-framework","web-ui","widget-toolkit","workflow"],"created_at":"2024-08-02T09:01:23.003Z","updated_at":"2025-04-27T18:31:57.128Z","avatar_url":"https://github.com/Tencent.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/QMUI/QMUIDemo_Web/master/public/style/images/independent/BannerForGithub_2x.png\" width=\"220\" alt=\"Banner\" /\u003e\n\u003c/p\u003e\n\n# QMUI Web [![Version Number](https://img.shields.io/npm/v/generator-qmui.svg?style=flat)](https://github.com/Tencent/QMUI_Web/ \"Version Number\")\n\u003e 一个旨在提高 UI 开发效率、快速产生项目 UI 的前端框架\n\u003e\n\u003e 官网：[http://qmuiteam.com/web](http://qmuiteam.com/web)\n\u003e\n\u003e 下载 Demo：[https://github.com/QMUI/QMUIDemo_Web/releases](https://github.com/QMUI/QMUIDemo_Web/releases)\n\n[[English]](https://github.com/Tencent/QMUI_Web/tree/master/docs-translations/en-US/README.md) / [[简体中文]](https://github.com/Tencent/QMUI_Web/blob/master/README.md) / [[繁體中文]](//github.com/Tencent/QMUI_Web/tree/master/docs-translations/zh-TW/README.md)\n\n[![Build Status](https://travis-ci.org/Tencent/QMUI_Web.svg?branch=master)](https://travis-ci.org/Tencent/QMUI_Web \"Build Status\")\n[![Build status](https://ci.appveyor.com/api/projects/status/1h6de3rq6x45nnse?svg=true\n)](https://ci.appveyor.com/project/kayo5994/qmui-web)\n[![QMUI Team Name](https://img.shields.io/badge/Team-QMUI-brightgreen.svg?style=flat)](https://github.com/QMUI \"QMUI Team\")\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](http://opensource.org/licenses/MIT \"Feel free to contribute.\")\n\nQMUI Web 是一个专注 Web UI 开发，帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成。通过 QMUI Web，开发者可以很轻松地提高 Web UI 开发的效率，同时保持了项目的高可维护性与稳健。如果你需要方便地控制项目的整体样式，或者需要应对频繁的界面变动，那么 QMUI Web 框架将会是你最好的解决方案。\n\n## 功能特性\n\n### 基础配置与组件\n通过内置的公共组件和对应的 SASS 配置表，你只需修改简单的配置即可快速实现所需样式的组件。（[QMUI SASS 配置表和公共组件如何帮忙开发者快速搭建项目基础 UI？](https://github.com/Tencent/QMUI_Web/wiki/Q\u0026A#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)）\n\n### SASS 增强支持\nQMUI Web 包含70个 SASS mixin/function/extend，涉及布局、外观、动画、设备适配、数值计算以及 SASS 原生能力增强等多个方面，可以大幅提升开发效率。\n\n### 完善的内置工作流\nQMUI Web 内置的工作流拥有从初始化项目到变更文件的各种自动化处理，包含了模板引擎，雪碧图处理，图片集中管理与自动压缩，静态资源合并、压缩与变更以及冗余文件清理等功能。\n\n### 扩展组件\nQMUI Web 除了内置的公共组件外，还通过扩展的方式提供了常用的扩展组件，如等高左右双栏，文件上传按钮，树状选择菜单。\n\n## 环境配置\n请确保安装 [Node.js](https://nodejs.org/)（建议 14.0 或以上版本），并用以下命令全局安装 gulp：\n\n```bash\n#安装 gulp\nnpm install --global gulp\n```\n\n## 快速开始\n推荐使用 [Yeoman](http://yeoman.io/) 脚手架 [generator-qmui](https://github.com/QMUI/generator-qmui) 安装和配置 QMUI Web。该工具可以帮助你完成 QMUI Web 的所有安装和配置。\n\n```bash\n#安装 Yeoman，如果本地已安装可以忽略\nnpm install -g yo\n#安装 QMUI 的模板\nnpm install -g generator-qmui\n#在项目根目录执行以下命令\nyo qmui\n```\n\u003cimg src=\"https://raw.githubusercontent.com/QMUI/QMUIDemo_Web/master/public/style/images/independent/Generator.gif\" width=\"842\" alt=\"效果预览\" /\u003e\n\n### 完成后生成的项目目录结构\n```bash\n项目根目录\n├─public          // 静态资源目录，由 gulp 生成\n│  ├─js           // 静态资源 js 文件\n│  └─style        // 静态资源 UI 文件\n│     ├─css       // 静态资源 css 文件\n│     └─images    // 静态资源 images 文件\n├─UI_dev          // 实际进行开发的样式目录\n│  ├─project      // 项目相关 SASS 与 images 文件，由 gulp 生成\n│  │  ├─images    // 项目相关图片文件\n│  │  ├─logic     // 项目相关逻辑样式\n│  │  └─widget    // 项目相关公共组件样式\n│  └─qmui_web     // QMUI Web 主源码应放置在这一层目录\n├─UI_html         // 静态模板目录\n└─UI_html_result  // 静态模板 gulp 处理后的版本，用于前端拼接最终的模板\n```\n\n对于需要有更强定制性的开发者，请参考[创建新项目（高级）](http://qmuiteam.com/web/page/start.html#qui_createProject)\n\n## 工作流任务列表\n\n```bash\n#在 UI_dev/qmui_web 中执行以下命令可以查看工作流的任务列表及说明\ngulp list\n```\n\n也可以查看文档中的[详细说明](http://qmuiteam.com/web/page/scaffold.html)。\n\n## 完善框架\n如果有意见反馈或者功能建议，欢迎创建 [Issue](https://github.com/Tencent/QMUI_Web/issues) 或发送 [Pull Request](https://github.com/Tencent/QMUI_Web/pulls)，调试与修改框架请先阅读[文档](http://qmuiteam.com/web/page/start.html#qui_frameworkImprove)，感谢你的支持和贡献。\n\n设计稿 Sketch 源文件可在 [Dribbble](https://dribbble.com/shots/2895907-QMUI-Logo) 上获取。\n\n## QMUI Web Desktop\n\n推荐配合使用的桌面 App：[QMUI Web Desktop](https://github.com/Tencent/QMUI_Web_desktop)。它可以管理基于 QMUI Web 进行开发的项目，通过 GUI 界面处理 QMUI Web 的服务开启/关闭，使框架的使用变得更加便捷，并提供了编译提醒，出错提醒，进程关闭提醒等额外的功能。\n\n\u003cimg src=\"https://raw.githubusercontent.com/QMUI/QMUIDemo_Web/master/public/style/images/independent/App_2x.png\" width=\"440\" alt=\"QMUI Web Desktop\" /\u003e\n","funding_links":[],"categories":["JavaScript","CSS","Projects List"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTencent%2FQMUI_Web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTencent%2FQMUI_Web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTencent%2FQMUI_Web/lists"}