QMUI Web 前端框架使用教程

QMUI_Web

项目地址: https://gitcode.com/gh_mirrors/qmu/qmui_web

1. 项目介绍

QMUI Web 是一个专注于 Web UI 开发的前端框架，旨在帮助开发者快速实现特定的一整套设计。框架主要由一个强大的 SASS 方法合集与内置的工作流构成。通过 QMUI Web，开发者可以轻松提高 Web UI 开发的效率，同时保持项目的高可维护性与稳健性。

功能特性

基础配置与组件：通过内置的公共组件和对应的 SASS 配置表，开发者只需修改简单的配置即可快速实现所需样式的组件。SASS 增强支持：QMUI Web 包含70个 SASS mixin/function/extend，涉及布局、外观、动画、设备适配、数值计算以及 SASS 原生能力增强等多个方面，大幅提升开发效率。完善的内置工作流：QMUI Web 内置的工作流拥有从初始化项目到变更文件的各种自动化处理，包含了模板引擎、雪碧图处理、图片集中管理与自动压缩、静态资源合并、压缩与变更以及冗余文件清理等功能。扩展组件：除了内置的公共组件外，QMUI Web 还通过扩展的方式提供了常用的扩展组件，如等高左右双栏、文件上传按钮、树状选择菜单等。

2. 项目快速启动

环境配置

确保安装 Node.js（建议 14.0 或以上版本），并用以下命令全局安装 gulp：

# 安装 gulp

npm install --global gulp

快速开始

推荐使用 Yeoman 脚手架 generator-qmui 安装和配置 QMUI Web，该工具可以帮助你完成 QMUI Web 的所有安装和配置。

# 安装 Yeoman，如果本地已安装可以忽略

npm install -g yo

# 安装 QMUI 的模板

npm install -g generator-qmui

# 在项目根目录执行以下命令

yo qmui

生成的项目目录结构

项目根目录

├─public // 静态资源目录，由 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_html_result // 静态模板 gulp 处理后的版本，用于前端拼接最终的模板

工作流任务列表

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

gulp list

3. 应用案例和最佳实践

QMUI Web 已经被广泛应用于多个 Web 项目中，特别是在需要快速迭代和频繁界面变动的项目中表现尤为出色。以下是一些应用案例：

企业内部管理系统：通过 QMUI Web 提供的组件和配置，开发者可以快速搭建出符合企业风格的管理系统界面，大大缩短了开发周期。电商网站：在电商网站中，界面变化频繁，QMUI Web 的灵活配置和强大的 SASS 支持使得开发者可以轻松应对各种界面需求。移动端 Web 应用：QMUI Web 的设备适配功能使得其在移动端 Web 应用中也有出色的表现，开发者可以快速实现响应式布局。

4. 典型生态项目

QMUI Web 作为一个前端框架，与其他开源项目结合使用可以进一步提升开发效率和项目质量。以下是一些典型的生态项目：

Gulp：QMUI Web 内置的工作流基于 Gulp，开发者可以通过 Gulp 实现各种自动化任务，如静态资源合并、压缩、图片处理等。Yeoman：通过 Yeoman 脚手架 generator-qmui，开发者可以快速初始化 QMUI Web 项目，减少配置工作。SASS：QMUI Web 提供了丰富的 SASS mixin 和函数，开发者可以利用 SASS 的强大功能进行样式开发。

通过结合这些生态项目，开发者可以构建出高效、可维护的前端项目。

QMUI_Web

项目地址: https://gitcode.com/gh_mirrors/qmu/qmui_web